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

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

View Slide

目次
● Next.js 13 Layout / Streaming SSR 概要
● Next.js 13 Layout / Streaming SSR 仕組み
● まとめ

View Slide

Next.js 13 App Directory 主要機能
● Layout
● Streaming SSR
● Server Components
● Routing / Data Fetching / Rendering の刷新
● Suspense サポート
● etc…
App Directoryが提供する機能は色々あります！

View Slide

Next.js 13 App Directory 主要機能
● Layout
● Streaming SSR
● Server Components
● Routing / Data Fetching / Rendering の刷新
● Suspense サポート
● etc…
今回紹介するのは、以下の 2つです。

View Slide

Next.js 13 Layout
Layoutは、今まで自前で実装していた
Layoutを、ファイルの配置方法だけで簡単に実現できます。
推しポイントは、next/link（preload含む）の通信量とハイドレーション処理量が最小限になることです。
決まったファイル名で配置するだけで
レイアウトが有効になる
フォルダ構成ベースでネストも可能
URL階層が同じなら、遷移してもヘッダは再レンダリ
ングされない
・通信に含まれておらず通信量が少ない
・ハイドレーションも走らない
→効率が良い

View Slide

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が終わったらその部分だけ遅れてレスポンス
※数値は例となります。

View Slide

Next.js 13 機能の仕組み
これらの機能は、魔法のように見える部分もあると思います。
どうやって実現されているのか、 Layout・Streaming SSRの順に簡単に解説します。
● 画面の一部だけをNext.js サーバーから取得して上書きなんてできるの？
● 画面の一部だけ遅れてレスポンスするなんて、HTTP(S)でできるの？
● etc…

View Slide

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が実行される

View Slide

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タグが継ぎ足しで返ってき
ても対応でき、できるところからハイドレーションする仕組みになってい
る。この仕組みで、後から画面の一部を差し替えている

View Slide

まとめ
参考：https://github.com/reactwg/react-18/discussions/37
● LayoutもStreaming SSRも、ページをより高速に表示できる素敵な機能
● 仕組みを見てみると、上手いこと設計されてて感心
（Next.jsというより、半分くらいは React18の世界かもしれないが）

View Slide

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

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

sumiren

More Decks by sumiren

Other Decks in Programming

Featured

Transcript