UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Next.js】Next 12のReact18対応のふんわり理解

Next.js React

前回Next12のブログを簡単にみたが、React 18のサポートまわりがまとめられなかった

uga-box.hatenablog.com

そんな中最近、共有会でNext.jsのReact18対応についてお話しを聞いたのと、以下のポッドキャストを聞いたので、メモしておく

uit-inside.linecorp.com

React18対応

Server-Side Streaming

Suspenseを土台としてストリーミングにSSRするReact 18の新しい機能を使用してページをサーバーレンダリングできるようになる

従来のSSRの問題点からServer-Side Streamingが生まれた経緯は以下に書かれている

github.com

これはNext.js12の実験的な機能で、有効にするにはconcurrentFeatures: trueにする

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true
  }
}

React Server Components

React Server Componentsは、React ComponentをServer-Sideでレンダリングする技術

一部のコンポーネントだけServer-Sideでレンダリングすることでクライアント側のJavaScriptが不要になり、ページのレンダリングが高速になるのが特徴

さらにそれが、Next.jsとVercelでエッジで動かせるというのが目玉？

あとは、クライアント側のJavaScriptが不要というのは、server componentをエクスポートしたものだけがクライアントで不要になるだけ

以下で有効になるが、有効にするとNext.jsがもっている機能（getStaticProps、getStaticPathsなど）は使えなくなるので注意

また、従来のCSRだったページ (ビルドするとStaticとマークされるページ) もSSRになってしまうらしいのでまだまだ実験中だというのを意識した方がよさそう

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}

拡張子を.server.jsにすると、Server Componentsと認識される

Server Components を導入した Shu Ding 氏のツイートが参考になるとのこと

Edge Functions でComponentをストリーミングするデモの紹介と'RSC'.reverse() == 'CSR'という比喩の説明がされている

クライアント上ですべてを実行するクライアント側レンダリングとは異なり、サーバー側でのみ実行される

不要なJavaScriptをブラウザーに出荷させる必要がないからハイパフォーマンスだよねってのがわかりやすかった

まだ、Server-Side StreamingとReact Server Componentsに関してわからないことがたくさんあるので、次回またまとめる