Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sumiren
February 06, 2023

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

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


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

sumiren

February 06, 2023
Tweet

More Decks by sumiren

Other Decks in Programming

Transcript

  1. 目次 • Next.js 13 Layout / Streaming SSR 概要 •

    Next.js 13 Layout / Streaming SSR 仕組み • まとめ
  2. Next.js 13 App Directory 主要機能 • Layout • Streaming SSR

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

    • Server Components • Routing / Data Fetching / Rendering の 刷新 • Suspense サポート • etc… 今回紹介するのは、以下の 2つです。
  4. 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が終わったらその部分だけ遅れてレスポンス ※数値は例となります。
  5. 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が実行される
  6. 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タグが継ぎ足しで返ってき ても対応でき、できるところからハイドレーションする仕組みになってい る。この仕組みで、後から画面の一部を差し替えている