理系公務員のプログラミング日記

Next.jsを使ってみたいというだけで作ったこのブログがなんとか形になってきました。 Next.jsの理解を深めるための単なるメモです。

（参考）

公式

Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな

Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する

CSRとSSRとSSG

• CSR(Client Side Rendering)
  Vue.jsやReactなどJavaScriptのライブラリやフレームワークで使われる方式。
  最初に必要な材料をクライアントに送信した後に、クライアント側でJavaScriptを動作させてレンダリングする（ページを生成する）。
  クライアント側で処理するJavaScriptの量が膨大になった場合、ユーザーのCPUの性能によってはレンダリングに時間がかかる場合がある。
  また、SEOに対しても難がある（らしい）
  

• SSR(Server Side Rendering)
  リクエストを受ける毎にサーバー側でページをレンダリングする方法。
  リクエスト毎に異なるページを送信できる。
  ユーザーのCPUの性能に影響を受けないが、リクエスト毎にレンダリングを行う必要があるので、オーバーヘッドが発生する。 SEOについては問題がない。
  

• SSG(Static Site Generator)
  ビルド時にページをあらかじめレンダリングし、各リクエストに対しては同じページを送信する。
  HTMLとCSSとJavaScriptのみのシンプルなWebサイトに近い状態。
  SEOにも速度にも問題がないが、ユーザーごとに内容が異なるページを作るには適さない。

SSRとSSGのような、あらかじめレンダリングしておく方法をプレレンダリング（pre-rendering）という。
Next.jsではこの両方をサポートしており、ページごとに使い分けることができる。
リクエストごとに表示内容が異なるならSSR、ブログなどのように毎リクエストで同じ内容を表示するならSSGを使う。

ただし、開発環境では常にSSRでレンダリングされていることには注意。（理屈的にSSGすることができない） 使っていると開発環境では表示が遅いがvercelのサーバ上では高速に表示されることが体感できた。