• 静的ホスティング
• CSR
• SSG
• (SWR)
• 動的ホスティング
• SSR
• ISR

Next.jsにおいてCSR/SSG/SSR/ISRをまとめる。
これらはビルド設定が絡むレンダリング手法ではあるが、アプリ全体ではなく、ページごとに手法は選択できる。

静的ホスティング

ビルドされた静的ファイルを配置すれば動く。

CSR

• Client Side Rendering

クライアントでレンダリングする。
利点は、サーバ負荷軽減、UX向上。クライアントキャッシングの活用によるロード速度向上。

SSG

• Static Site Generation

ビルド時にAPIからデータ取得しhtmlを生成しておく(Pre-Rendering)。
固定表示を行うページに有効。SEOを行う場合も有効。
※nextでは開発サーバではリクエスト毎にビルドが行われる。

(SWR)

• Stale While Revalidate

CSRやSSGにおいて、クライアント側でデータをフェッチする時のライブラリ。
キャッシュを行い、データが古くなったりページに再度フォーカスしたりする際にデータを再度フェッチし、レンダリングできる。
そのため、WebSocketと似たような表示ができる。

動的ホスティング

• Deploying

SSR

• Server Side Rendering

サーバ側でリクエストごとにページを生成する。
使用するのは、動的にデータを生成したいがSEOを行いたい時。
クライアントにセキュアデータを見せたくない時。
サーバでレンダリングし高速表示したい時。

ISR

• Incremental Static Regeneration

静的ページの生成は行うが、定期的にサーバで新しいデータを取得し、ビルドを行う。
使用するのは、SSRから負荷を軽減したい時。