はじめに 「React Journey」 と呼ばれる React においてコンポーネントがブラウザに表示されるまでどのようなプロセスを踏むのか？を示した図 が非常にわかりやすかったので、説明を加えながらみなさんに紹介したいと思います。 レンダリングの流れについて理解が曖昧な人は、ぜひ最後までご覧ください。 対象読者 ある程度 React を触っているが、もっとレンダリングについて理解したい人 公式ドキュメントの「レンダーとコミット」や「state はスナップショットである」などを読んだことがない人 React における「レンダリング」について 本題に入る前に、React を学習していると混乱しやすい「レンダリング」と呼ばれる概念をまず整理しておきましょう。 以下の記事にも書いてありますが、「レンダリング」という言葉はしばしば次の２種類の意味で使用されます。 ブラウザへ画面を表示させること
はじめに 本記事は BASE Advent Calendar 2023 の17日目の記事です。 こんにちはPay IDでフロントエンドエンジニアをしているnojiです。普段はあと払い（Pay ID）に関するフロントエンド周りの開発をメインに行っています。 payid.jp 11月6日にあと払い（Pay ID）は口座振替機能をリリースしました。これにより、今まではあと払い（Pay ID）を利用した翌月に、コンビニに支払いに行く必要がありましたが、金融機関口座を登録することでコンビニに行かずに手数料無料で自動で引き落とされるような支払い方法を選べるようになりました。 （https://payid.jp/atobaraiより） 口座振替登録時には以下のような画面を経て、金融機関のページに遷移し、金融機関と連携をする必要があります。 自分は口座振替機能におけるアプリでの口座申込画面の開発をWebV
Today we’re excited to announce that unstable support for Vite is available in Remix v2.2.0! Now you get all the benefits of Vite’s lightning fast DX ⚡️ out-of-the-box when using Remix. Try it out now! # minimal server npx create-remix@latest --template remix-run/remix/templates/unstable-vite # custom Express server npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express
Recoil で管理する状態を atom から atomFamily に変更した話 - spacelyのブログ
目次 目次 はじめに 状態管理したいデータ構造と機能要件 atom と atomFamily について atom atomFamily atom と atomFamily の使い分け atomFamily を使った実装 atom で実装した場合 atomFamily で実装した場合 atomFamily だからこその課題 atomFamily からデータを取得するためにはパラメータが必要 atomFamily の default に selector を設定できない 課題に対応した結果 リファクタリング前の状態一覧 (atom を使った実装の場合) リファクタリング後の状態一覧 (atomFamily を使った実装の場合) まとめ 最後に はじめに フルスタックエンジニアとして開発を行っている五十嵐です。弊社でリリースしている パノラマ変換 3D プレイヤー について、サーバサイドの Ru
React でゼロからフローチャートUIを実装する
最近、AIのワークフローを簡単に組める OSS「Dify」が注目を集めています。 Difyではブラウザ上でフローチャートを構築してLLMのワークフローを設計できます。 今回はこのUIの実装を理解するためにReactでフローチャートUIを実装してみようと思います。DifyではフローチャートUIの構築に「React Flow」を使用しています。React Flow は React で使えるフローチャートUIライブラリです。本記事の実装でも React Flow を参考にしてきます。 本記事はフローチャートUIの仕組みを理解することを目的にしています。 フローチャートUIの要素 フローチャートは主に、ノードとエッジから構成されます。ノード同士はエッジで繋ぐことができます。 この記事ではエッジ接続部分をコネクターと呼びます。 つくるもの シンプルなフローチャートUIを実装します。 今回作るフローチ
React Server Component、そしてqwikのインパクト ー フロントエンドアーキテクチャの最新動向をmizchiさんに聞いてきた(1)
こんにちは、テックフィード白石です。 日本のエンジニア界隈をリードするエキスパートに、テクノロジーの最前線を語っていただくYouTube動画連載「Ask the Expert」の新着動画が公開されました！ 今回は、フロントエンドのエキスパートmizchiさんに、フロントエンドの最新動向について詳しく伺ってきました。 mizchiさんのアカウントをぜひフォローしましょう！ mizchiさん（フロントエンド兼Node.jsエンジニア） ついでに白石のもフォロー推奨: 聞き手: テックフィード白石 以下に掲載するのは、インタビュー動画の内容の要約です（正確な書き起こしではありません）。 内容をフルにご覧になりたい方は、ぜひ動画をご視聴ください。 ご質問、ご感想などはYouTubeのコメント、もしくはこの記事のコメント欄でも受け付けております。どしどしお寄せください😊 以下、動画の内容の要約です
TSKaigiにて使用した資料です。 https://tskaigi.org/talks/ytaisei_ Reactを用いたSPA開発においてフレームワークの採用は時にtoo muchになります。 しかし、Next.jsやRemixのFiled-Basedなルーティングは開発体験が良いです。 私たちはSPA開発においても型安全でFile-Basedなルーティングを求めています。 今回はそのような状況においてTanStack Routerが有力な候補になることを、その特徴とメリットに触れながら解説します。 次の特徴を紹介します。 - 型安全でシンプルなルーティング - File-Basedなルート生成 - バンドルサイズを軽減するCode Splitting - Search Paramsによる状態管理
この記事では紹介してないものも載せてます。 既に実装済みなとこは省略 簡単に説明すると、Vercel上のNext.js製のWebアプリを作り、CMSはmicroCMSを利用してAPI経由でデータ（記事）を取得・表示させたWebアプリです。今回は「いいね機能」だけにフォーカスしているのでそれ以外の実装済みの部分は割愛しています。 記事に関する処理や表示に関して 簡単に説明します microCMSを使ってAPI経由でデータを取得 主に記事の一覧ページと詳細ページがある構成 getStaticPathsとgetStaticPropsをつかってSGしてます ルーティングはDynamic Routingを用いています 参考 ディレクトリ 「いいね」機能を実装するにあたって、関連するディレクトリとファイルを以下に示します。 ディレクトリ構成の図解 . ├── src │ ├── component
本ドキュメントは公式ドキュメントの v14.1.0 の断面を翻訳したものです。Next.js の公式 X アカウントにもポスト頂きました。 公式ドキュメントのアップデートに追随して適宜更新しますが、最新情報が反映できていない可能性があります。 一部翻訳途中のページがありますが、随時翻訳を追加予定です。 Next.js の App Router は、React の最新機能を使ってアプリケーションを構築するための新しい方法です。すでに Next.js に慣れ親しんでいる方であれば、App Router が既存のファイルシステムベースのルーターである Pages Router の自然な進化形であることがわかるでしょう。 新しいアプリケーションには、App Router の使用をお勧めします。既存のアプリケーションについては、段階的に App Router に移行できます。同じアプリケーションで両
この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。 location-stateとは location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。 Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、ブラウザバック時には復元されません。そのため、アコーディオンやform要素の状態はブラウザバック時にはリセットされてしまいます。これはNext.jsに限らず、ReactやVueなどをベースにしたモダンなフロントエンドフレームワークを採用して、クライアントサイドルーティングが発生する場合に起きがちな挙動です。クライアントサイドルーティングが不在なMPAでは、bfcacheやブラウザ側の復元処理によっ
はじめに こんにちは、minne事業部Webエンジニアの@inowayです。7/6に公開したtwadaさんによる2023年度版TDDワークショップを開催しましたの記事に執筆者の一人として参加していました。単独での記事公開は今回が初めてです。 @t_wada さんのワークショップを通して、自動テストの重要性を改めて実感しました。参加後に、おすすめされていた『テスト駆動開発』や『単体テストの考え方/使い方』を読み、今では完全に自動テストの魅力にはまっています。 参加直後は「実務でTDDを実践するぞ！」と息巻いていましたが、タイムリミットのある状況下で慣れない開発手法を実践するのは心理的ハードルが高く、Red->Green->Refactoringのステップを踏みながら開発することができていませんでした。そこで、本記事では「TDDに慣れる」をテーマに、TDDで機能追加することに挑戦します。アジャ
NLUX with ReactGenerative UI With Next.jsChatGPT-Inspired UI import { AiChat, useAsStreamAdapter } from '@nlux/react'; import '@nlux/themes/nova.css'; import { send } from './send'; import { user, assistantAvatar } from './personas'; export default () => { const adapter = useAsStreamAdapter(send, []); return ( <AiChat adapter={ adapter } personaOptions={{ assistant: { name: "EinAssistant", tagline
ちょっとした React Server Component 小ネタ。 Next.js (webpack, Turbopack) で確認しているが、おそらく RSC に対応しているツールであったらどれも変わらないはず。 アプリケーションの package.json の imports セクションに以下のように記載しておく。util の部分は好きな文字列で構わないが # から始めておくこと。 { "imports": { "#util": { "react-server": "./src/util.react-server.ts", "default": "./src/util.default.ts" } } }React Server 環境とそれ以外の環境用、それぞれの実装を用意する。 とりあえず結果が異なることを確認したければ以下のような感じ。 /* ./src/util.default.
GitHub - kristiandupont/react-geiger: Audiolize React performance
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React 18の非同期機能とパフォーマンス改善について 7月19日、React 18はパフォーマンス改善機能を発表しました。 この記事では、React 18の非同期機能がアプリケーションのパフォーマンスに与える影響と改善点 React 18の非同期機能とパフォーマンス改善について この記事では、React 18の非同期機能がアプリケーションのパフォーマンスに与える影響と改善点について説明します。 メインスレッドと長時間タスク メインスレッドは、さまざまなタスクを処理する責任があります。 しかし、長時間タスクは他の処理をブロックすることがあり、パフォーマンスに悪影響を与えることがあります。 従来のReactのレンダリング 従来の同期レンダリングでは、すべての要素に同じ優先度が与えられます。 しかし、React 18では非同期レンダリングが導入され、優先度の低いコンポーネントのレンダリングを
Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する - SWR・TanStack Query編
「Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する」シリーズの2記事目です。今回は「SWR・TanStack Queryを用いたデータフェッチ」について理解していきます。 イントロ+useEffectを用いたデータフェッチ SWR・TanStack Queryを用いたデータフェッチ ← 👀この記事 Pages Routerでのデータフェッチ+App Routerでのデータフェッチ+まとめ Repository 以下は今シリーズで用いたリポジトリです。 🔽クライアントサイドフェッチの調査に用いたリポジトリ：React+Vite（useEffect, SWR・TanStack Query） 🔽サーバーサイドフェッチの調査に用いたリポジトリ：Next.js Pages Router, App Router SWRを用いたクライアントサイドフェッチ SWRを用いてデー
React 18では、アプリケーションのレンダリング方法が根本的に変わる「concurrent（同時）」な機能が導入されました。これらの最新機能がアプリケーションのパフォーマンスにどのような影響を与えるかを探ってみましょう。 まずは、長いタスクと対応するパフォーマンスの測定について基本を理解しましょう。 メインスレッドと長いタスク ブラウザでJavaScriptを実行する際に、JavaScriptエンジンは「メインスレッド」と呼ばれるシングルスレッドの環境でコードを実行します。JavaScriptコードの実行だけでなく、メインスレッドはクリックやキーストロークなどのユーザーの操作、ネットワークイベントの処理、タイマーの実行、アニメーションの更新、ブラウザの再レイアウトや再描画の管理など、他のタスクも処理します。 メインスレッドはタスクを一つずつ処理します メインスレッドはタスクを一つずつ処
Storybook v8 の React Server Components サポート 2023.12.09 Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してるわけではなく、非同期コンポーネントをクライアントでレンダリングしているに過ぎないことに留意すべきです。 Storybook v8 より、experimentalNextRSC というオプションが追加されました。このオプションは true に設定することで、実験的に React Server Components をサポートします。 Storybook v
IntroductionSo, here's something that makes me feel old: React celebrated its 10th birthday this year! In the decade since React was first introduced to a bewildered dev community, it’s gone through several evolutions. The React team has not been shy when it comes to radical changes: if they discover a better solution to a problem, they'll run with it. A couple of months ago, the React team unveil
Next.js13で追加されたApp RouterとReact Server Components──UI通信の関係を再定義する
App RouterはReact Server Componentsを最大限活用する形で実装されているため、外部のデータソースに対する送受信の大半をサーバー側で行います。少し独特ながら、Web標準に寄り添った形で実現された通信周りのフレームワークについて、本記事では学んでいきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Sonoma 14.2.1 Node.js 21.4.0／npm 10.2.4 React 18.2.0 Next.js 14.0.4 UIと非同期通信の状態管理を擦り合わせるのは疲れる ブラウザ上でもサーバー上でも、JavaScriptのランタイムが提供する通信処理のAPIは、基本的に非同期で扱うことが推奨されています。現代
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号)
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号) こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの @nus3_ です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/01 の Frontend Weekly で取り上げた記事や話題を紹介します。 How React 18 Improves Application Performance – Vercel React18で新しく導入されたTransitions、Suspense、React Server Componentsなどをパフォーマンスの観点から解説しています。React17以前とReact18
この記事は、React 19 RCにおけるSuspenseの問題について、なるべくフラットな立場から現状を解説することを目的としたものです。 この問題の経緯については既に先行の記事が存在します。本記事は、この記事とは別の切り口でまとめ、現在の動向を追加したものとなるよう構成しました。 要約 React公式が正式リリースまでに対応してくれるようなので、大人しく待ちましょう。 概要 以下のように<Suspense>で包まれた、2つの兄弟コンポーネント<Foo>と<Bar>があるとします。 プリレンダリングを走らせる際、React 18では<Foo>と<Bar>は並列にレンダリングされましたが、React 19 RCでは直列にレンダリングされるという変更が適用されました。 なぜ変更を適用したか 直列にレンダリングすることで得られるメリットがあります。それは、レンダリングの途中経過をスタックに保存
【Next.js × @vercel/og】セミナー登壇者風に誰でも予定を告知できるアプリを作りました - Qiita
はじめに 突然ですがみなさん、 X（旧Twitter）でこんな感じのイベント告知画像を見たことはありますか？ 最近はセミナーや講演会に登壇する人たちが、イベント告知のためにこのような投稿をすることが増えているように感じます。 そして、こうした投稿を目にするたびに、自分は次のようなことを思います。 人生で １ 回でいいから！！こんな感じで予定を告知してみたい！！なんかすごそう！！ そんな（超どうでも良い個人的な）欲求を叶えるため、「誰でもセミナー登壇者風に予定を告知できるアプリ」 を作りましたので、簡単に紹介したいと思います。 （本当はクソアプリ Advent Calendarに投稿したかったけど、諸々の事情により断念） 作ったもの Seminar Post Generatorという 「セミナー登壇者風に個人的な予定を告知できるWebアプリ」 を作りました。 ▼サービスURL ▼リポジトリ
本文書では初めて shadcn/ui を利用したい人向けの入門的な内容になっています。shadcn/uiは再利用可能なコンポーネントを一括ですべてインストールして利用していくのではなく利用したいコンポーネントを選択して個別にインストールを行い利用することができます。さらにインストールしたコンポーネントは各自の環境に合わせてカスタマイズすることを前提にしているためコピー&ペーストでも利用することができます。 インストールして利用できるコンポーネントの中から Button, DropDownMenu, Form, Table の 4 つのコンポーネントに注目して shadcn/ui の使い方を確認しています。Next.jsの環境で動作確認を行っていますがReact用のコンポーネントライブラリなのでNext.jsに関する知識がなくても利用できます。 shadcn/ui とは shadcn/uiは
GitHub - alvarlagerlof/rsc-parser: A parser for the React Server components when sent over the network
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Next.js Weekly #29: Next.js 14, Geist, Why I’m (not) using Next.js, Oslo, Security in Next.js, React Forget
#29: Next.js 14, Geist, Why I’m (not) using Next.js, Oslo, Security in Next.js, React Forget Next.js Conf 2023 – This year’s Next.js Conf primarily focused on stabilizing existing features rather than introducing new ones. I recommend checking out the VoD. Here’s a quick summary of all the announcements: Next.js 14: No new APIs – As mentioned, it’s all about stability. So Next.js 14 comes with no
Caching in Next.jsNext.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. Good to know: This page helps you understand how Next.js works under the hood but is not essential knowledge to be productive
Vocs is a minimal static documentation generator designed to supercharge your documentation workflow, built with modern web technologies.
Reactでのデバッグ方法
はじめに React でフロントエンド開発を行う時のデバッグ方法についてまとめました。 以下について書きます。 React Developer Tools VSCode でのデバッグ Chrome 上でのデバッグ React Developer Tools React Developer Tools とは React Developer Tools は React 用のデバッグツールとして使用することができます。Google Chrome の拡張機能が提供されています。他のブラウザでの使用方法はReact Developer Toolsをご覧ください。今回は Google Chrome を用いて説明します。 インストールし、デベロッパーツールを起動 (mac ユーザの場合command + option + i、Windows ユーザの場合Ctrl + Shift + iを押すと開けます)
React Server Components bring server-exclusive capabilities to React. I've been using this new paradigm within Next.js 13 and 14, and what follows is my honest assessment of it[1]. I debated not publishing this post because of the way the React community has historically handled criticism. It is only recently that I decided it is important to share my thoughts, especially after seeing that much of
JSer.info #656 - Next.js v13.4.16がリリースされています。 Release v13.4.16 · vercel/next.js v13.4.16には、実験的な機能としてtest modeというPlaywrightとMSWを使ったテストする仕組みが追加されています。 Next.jsのApp Directoryでは、MSWがNext.jsの処理に差し込めるポイントがなかったため、MSWが動かないなどの問題がありました。このtest modeではそれらが一部解決されてきています。 Support Next.js 13 (App directory) · Issue #1644 · mswjs/msw まだ検証目的の実験的な機能であるため今後はわかりませんが、次のDiscussionでNext.jsを使ったアプリケーションのテストについて議論されています。 RFC:
はじめに 今フロントエンド/バックエンドの垣根を超えて巷を賑わせている T3 Stack について調べてみました。要素技術一つ一つが濃密なので、本記事ではあまり深入りはしませんが、「それらがどういう旨みを持ってT3 Stackを成しているのか」、「少し動かしたことがあるよ」と読み終わる頃には人に説明できるようまとめてみました。 キーワードは full-stack typesafety(フルスタックな型安全) です。📝 T3 Stack T3 Stack とは、Theo 氏によって提唱された Web 開発技術スタックで、以下の思想に焦点を当てています。 simplicity(シンプルさ) modularity(モジュール性) full-stack typesafety(フルスタックな型安全) The “T3 Stack” is a web development stack made by
TOP イベント 【見逃し配信中!!】LT&ディスカッション5ラウンド！うひょさん・よしこさんと改めて考えるReactコンポーネント設計 本セミナーはこんな方におすすめ ・Reactコンポーネント設計が他社と比べてどうかという基準を知りたいと感じている方 ・フロントエンドの最新トレンドをキャッチアップしたい方 ・コンポーネント設計の最適解を知りたいと感じている方、設計に不安がある方 セミナー詳細内容 イベント概要フロントエンド開発において、コンポーネント設計における考え方は日々進化し続けています。ライブラリのバージョンアップや新しい方法論が登場し、最適な設計手法もそれに応じて目まぐるしく変わっています。しかし、常に最新のコンポーネント設計手法をキャッチアップし取り入れていくことは難しくどこまで追いつけば良いのか、と感じたり、現在の設計方法が最適なのか不安に感じている方も多いのではないでしょ
プロローグ 私は新規のプロジェクトを立ち上げるときにVanilla-Extractを採用しました。 型安全なCSSがかけることやスコープをもたせることができ、管理画面のような肥大化しやすいプロジェクトでの導入が望ましいと考えたためです。 しかし、この考えは現在打ち砕かれてしまいました。 泣く泣くVanilla-Extractの導入を諦めSASSでの開発をしていたときStyleXのリリースのニュースが飛び込んで来たのです。 Type-Safeで再利用可能であり、静的なCSSのパフォーマンスとスケーラビリティを手に入れられるとのこと。 これを逃すわけにはいきません。早速詳細を確かめ、次回新規プロジェクトが立ち上げるときに候補にできるのかを確かめましょう。 概要 この記事ではVanilla-Extractで問題だったことを振り返りつつ、StyleXではどのような構文が採用されVanilla-Ex
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
THE WORDPRESS for reactthe wordpress for reactBuild React websites, hassle-free.WebCrumbs provides plug-and-play functionalities and an intuitive admin panel, letting you launch and manage modern websites faster than ever.
こんにちは。ひらやまです。 今回は、これまでフロントエンド環境を作ったり、運用したり、設計のアドバイスをしたりしてきた私がひとまずたどり着いた、このくらいの塩梅の設計が良いのではないかと考えている一つの案をみなさんに共有しようと思います。 フロントエンド設計の必要性 フロントエンドは JSON 色づけ係と言われることもありますが、ただ JSON をきれいにしてユーザに見せる以上の難しさを感じることもあるのではないでしょうか。 実装を完遂するために必要となるスキルが広いため、様々なバックグラウンドを持つ人がコードを書くことになりやすいです。フロントエンドエンジニアと呼ばれる人も、私みたいにマークアップエンジニアからフロントエンド領域に手を伸ばした人もいれば、デザイナーやバックエンドエンジニアなどの領域からこの環境に挑戦される方もいらっしゃいます。 このような様々な背景を持つ人たちが一つのコー
React to Nuxt
Nuxt for React devs in development everything you need to get started with Nuxt, from a React perspective. join waitlist with GitHub by registering you are signing up for email updates what will it cost? I'm still working out the details. I am aiming to be accessible to most developers. There will be purchasing power parity discounts. I'll also offer an early adopter discount for users who purchas
実務ではEmotionを、個人開発はTailwind CSSを使ってスタイルを書いています。両者のメリット・デメリットを比較整理してみました。広く認知されている技術ではありますが、まだ扱ったことのない方向けにそれぞれの魅力が伝わったらなと思います。
Next.jsやServer Actionsに限らずWebアプリケーション一般的な話になりますが、機能開発する際に、ユーザに勝手に操作されたくないデータを <input> タグを通じて受け取ることは避けなければなりません。 例えば、極端な例ですがECサイトで商品の価格を <input type="hidden" name="price" value="500" /> と書いてあった場合、ユーザが勝手にHTMLの値を書き換えてしまうと意図せず安い価格で購入できてしまいます。このように信頼できないデータを使って処理をしてしまうと困ります。この例の場合、渡すのは商品IDであり、価格はサーバ側でDBから取得した信頼できる値を採用するべきです。 と、書くとそんなこと当然だと感じるのですがNext.js App Routerから導入されたServer Actionsを使っていると、サーバ側とブラウザ側
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「React Journey」から学ぶ React のレンダリングの仕組み
Pay IDアプリのWebViewにReact + Viteを導入した - BASEプロダクトチームブログ
Remix ❤️ Vite
TanStack Routerで型安全かつ効率的なルーティングを実現
Next.jsとFirestoreを用いたmicroCMS記事の「いいね」機能の設計と実装
App Router | Next.js 公式ドキュメント 日本語翻訳プロジェクト
@location-state/conformをリリースした
TDDでNext.jsアプリに機能追加してみた - Pepabo Tech Portal
The Powerful Conversational AI JavaScript Library | NLUX
Server Component と Client Component で依存モジュールを切り替える
React 18の非同期機能とパフォーマンス改善についてVercelが解説
React 18によるアプリケーションのパフォーマンス向上について - Vercel
Storybook v8 の React Server Components サポート
Making Sense of React Server Components
React 19 RCのSuspenseに関する問題と現状のまとめ
shadcn/uiライブラリを使いこなすための基礎 | アールエフェクト
Building Your Application: Caching | Next.js
Vocs – React Documentation Framework
React Server Components: the Good, the Bad, and the Ugly
2023-08-16のJS: Next.js v13.4.16(test mode)、SafariのStorage Policy、ESMへの移行(Redux)
【今さら聞けない?!】T3 Stack によるフルスタックWebアプリ開発 - Qiita
【見逃し配信中!!】LT&ディスカッション5ラウンド！うひょさん・よしこさんと改めて考えるReactコンポーネント設計 | イベント・セミナー | ＜企業様向け＞Offers「オファーズ」 - ハイクラスITエンジニア／デザイナーの副業・転職サービス
StyleXはvanilla-extractを諦めた我々の光になるか?
WebCrumbs - We're building the modern web
いい塩梅を目指したデザインエンジニアによるフロントエンド設計 - estie inside blog
今さら聞けないEmotionとTailwind CSSの比較→利点まとめ
Server Actionsにユーザ操作されたくないデータは渡さない