ReactとNext.jsの関係

 ReactとNext.jsは良く比較されているが、よく分かっていなかった(そもそもNext.jsは使ったことがない)ので調査してみた。

Reactの特徴

• JavaScriptライブラリである。フレームワークではないらしい。個人的にはフレームワークだと思うけれども...。
• 仮想DOM。
• CSR。

Next.jsの特徴

• Reactフレームワークである。
• プレレンダリング
  • for SSR、SSG、ISR。
• ルーティングの標準サポート。
  • ReactだとReact Routerが必要。

疑問

• ライブラリのフレームワークとは？
  • Reactを基にしたフレームワークということ。
  • Next.jsのほうが高機能ではある。（そりゃフレームワークだし）
  • でもそもそもレンダリングでサーバーサイドを重視するか、クライアントサイドを重視するかで方向性が違う気がする。Next.jsのレンダリングはSSR等がメインで、ReactのレンダリングはSPA向けがメインだと思う。
• ReactにReact Server Componentsってものがあるけど、SSRとは違うの？
  • 違う。
  • React Server ComponentsはあくまでReact Componentをレンダリングするもの。SSRはサーバーでHTMLを予め生成するもの。
  • React Server ComponetnsではクライアントサイドのJavaScriptは不要。
  • ReactでSSRするならReactDOMServer。

References

• Vercel：What is Next.js?、Next.js Organization (オンライン)、入手先<https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs> (参照2022-08-31)．
• Vercel：React Server Components (RFC)、Next.js Organization (オンライン)、入手先<https://nextjs.org/docs/advanced-features/react-18/server-components> (参照2022-08-31)．