diff --git a/raw-data/NEXT.JS.md b/raw-data/NEXT.JS.md index de750dd..dee6cf2 100644 --- a/raw-data/NEXT.JS.md +++ b/raw-data/NEXT.JS.md @@ -12,6 +12,12 @@ Next.js 静的サイトの Next.js を SPA でルーティングさせる +### App Router + +- fetch + - 標準の fetch にパッチを当てて拡張している + - 取得したデータを自動でキャッシュし、任意のタイミングで Revalidate(データ再取得・キャッシュ更新)が可能 + ### Server Actions Server Actions はサーバーコンポーネントとクライアントコンポーネントのどちらでも機能する diff --git a/raw-data/PANDA.md b/raw-data/PANDA.md index 98774fa..f43cf04 100644 --- a/raw-data/PANDA.md +++ b/raw-data/PANDA.md @@ -27,4 +27,4 @@ Chakra UI と開発元が同じ - Emotion や styled-components など - ゼロランタイム CSS in JS - ランタイム時のパフォーマンスが良い - - Panda や Stitches など + - Panda や Stitches や Kuma UI など diff --git a/raw-data/REACT SERVER COMPONENTS.md b/raw-data/REACT SERVER COMPONENTS.md index 6631d86..da1cf25 100644 --- a/raw-data/REACT SERVER COMPONENTS.md +++ b/raw-data/REACT SERVER COMPONENTS.md @@ -13,6 +13,9 @@ React Server Components はサーバーサイドのみで実行される 一部のコンポーネントはサーバ側でレンダリングし、それ以外はクライアント側でレンダリングするみたいな世界観 ただし、クライアントコンポーネントはサーバサイドコンポーネントを import できない +クライアントコンポーネントの children や他のクライアントコンポーネントへの props にサーバサイドコンポーネントを渡すことは可能 +この場合、渡されるサーバサイドコンポーネントは事前にサーバーサイドでレンダリングされた HTML を渡すイメージ + たとえば、以下の例だと、CounterServer はサーバーでレンダリングされ、HTML を返すだけの関数となる (HTML 化により、クライアントでは不要なコンポーネント(以下の例だと`Btn`)も削除されるため、バンドルサイズが減る) (また、Btn コンポーネントの処理も無くなるのでパフォーマンスも良い) @@ -44,6 +47,10 @@ export default function CounterClient() { } ``` +RSC は 2023/07 時点でまだ安定版ではなく、React Canary として機能提供されている +破壊的変更も多いため、React 単体で RSC を使うことは想定されず、基本的には Next.js などのフレームワークを経由して使うことになる +ただ、将来的に安定版になっても自前でサーバー処理を実装する必要があるため、Next.js などを使ったほうが楽だろう + ### RSC のメリット - サーバーサイドでレンダリングするので、クライアントのバンドルサイズは軽くなる @@ -51,6 +58,11 @@ export default function CounterClient() { - DB、GraphQL エンドポイント、ファイルシステムなどのサーバーサイドのリソースに直接アクセスできる - サーバー側で API の実装が不要になるケースもある - コンポーネントのレンダリングも速くなる +- コンポーネントで async/await が利用可能 + +### RSC でできないこと + +- useState や useEffect などのフックは使えない ### SSR との違い diff --git a/raw-data/REACT.md b/raw-data/REACT.md index 814d764..3de7fbf 100644 --- a/raw-data/REACT.md +++ b/raw-data/REACT.md @@ -19,7 +19,7 @@ React React のチャートライブラリ選定 -Atomic Design と Bulletproof React を考察 +フロントエンドのディレクトリ構成を考察 ### Component と Element diff --git a/raw-data/SERVER SIDE RENDERING.md b/raw-data/SERVER SIDE RENDERING.md index 2104f1d..8791301 100644 --- a/raw-data/SERVER SIDE RENDERING.md +++ b/raw-data/SERVER SIDE RENDERING.md @@ -25,9 +25,19 @@ Nuxt.js 自体も内部的には、vue-server-renderer を使っているらし ### SSR する理由 - OGP(Open Graph Protocol)の考慮 - SNS 上で OGP を設定しておくと、予め設定された画像・タイトル・説明文が表示され、ユーザへの訴求力アップに繋がる + SNS 上で OGP を設定しておくと、事前に設定された画像・タイトル・説明文が表示され、ユーザへの訴求力アップに繋がる meta タグに設定するため、最低限 meta タグのみを SSR するのもあり 将来的に SEO の検索順位の決定は、Googlebot が行うことになるだろう Google の Crawler は JavaScript も解釈すると言われている つまり SPA で空の Body となっていても問題ないということ + +### Streaming SSR + +SSR のレンダリング結果を Streaming にブラウザに返し、表示する +従来はすべてレンダリングされた後に結果を渡していた + +- React + - React 18 で追加された + - Suspense の機能が前提となる + - サスペンドされたら、そこまでのレンダリング結果を出力し、サスペンドが解除されたら Streaming SSR を再開する