Zenn
🫠

Next概要・SSR, CSR, SSG, ISRまとめ

2024/12/18に公開
Next.js
SSG
SSR
ISR
tech

ReactとNextの違い

React

SPA開発に向いていた。小規模のウェブサイト開発。
CSRを採用。ページの中身だけ変えて、ページは変えない手法。
CSRを採用しており、初回以降の読み込み速度が速いことがメリット。

ただ、デメリットとして初期読み込み速度が遅くなるデメリットがあった

そこで誕生したのがNext.js

Reactと違い、Nextは最初からHTMLが読み込まれていて、JSの動的な部分は後で読み込まれる。
HTMLはサーバーから最初に読み込まれる(プリレンダリング)

Nextのメリットとしては

  1. 最初からHTMLが表示されてるから離脱率が下がる
  2. ユーザビリティーが上がることでSEOも上がる
    などがあげられる。

Reactはクライアントレンダリング(CSR)、Nextはサーバーサイドレンダリング(SSG、SSR、ISR)を使った開発が行われる。

最近はNextの方が使われることが主流になっている。

それぞれの使いどころ、メリデメ

  1. React

ページ数の少ないWebサイト(データ可視化サービス、チケット座席指定など)に向いている

クライアント側でjsを読み込み、事足りる

  1. Next

大規模なWebサイト(ECサイト、ポートフォリオ、個人ブログなど)に向いている

クライアントのPCに依存せずにレンダリングでき、
直観的なルーティング設計ができる
初回の表示速度に優れる、SEOに優れる
APIエンドポイント設計も簡単にできる

SSGとSSR, ISR

  1. SSG
    静的生成。APIからデータを持ってくる場合、それを元にビルド時にHTMLをレンダリング

読み込み速度がめちゃはやい。一方ビルド時しかレンダリングできない。そのあとリクエストがあっても更新できない

使用例：あまり更新の要らないもの、ブログの詳細記事、ECの商品ページ、ドキュメント

  1. SSR
    ユーザがサーバーにリクエストする時にレンダリングする。そのデータをサーバーがプリレンダリングされる。リクエストごとにレンダリング。更新頻度が高いものにつかう。

ブログの全体記事、SNSのタイムライン、ユーザープロフィール

  1. ISR
    SSGとSSRの中間。

SSRではサーバーにリクエストし、レスポンスが返ってくる。
ISRでは、リクエスト時にキャッシュを生成する。CDNにキャッシュされる。

アクセスが多いものに関しては、キャッシュで残してくのが楽。
リバリデートによりキャッシュで残しておく時間を指定できるため、更新頻度はSSGとSSRの中間

使い所はまだ理解しきれていない！！

余談

  • 古いキャッシュを送りたくない場合はSWRを使う

  • ページやコンポーネント単位でSSG、SSRなどわけられる

Discussion