EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

Nuxt 3入門とSSRの概念

CharlieはECプラットフォーム「MegaShop」の技術スタックを選定しています。数百万の商品ページがあり, 最高レベルのSEOが必要で, 初回画面の読み込みも高速でなければなりません。従来のCSRでは検索エンジンが商品データをクロールできず, トラフィックが低迷していました。Nuxt 3のSSR機能こそが彼が必要としていたものです。

1. 学ぶ内容

2. アーキテクトの実話

(1) ペインポイント:CSRが数百万の商品ページを「見えなく」する

CharlieのMegaShopには100万以上の商品ページがありますが, 純粋なCSR (クライアントサイドレンダリング)に切り替えた後, Googleのクローラーは空の<div id="app"></div>しか取得できず, 商品名, 価格, 説明がすべて欠落していました。SEOランキングは5ページ目まで下落し, Alice (消費者)は商品を見つけられず, Bob (管理者)はオーガニックトラフィックがほぼゼロであることを心配していました。

(2) Nuxt 3 SSRによる解決策

Nuxt 3はサーバーサイドでHTMLをレンダリングするため, クローラーは商品名, 価格, 構造化データを含む完全な商品ページを受信できます。Charlieはプロジェクトを作成するだけで, SSRがすぐに利用可能です:

BASH 
# SSRがデフォルトで有効なNuxt 3プロジェクトを作成
npx nuxi@latest init megashop

(3) 効果:SEOトラフィックの急増

Nuxt 3 SSRに切り替えた後, MegaShopのGoogleインデックスページ数は2,000から800,000に急増し, オーガニックトラフィックは340%成長し, ファーストビューの読み込み時間は4.2秒から1.1秒に短縮されました。

3. Nuxt 3とVue 3の関係

Nuxt 3はVue 3をベースにしたフルスタックフレームワークで, VueコアチームのメンバーであるSébastien Chopinが主導しています。

(1) 位置づけの比較

項目 Vue 3 Nuxt 3
位置づけ プログレッシブUIフレームワーク Vue 3フルスタックメタフレームワーク
レンダリング CSRのみ SSR / CSR / SSG / ISR / ESR
ルーティング vue-routerを手動設定 ファイルルートを自動生成
データ取得 手動ラッパー useFetch / useAsyncData
ビルド Vite/Webpackが必要 Vite内蔵
サーバーサイド なし Nitroサーバーエンジン
自動インポート なし コンポーネント/コンポーザブル/ユーティリティ関数

(2) Nuxt 3のコアバリュー

💡 ヒント: Nuxt 3はVue 3の代替ではなく, Vue 3の上に構築されたエンタープライズグレードのフレームワークであり, フルスタックのエンジニアリング機能を提供します。

4. 5つのレンダリングモードの比較

(1) レンダリングモードのパノラマビュー

100% 
flowchart TB
    A[ユーザーリクエスト] --> B{レンダリングモード}
    B -->|SSR| C[サーバーがリクエストごとに<br/>HTMLをレンダリング]
    B -->|CSR| D[JSダウンロード後に<br/>ブラウザがHTMLをレンダリング]
    B -->|SSG| E[ビルド時に<br/>HTMLを事前生成]
    B -->|ISR| F[HTMLキャッシュ＋<br/>定期再検証]
    B -->|ESR| G[エッジCDNが<br/>ユーザーに最も近い場所でレンダリング]
    C --> H[完全なHTMLレスポンス]
    D --> I[空のシェル＋JSバンドル]
    E --> H
    F --> H
    G --> H

(2) 5つのモデルの主要比較

項目 SSR CSR SSG ISR ESR
レンダリングのタイミング リクエストごと ブラウザ側 ビルド時 キャッシュ＋定期検証 CDNエッジノード
SEO対応 ✅ 優秀 ❌ 不良 ✅ 優秀 ✅ 優秀 ✅ 優秀
初回画面の読み込み速度 ⚡ 高速 🐢 遅い ⚡⚡ 最速 ⚡⚡ 高速 ⚡⚡⚡ 最速
データのリアルタイム性 ✅ リアルタイム ✅ リアルタイム ❌ 静的 ⚠️ 定期更新 ⚠️ 定期更新
サーバー負荷 🔴 高 🟢 低 🟢 最低 🟡 中 🟡 中
ユースケース 動的詳細ページ 管理画面 ブログ/ドキュメント 商品一覧 国際化ページ

(3) SSRワークフローの詳解

SSR (サーバーサイドレンダリング)はNuxt 3のデフォルトのレンダリングモードです。コアプロセスは以下の通りです:

  1. ユーザーがURLをリクエスト
  2. Nuxtサーバー側でVueコンポーネントをレンダリング
  3. 完全なHTML文字列を生成
  4. HTMLをブラウザに送信
  5. ブラウザがページを表示 (ファーストビューが見える)
  6. JSファイルをダウンロードし, 「ハイドレート」してイベントをバインド

(1) ▶ サンプル:SSRとCSRのレスポンス比較

HTML 
<!-- SSRレスポンス:コンテンツを含む完全なHTML -->
<div id="app">
  <h1>MegaShop - プレミアムヘッドフォン</h1>
  <p>価格: $299.99 USD</p>
  <p>1.2千件のレビュー</p>
</div>

<!-- CSRレスポンス:空のシェル -->
<div id="app"></div>
<script src="/bundle.js"></script>

出力:

TEXT 
// 実行成功

(2) ▶ サンプル:Nuxt 3 SSRページ

VUE 
<!-- pages/index.vue -->
<template>
  <div>
    <h1>{{ product.name }}</h1>
    <p>価格: ${{ product.price }} USD</p>
  </div>
</template>

<script setup lang="ts">
// サーバーでデータを取得し, HTMLレスポンスに含める
const { data: product } = await useFetch('/api/products/featured')
</script>

出力:

TEXT 
// 実行成功

(3) ▶ サンプル:CSRモードのページ

VUE 
<!-- pages/dashboard.vue - クライアント専用ページ -->
<template>
  <div>
    <h1>管理ダッシュボード</h1>
    <p>ようこそ, Bobさん</p>
  </div>
</template>

<script setup lang="ts">
// クライアントサイドレンダリングを強制
definePageMeta({
  ssr: false
})

const { data: stats } = await useFetch('/api/admin/stats')
</script>

出力:

TEXT 
// 実行成功

5. Nuxt 3のコアアーキテクチャ

(1) アーキテクチャの構成要素

100% 
graph TB
    A[Nuxt 3] --> B[Vite - ビルドツール]
    A --> C[Vue 3 - UIフレームワーク]
    A --> D[Nitro - サーバーエンジン]
    A --> E[自動インポートシステム]
    D --> F[H3 - HTTPフレームワーク]
    D --> G[ストレージレイヤー]
    D --> H[キャッシュAPI]
    E --> I[コンポーネント]
    E --> J[コンポーザブル]
    E --> K[ユーティリティ]

(2) コアモジュールの役割

モジュール 役割 MegaShopでの活用
Vite ビルドツール, HMR (超高速ホットリロード) 開発時に数秒で商品ページを更新
Vue 3 Composition API + リアクティビティ コンポーネントベースの商品カード/カート
Nitro サーバーサイドエンジン, 複数プリセットデプロイ APIルーティング＋ISRキャッシュ
自動インポート コンポーネント/関数の自動登録 useFetchをimportなしで直接使用
H3 軽量HTTPフレームワーク APIリクエストとミドルウェアの処理

(1) ▶ サンプル:自動インポートの動作

VUE 
<!-- 手動インポート不要 -->
<template>
  <div>
    <ProductCard :product="item" />
    <!-- ProductCardはcomponents/から自動インポート -->
  </div>
</template>

<script setup lang="ts">
// useFetch, useState, useRouter - すべて自動インポート
const { data: item } = await useFetch('/api/products/1')
const router = useRouter()
const cart = useState('cart', () => [])
</script>

出力:

TEXT 
// 実行成功

(2) ▶ サンプル:Nitro APIルート

TYPESCRIPT 
// server/api/products/index.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const page = Number(query.page) || 1
  const limit = Number(query.limit) || 20

  // ページネーション付きで商品を取得
  const products = await fetchProducts(page, limit)

  return {
    items: products,
    total: 1000000, // 100万商品
    page,
    limit
  }
})

出力:

TEXT 
// 実行成功

6. MegaShopシナリオ分析

(1) なぜ百万商品ページにはSSRが必要なのか?

要件 CSRの性能 SSRの性能
Googleインデックス率 < 5% > 95%
ファーストビューLCP 3.5-5秒 0.8-1.5秒
商品名がHTMLに含まれる ❌ JSが必要 ✅ 直接含まれる
構造化データ対応 ❌ クローラーに見えない ✅ 完全に出力
ソーシャル共有プレビュー ❌ 空白 ✅ 正しく表示

(1) ▶ サンプル:MegaShop商品ページのSSR出力

HTML 
<!-- /products/headphones-123 のサーバーレンダリングHTML -->
<!DOCTYPE html>
<html>
<head>
  <title>プレミアムヘッドフォン - MegaShop</title>
  <meta name="description" content="プレミアムワイヤレスヘッドフォン, $299.99 USD">
  <script type="application/ld+json">
  {
    "@type": "Product",
    "name": "Premium Headphones",
    "price": "299.99",
    "priceCurrency": "USD",
    "aggregateRating": { "ratingValue": "4.8", "reviewCount": "1200" }
  }
  </script>
</head>
<body>
  <div id="app">
    <h1>Premium Headphones</h1>
    <p>$299.99 USD</p>
    <p>1.2千件のレビュー · 4.8スター</p>
  </div>
</body>
</html>

出力:

TEXT 
// 実行成功

7. Nuxt 3エコシステムの概要

(1) 公式モジュールエコシステム

モジュール 機能 MegaShopでの活用
@nuxtjs/tailwindcss CSSフレームワーク統合 レスポンシブレイアウト
@nuxt/image 画像最適化 WebP変換＋遅延読み込み
@nuxtjs/i18n 国際化 中国語/英語/日本語
@nuxtjs/sitemap サイトマップ生成 数百万ページのSEO
@pinia/nuxt 状態管理 ショッピングカート/ユーザー状態
@nuxt/devtools 開発者ツール デバッグとパフォーマンス分析

(2) コミュニティの規模

(1) ▶ サンプル:公式モジュールのインストール

BASH 
# Tailwind CSSモジュールをインストール
npm install @nuxtjs/tailwindcss

# Pinia状態管理をインストール
npm install @pinia/nuxt

# i18nモジュールをインストール
npm install @nuxtjs/i18n

出力:

TEXT 
# コマンド実行成功
TYPESCRIPT 
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@nuxtjs/i18n'
  ]
})

8. 総合例:MegaShop SSR商品ページ

VUE 
<!-- pages/products/[id].vue -->
<template>
  <div class="product-page">
    <h1>{{ product?.name }}</h1>
    <p class="price">${{ product?.price }} USD</p>
    <p>{{ product?.reviewCount }} レビュー</p>
    <button @click="addToCart(product)">
      カートに追加
    </button>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: number
  name: string
  price: number
  reviewCount: number
}

// SSR:サーバーでデータを取得し, 初期HTMLに含める
const route = useRoute()
const { data: product } = await useFetch<Product>(`/api/products/${route.params.id}`)

// SEOメタデータ
useHead({
  title: `${product.value?.name} - MegaShop`,
  meta: [
    { name: 'description', content: `${product.value?.name}を$${product.value?.price} USDで購入` }
  ]
})

const cart = useState<Product[]>('cart', () => [])
function addToCart(item: Product | null) {
  if (item) cart.value.push(item)
}
</script>

❓ よくある質問

Q Nuxt 3とNext.jsの違いは何ですか?
A Nuxt 3はVue 3 + Viteをベースにしていますが, Next.jsはReact + Webpack/Turbopackをベースにしています。Nuxt 3はより包括的な自動インポートとファイル規約を提供し, Nitroエンジンはより多くのデプロイプリセットをサポートしています。
Q SSRはサーバーに大きな負荷をかけますか?
A トラフィックの多いページでは, ISRキャッシュやESRエッジレンダリングを使用してサーバーの負荷を軽減できます。Nuxt 3のrouteRulesで各ルートのレンダリング戦略を個別に設定できます。
Q SSRなしでNuxt 3を使うことはできますか?
A はい。nuxt.config.tsでssr: falseを設定してグローバルにSSRを無効にするか, definePageMetaで個別のページで無効にできます。管理ページは通常CSRを使用します。
Q SSRページでブラウザAPIを使用できますか?
A SSRフェーズにはブラウザ環境がないため, windowやdocumentを直接使用するとエラーになります。コードをonMountedフック内に配置するか, import.meta.clientで環境をチェックする必要があります。
Q Nuxt 3はTypeScriptをサポートしていますか?
A ネイティブサポートがあります。Nuxt 3は.nuxt/tsconfig.jsonを自動生成し, コンポーネント, コンポーザブル, APIはすべて完全な型推論を持つため, 手動設定は不要です。
Q MegaShopは数百万の商品ページのビルド速度をどのように確保していますか?
A すべてのページを事前ビルドするわけではありません。リクエストごとにサーバーサイドレンダリング (SSR)を行い, 人気ページにはISRでキャッシュする方式を組み合わせています。ビルドプロセスでは主要ページ (ホーム/カテゴリページ)のみを事前レンダリングし, 商品詳細ページはSSR + ISRを使用します。

📖 まとめ

📝 練習問題

  1. 基本問題 (難易度:⭐):npx nuxi@latest initでNuxt 3プロジェクトを作成し, デフォルト設定でSSRが有効になっているか確認してください。
  2. 応用問題 (難易度:⭐⭐):プロジェクトのホームページでuseFetchを使って公開APIからデータを取得し, ブラウザの「ソースを表示」でデータが含まれているか確認してください (SSRの検証)。
  3. チャレンジ (難易度:⭐⭐⭐):CSRモード (definePageMeta({ ssr: false }))でページを作成し, ソースコードを表示した際のSSRページとの違いを比較してください。

---|

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%