Open2022/07/29にコメント追加37

Next.jsでReact18の機能を試してみる

Next.js

React

ピン留めされたアイテム

nus3

Streaming SSR
React Server Components
Switchable Runtime

を試してみる

nus3

memo

nus3

Next.jsでのReact Server Componentsの実装例

nus3

https://www.patterns.dev/posts/ssr/

nus3

Suspenseの挙動を観察しよう

nus3

Next.jsでReact Server Componentsを使う作業ログ

nus3

next@canary react@latest react-dom@latestを入れて、next.config.jsを指定すれば使える

module.exports = {
  experimental: {
    runtime: 'nodejs',
    serverComponents: true,
  },
}

nus3

サンプルリポジトリだとビルドを実行すると

Page                                       Size     First Load JS
┌ ○ /                                      1.05 kB        84.5 kB
├ ○ /404                                   194 B          79.5 kB
├ ○ /csr                                   632 B          90.3 kB
├ ℇ /item                                  2.24 kB         114 kB
├ ℇ /rsc                                   2.72 kB         111 kB
├ ℇ /slow                                  2.66 kB         111 kB
└ ℇ /ssr                                   2.87 kB          89 kB
+ First Load JS shared by all              79.4 kB
  ├ chunks/framework-a87821de553db91d.js   45 kB
  ├ chunks/main-6f7a5663a306f0a0.js        32.7 kB
  ├ chunks/pages/_app-9538641435026bd3.js  824 B
  └ chunks/webpack-9b312e20a4e32339.js     836 B

ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)
○  (Static)     automatically rendered as static HTML (uses no initial props)

ℇ (Streaming) server-side renders with streaming (uses React 18 SSR streaming or Server Components)になるけど、runtimeに 'nodejs'で試すと、この形式にはならない

nus3

nodejsだとReact Server Componetsを使った際に画面が描画されなくなるので
とりあえずサンプルリポジトリと一緒のruntime: 'edge',を指定する

nus3

ドキュメントに記載されている"next": "canary",を使う場合は
edgeの部分をexperimental-edgeに指定することでReact Server Componentを使用できる

module.exports = {
  experimental: {
    runtime: 'experimental-edge',
    serverComponents: true
  }
};

export const config = {
  runtime: 'experimental-edge'
};

nus3

yarn devは動かないけど、yarn buildしてからyarn startすると動く

nus3

server-side renders with streaming (uses React 18 SSR streaming or Server Components)
ってあるけどSSR streamingする場合とServer Componentsになる場合の違いはなんじゃろ

nus3

pageにgetServerSidePropsを定義してそこでSuspense読んでもStreamingにはならない

nus3

ssrのpageに

export const config = {
  runtime: 'experimental-edge'
};

するとstreamingになる

基本的にSSRでもCSRでもserverコンポーネント使ってるページでも上のconfigをexportすればstreamingとして扱われる

nus3

csrのページでconfigをexportするとyarn devでもSuspenseの挙動を確認できる
ssrはドキュメントに記載されてる通り、yarn devだとエラー
server componentsはそもそもyarn devでは動かない

nus3

SSR Streamingを有効にするにはWeb streamと互換性のあるランタイムを使う必要がある

HTTP Streamingの話

初回のリクエストをサーバー側が受け取ると、そこからはサーバー側からレスポンスがプッシュされる

nus3

Streaming SSRについて

ネットワークを介して複数のチャンクをロードする

nus3

React18で実装されたrenderToReadableStream
renderToReadableStream: Deno や Cloudflare Workers のようなモダンなエッジランタイム環境用
これはサーバー側でSuspenceをストリーミングする機能を持ってる

nus3

Streaming SSR

Suspenseで囲まれたコンポーネント以外は先にSSRしてHTMLを返す
Suspenseで囲まれたコンポーネントのレンダリングはSuspense内でthrowされたPromiseが解決されるとサーバー側からプッシュされて、再レンダリングされる
- Promiseが解決されるとHTMLが追加される
これにより初回のHTMLの描画は向上され、Suspense内のコンポーネントは後続のサーバー側からのプッシュで描画される