Next.js 13 Layout / Streaming SSR 仕組み解説

Next.js 13〜のLayoutとStreaming SSRについて、機能の概要と、実現している仕組みを解説します。
App Directory前提となります。

※
こちらは、
「1/28(土)【LT&交流会 @渋谷】Developers Guild」
で発表させていただいた内容を、シェアするために微調整したものです。

Transcript

1. Next.js 13 Layout / Streaming SSR 仕組み解説 @sumiren_t
2. 目次 • Next.js 13 Layout / Streaming SSR 概要 • Next.js 13 Layout / Streaming SSR 仕組み • まとめ
3. Next.js 13 App Directory 主要機能 • Layout • Streaming SSR • Server Components • Routing / Data Fetching / Rendering の 刷新 • Suspense サポート • etc… App Directoryが提供する機能は色々あります！
4. Next.js 13 App Directory 主要機能 • Layout • Streaming SSR • Server Components • Routing / Data Fetching / Rendering の 刷新 • Suspense サポート • etc… 今回紹介するのは、以下の 2つです。
5. Next.js 13 Layout Layoutは、今まで自前で実装していた Layoutを、ファイルの配置方法だけで簡単に実現できます。 推しポイントは、next/link（preload含む）の通信量とハイドレーション処理量が最小限になることです。 決まったファイル名で配置するだけで レイアウトが有効になる フォルダ構成ベースでネストも可能 URL階層が同じなら、遷移してもヘッダは再レンダリ ングされない ・通信に含まれておらず通信量が少ない ・ハイドレーションも走らない →効率が良い
6. Next.js 13 Streaming SSR Streaming SSRは、SSRにおけるサーバーサイド fetchでもSuspenseが有効となります。「同期レン ダリングが遅い」という SSR最大の弱点（筆者の主観です） を解決する機能です。 Next.js Server Backend 30ms 150ms 初期描画開始まで 180 ms 従来のSSR Next.js Server Backend 30ms 150ms 初期描画開始まで 30 ms Streaming SSR サーバーサイド Fetchが終わってから SSRし、フロントに全部まとめてレスポンス サーバーサイド Fetch中はfallbackをレンダリングしてレスポンス Fetchが終わったらその部分だけ遅れてレスポンス ※数値は例となります。
7. Next.js 13 機能の仕組み これらの機能は、魔法のように見える部分もあると思います。 どうやって実現されているのか、 Layout・Streaming SSRの順に簡単に解説します。 • 画面の一部だけをNext.js サーバーから取得して上書きなんてできるの？ • 画面の一部だけ遅れてレスポンスするなんて、HTTP(S)でできるの？ • etc…
8. Next.js 13 Layoutの仕組み Next.jsでは、next/linkで遷移するとき、非同期通信によりページを取得しブラウザでレンダリングしています。 App Directoryでは、React Server Componentsが導入されたことで、通信形式が変わり、 Layoutの部分レンダリング機能が可 能になっています。 【next/linkで遷移時の通信内容】 1. next/linkによる非同期リクエストに対し、サー バーは画面のコンポーネントとcssやjsの名前の マッピングを返すようになった 参考：https://beta.nextjs.org/docs/routing/fundamentals#server-centric-routing-with-client-side-navigation 2. URL階層的にレイアウトは更新不要と分かるた め、Layoutに関するデータは fetchしない。1. で得られたマッピングから、 Pageに関する部 分だけをfetch 結果的に、Pageに関連するファイルだけ fetchされ、そのJSが実行される
9. Next.js 13 Streaming SSRの仕組み App Directoryでは、ページの同期的な取得は Transfer-Encoding: chunkedとなっており、またReact18のアーキテクチャであ るSelective Hydrationが機能しています。これらが Streaming SSRを可能にしています。 【Streaming SSRのページ リロード時の通信内容】 参考：https://github.com/reactwg/react-18/discussions/37 1. Transfer-Encoding: chunkedにより、レスポン スは何回かに分けて時間をかけて返ってくる 2. Selective Hydration(+ Streaming HTML)により、 Transfer-Encoding:chunkedで後からscriptタグが継ぎ足しで返ってき ても対応でき、できるところからハイドレーションする仕組みになってい る。この仕組みで、後から画面の一部を差し替えている
10. まとめ 参考：https://github.com/reactwg/react-18/discussions/37 • LayoutもStreaming SSRも、ページをより高速に表示できる素敵な機能 • 仕組みを見てみると、上手いこと設計されてて感心 （Next.jsというより、半分くらいは React18の世界かもしれないが）