🚀

Nuxt3 レンダリングモードについて

2025/02/04に公開

1. レンダリングとは

  • ざっくり、HTMLファイル(ページ)を作成することを指す。

2. レンダリングモードの種類

  • 大きく3種類
    • CSR(クライアントサイドレンダリング)
    • SSR(サーバーサイドレンダリング)
    • SSG(スタティックサイトジェネレーション)

3. CSR

  • イメージ

    image.png

  • 概要

    • ページアクセス時に、サーバー最小限のHTMLを作成する。その後、ブラウザでHTMLを作成する。
    • データ取得や描画がブラウザ上で実行される。
  • 特徴

    • サーバーで HTML を生成しないため、サーバー負荷が少ない 。
    • 動的なページに向いている。
    • 必要なデータを後から取得するため、初回表示が遅い 。
    • 検索エンジンが HTML の中身を認識できないため、SEO に弱い 。

4. SSR

  • イメージ

    image.png

  • 概要

    • サーバーで大体のHTMLを作成し、残りをブラウザで作成する。
    • データ取得やページのレンダリングが サーバーで処理される。
  • 特徴

    • 検索エンジンが完全な HTML を取得できるため、SEO に強い。
    • 最新のデータをすぐに表示可能。(リアルタイムデータに強い)
    • リクエストごとに HTML を生成するため、サーバー負荷が大きい。
    • サーバー処理が必要なため、表示速度は SSG より遅い。

5. SSG

  • イメージ

    image.png

  • 概要

    • ビルド時に HTML ファイルを作成する。(Nuxtにビルドコマンドがあり、そこでビルドできる。)
    • すでに HTML が用意されているため、読み込みや表示が高速。
  • 特徴

    • HTML を事前に作成しているので、サーバー負荷が少ない。
    • 検索エンジンがデータ入りの HTML を取得可能なので、SEOに強い。
    • Netlify や Vercel で簡単に配信できる。(サーバーレス)
    • データを更新するたびに再ビルドが必要になる。

Discussion