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
    仕組み解説
    @sumiren_t

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide