👌
Next.jsでつまずいちゃう"レンダリング"のお話
web系のプログラムを勉強し始めて、Next.jsをやり始め、レンダリング（もとになる情報を整形して表示すること）というものに躓いてしまう人が結構いるのでは？と思い、初心者ながらまとめてみました。
Next.jsで、レンダリング手法については主に以下のようなものがあります。
- SSG(Static Site Generation)
- CSR(Client Side Rendering)
- SSR(Serever Side Rendering)
- ISR(Incremental Static Regeneration)
なにこれ？？です。ちょっとずつ、解説してみます。
※正確ではないかもしれないので、そこら辺はコメントいただけると幸いです！
レンダリングってなに？
レンダリングは英語で書いてみると、"rendering"と書きます。直訳をしてみると、
表現、演出、演奏、翻訳(ぶり)、訳文
らしいです。
IT用語で言えば、「あらかじめ決められたルールに沿ってブラウザ上に表現または演出として構成すること」という感じでしょうか。すなわち、どんなページを作るか？です。それが上にあったように４つ（SSG, CSR, SSR, ISR）とあるのです。それぞれについて、まとめてみます。
SSG(Static Site Generation)
typescriptではgetStaticPropsという関数がよばれる。
<主な流れ>
※ビルド＝静的サイトの作成 という認識でいいかと思います。
<メリット>
高速でSEOにも有効なもの
<デメリット>
デプロイした後はページの内容を動的に変更不可
CSR(Client Side Rendering)
ビルドの時にデータ取得は行わず、ページを描画して保存するだけで、ブラウザで初期描画した後に非同期でデータを取得して、追加のデータを描画する。
<主な流れ>
<メリット>
- 一度読み込んで仕舞えば、ページ遷移なしにページ全体を書き換えれるので高速
- サーバーへの負荷は少ない
<デメリット>
- 初回ロードが重くなりがち
- SEOでは不利
SSR(Serever Side Rendering)
サーバー側で処理（データフェッチ等を）し、HTMLを構築してクライアント側に返す。typescriptでは```getServerSideProps``という関数がよばれる。
<主な流れ>
<メリット>
- Next.jsでは同じロジックをクライアントサイド、サーバーサイドと容易に使い分けることができる
- ハイスペックなサーバーでHTMLを構築
<デメリット>
- フロントの実装と同じ感覚でAPI通信などを利用すると、レスポンスに時間がかかる
=> ユーザーを待たせる時間が長くなってしまう。
ISR(Incremental Static Regeneration)
HTMLの生成をバックグラウンドで実行するの同時に、すでに生成されている古いほうのHTMLを返却する。
<主な流れ>
<メリット>
- SSG並みに高速
- 新しい記事などを再配置することで更新できる
<デメリット>
- リクエスト時に最新の情報でなくても良い時に限る
実際にいろいろと試してみるといいですね！！！
参考文献
Discussion