🪩 はじめに

Next.jsを一通り学習したので復習としてレンダリングの種類について書いていきます．自身の理解で書いているのでもし間違っている箇所があれば指摘してください🙇‍♂️

🪩 自己紹介

初めまして．趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．関西の大学生です．最近はフルスタック開発やツール制作を行なっています．まだまだ初心者です．

🪩 本題

CSR（Client Side Rendering）

CSRを設定すると，リクエストに対してサーバーからHTMLとJavaScriptが返され，ブラウザ上でJavaScriptが実行されて，実際に表示するHTMLをレンダリングします．ページ遷移が高速ですが，初回読み込み時に全部のデータを取得するので最初だけ表示が遅くなります．端末のスペックに依存します．Reactは標準でCSRです．ファイルの先頭にuse clientディレクティブを設定するだけでCSRになります．SPAとも言われます．使いどきは動的なやり取りや常に更新したりするサイトに使います．
※CSRの中にSSRやSSGなどを入れてもCSRとして扱われるので注意．SSRの中に入れるのがおすすめです．

SSR（Server Side Rendering）

SSRを設定すると，リクエストに対してサーバー側でJavaScriptを実行して表示するHTMLをレンダリングします．生成したHTMLをクライアントに返して表示します．CSRと比較し，クライアントはHTMLを表示するだけなので端末のスペックに依存しません．よってどのユーザも安定した速度で表示ができます．あらかじめHTMLが生成されているのでSEOにも強いのが特徴です．fetch関数の第二引数にcache: no-storeを記述することで使用できます．useEffectやuseStateなどは使用できません．onClickとかもブラウザ依存なのでダメだったはず．ブログやコーポレートサイトなどに向いている．ReactのフレームワークであるRemixはSSRを採用しています．

SSG（Static Site Generation）

SSGを設定すると，アプリのビルド時に静的ページを生成してサーバーに保管されます．リクエストがあった時にそれを返すだけなので，4つのレンダリングの中で最も高速で表示されます．データの更新が入った際は手動でビルドしなければならないので，静的サイト以外ではデメリットになる．fetch関数の第二引数にcache: force-cacheを記述することで使用できます．Next.jsはデフォルトでSSGが設定されてるので省略もできます．これもuseEffectなどは使えないです．

ISR（Incremental Statice Regeneration）

SSGの欠点(手動でビルドしないといけない)を解決したレンダリングの方法．SSR x SSGみたいな．ビルド時に静的ページを生成してサーバーに保管して，リクエストを返すのはSSGと同様．ISRでは指定した時間が経過したら自動で再ビルドを実行することができます．その関係で，常に最新の状態を保つことが難しく，データの更新が入るとビルドの後にページを手動でロードしないと最新の表示ができません．表示は最速です．fetch関数の第二引数にnext: { revalidate: 60 }(revalidateの値は秒数)を記述することで使用できます．vercelでしか使用できなかったはずです．

PPR (Partial Pre Rendering)

静的レンダリング，動的レンダリング，ストリーミングを同じルートで組み合わせる方法．ページを全体を静的レンダリングに設定し，一部を動的レンダリングにする．SSG・ISRのページの一部にSSRな部分を組み合わせられるようなイメージ．ページを読み込む際に，データを取得した後に表示するのではなく，予め静的なエリアを表示しておいて，ローディング画面(loading.tsx：のfallbackとほぼ同義)を表示することが可能．SSR+CSRとはまた違う．

🪩 参考文献

🪩 最後に

Next.jsのレンダリングについて振り返りができるようにまとめてみました．誰かの参考になれば幸いです！最後まで読んでいただきありがとうございました．それでは！