先週、ふんわり理解したNext.js12のReact18対応の続き
New Streaming SSRに関して、もう少し詳しいお話を聞く機会があったのでメモ
New Streaming SSR
React FizzともNew Suspense SSRとも呼ばれるみたい
React DOM Serverの新しいレンダリング方式で、レンダリングを分割してストリーミングする
パフォーマンスのうち、TTFB、FIDと体感的なところの改善が期待できる
従来のSSRはデータフェッチして全て揃ってからでないとレスポンスを返せない
これに対して、New Streaming SSRではまず先に必要最小限のHTMLの断片をレスポンスしてTTFBの時間を短くしようという考え
残りのHTMLの断片はサーバーサイドでデータフェッチを行っておくがレスポンス（ストリーミング）は中断しておく
その間、最初の必要最低限のHTMLの断片が必要なJSをダウンロードしてハイドレーションを行うことでFIDまでの時間を短くしている
そして、ブラウザがインタラクティブになったら残りのHTMLの断片をストリーミングする
サスペンスの機能を使い、ストリーミングの中断中はスピナーが表示されているイメージ
これが、New Streaming SSRのフロー
より詳しい説明
https://github.com/reactwg/react-18/discussions/37
この機能をNext.js12で使う場合は前回のブログにも書いたように、デフォルトでは無効なのでオプトインして使う
データフェッチメソッドと識別方法
従来のNext.jsでは以下のようにデータフェッチメソッドの有無によって識別される
- SSR: getInitialProps()/getServerSideProps()があるページ
- SSG/ISR: getStaticPaths()/getStaticProps()があるページ
- CSR/Static: その他のページ
しかし、New Streaming SSRでは先述したようにデータフェッチを事前にする必要がないため、これらのメソッドも必要がない
なので別の識別方法が必要となる
Next.js 12の現状
現在のNext.js 12でconcurrentFeatures有効にした場合、getInitialPropsがあるページは非ストリーミングに、それ以外のページはどんなデータフェッチメソッドでも、データフェッチメソッドがあろうとなかろうと（従来のCSRだったページも）Streaming SSR or RSCとして識別される
公式ドキュメントにあった有効にするとNext.jsがもっている機能（getStaticProps、getStaticPathsなど）は使えなくなるので注意とはこのことだった
もろもろまだ実験段階みたい
あとは、CSSや画像、Webフォントなどの最適化のストリーミング対応がどうなるかはこれから徐々に判明しそう
