🚀
Nuxt3 レンダリングモードについて
1. レンダリングとは
- ざっくり、HTMLファイル(ページ)を作成することを指す。
2. レンダリングモードの種類
- 大きく3種類
- CSR(クライアントサイドレンダリング)
- SSR(サーバーサイドレンダリング)
- SSG(スタティックサイトジェネレーション)
3. CSR
-
イメージ
-
概要
- ページアクセス時に、サーバー最小限のHTMLを作成する。その後、ブラウザでHTMLを作成する。
- データ取得や描画がブラウザ上で実行される。
-
特徴
- サーバーで HTML を生成しないため、サーバー負荷が少ない 。
- 動的なページに向いている。
- 必要なデータを後から取得するため、初回表示が遅い 。
- 検索エンジンが HTML の中身を認識できないため、SEO に弱い 。
4. SSR
-
イメージ
-
概要
- サーバーで大体のHTMLを作成し、残りをブラウザで作成する。
- データ取得やページのレンダリングが サーバーで処理される。
-
特徴
- 検索エンジンが完全な HTML を取得できるため、SEO に強い。
- 最新のデータをすぐに表示可能。(リアルタイムデータに強い)
- リクエストごとに HTML を生成するため、サーバー負荷が大きい。
- サーバー処理が必要なため、表示速度は SSG より遅い。
5. SSG
-
イメージ
-
概要
- ビルド時に HTML ファイルを作成する。(Nuxtにビルドコマンドがあり、そこでビルドできる。)
- すでに HTML が用意されているため、読み込みや表示が高速。
-
特徴
- HTML を事前に作成しているので、サーバー負荷が少ない。
- 検索エンジンがデータ入りの HTML を取得可能なので、SEOに強い。
- Netlify や Vercel で簡単に配信できる。(サーバーレス)
- データを更新するたびに再ビルドが必要になる。
Discussion