Vite で SSR（サーバーサイドレンダリング）を導入する手順

2025年7月2日

Vite

近年の Web 開発において、初期表示速度の向上とSEO 対応は避けて通れない重要な課題となっています。特に、EC サイトやメディアサイトなど、検索エンジンからの流入が重要な Web アプリケーションでは、サーバーサイドレンダリング（SSR）の導入が必須の要件となりつつあります。

従来、SSR の実装は複雑で時間のかかる作業でしたが、Vite の登場により状況は大きく変わりました。Vite は、開発時の高速な体験を維持しながら、プロダクション環境で最適化された SSR を実現する革新的なアプローチを提供しています。

本記事では、Vite で SSR を導入する具体的な手順を、基礎概念から実践的な実装まで詳しく解説いたします。実際のエラー対処法や最適化テクニックも含めて、すぐに現場で活用できる内容をお届けしますので、ぜひ最後までお読みください。

背景

モダン Web アプリケーションにおける SSR の重要性

現代の Web アプリケーション開発では、ユーザー体験の向上と検索エンジン最適化の両立が求められています。従来の SPA（Single Page Application）では、初期ロード時に JavaScript の実行を待つ必要があり、特にモバイル環境や低速回線でのユーザー体験に課題がありました。

SSR の効果を数値で見ると、その重要性が明確になります：

指標	SPA	SSR	改善効果
First Contentful Paint	2.3 秒	0.8 秒	65%向上
Largest Contentful Paint	4.1 秒	1.2 秒	71%向上
SEO クローラビリティ	制限あり	完全対応	-
初回 JS バンドルサイズ	500KB	150KB	70%削減

Core Web Vitals の改善も重要な要素です。Google の検索ランキング要因として、ページの読み込み速度がより重視されるようになり、SSR による初期表示速度の向上は、SEO の観点からも必須となっています。

Vite SSR のアーキテクチャ設計思想

Vite の SSR 実装は、開発時とプロダクション時の一貫性を重視した設計となっています。従来の SSR ツールが抱えていた「開発環境と本番環境の差異」という課題を、革新的なアプローチで解決しています。

typescript// Vite SSRのアーキテクチャ概念
interface ViteSSRArchitecture {
  development: {
    server: 'Vite Dev Server + SSR Middleware';
    bundling: 'No-bundle (Native ESM)';
    hmr: 'Server-side HMR 対応';
    performance: '高速な開発体験';
  };

  production: {
    server: 'Node.js + Express/Fastify';
    bundling: 'Rollup optimized bundles';
    rendering: 'Pre-rendered HTML + Hydration';
    performance: '最適化されたパフォーマンス';
  };

  universalConcepts: {
    routing: 'Universal Router (Client/Server)';
    stateManagement: 'SSR-aware State Hydration';
    codeSharing: 'Isomorphic Components';
  };
}

Vite の設計で特に優れているのは、開発時の即座のフィードバックを維持しながら SSR を実装できることです。従来のツールでは、SSR の開発時に数秒から数十秒の待機時間が発生していましたが、Vite では HMR が SSR にも対応しており、ファイル変更が即座に反映されます。

従来の SSR ソリューションとの比較

従来の SSR ソリューションと比較して、Vite の SSR には明確な優位性があります。

Next.js との比較：

javascript// Next.js のアプローチ
const nextjsSSR = {
  framework: 'React専用',
  routing: 'ファイルベースルーティング（固定）',
  bundler: 'Webpack',
  devServer: '起動時間：10-30秒',
  flexibility: '設定のカスタマイズに制限',
  deployment: 'Vercel最適化',
};

// Vite SSR のアプローチ
const viteSSR = {
  framework: 'フレームワーク非依存（React/Vue/Svelte対応）',
  routing: '柔軟なルーティング設定',
  bundler: 'Rollup + esbuild',
  devServer: '起動時間：1-3秒',
  flexibility: '高度なカスタマイズ可能',
  deployment: '任意のプラットフォーム対応',
};

Nuxt.js との比較：

Nuxt.js は Vue.js 専用のフレームワークとして優れていますが、Vite の柔軟性により、より幅広い用途での活用が可能です。特に、既存の Vite プロジェクトに SSR を後から追加する場合の容易さは、Vite の大きな利点です。

課題

従来の SSR 実装における技術的課題

従来の SSR 実装では、多くの技術的課題が開発者を悩ませていました。最も深刻な問題は開発環境と本番環境の差異です。

Webpack ベースの SSR 実装では、以下のようなエラーに頻繁に遭遇していました：

rubyError: Cannot resolve module 'fs' in client bundle
    at ModuleNotFoundError (/node_modules/webpack/lib/ModuleNotFoundError.js:17:5)
    at compilation.hooks.make.callAsync (/node_modules/webpack/lib/Compilation.js:1043:12)

ReferenceError: window is not defined
    at Object.<anonymous> (/dist/server/bundle.js:1:234)
    at Module._compile (internal/modules/cjs/loader.js:999:30)

これらのエラーは、クライアント専用の API やブラウザ固有のオブジェクトを、サーバー環境で実行しようとした際に発生します。解決には、複雑な条件分岐やpolyfillの実装が必要でした。

コード分割の問題も深刻でした：

javascript// 従来の課題：サーバーとクライアントでの異なるチャンク分割
// サーバー側では動的インポートが期待通りに動作しない
const LazyComponent = React.lazy(() => import('./HeavyComponent'));

// サーバー側でのエラー例
Error: Cannot read property 'default' of undefined
    at renderToString (react-dom/server)

開発効率を阻害する要因

SSR 開発における長いフィードバックループは、開発効率の大きな阻害要因でした。

bash# 従来のSSR開発サイクル
$ npm run build:server  # 30-60秒
$ npm run build:client  # 45-90秒
$ npm run start         # 10-20秒
# 合計：1分30秒〜3分の待機時間

# ファイル変更後も同様の時間が必要
# 1日の開発で数十回の変更 → 数時間の待機時間

デバッグの困難さも大きな課題でした：

javascript// SSRでのデバッグ時によくある問題
console.log('This runs on server:', typeof window === 'undefined');
console.log('This runs on client:', typeof window !== 'undefined');

// しかし、Hydration時にはサーバーとクライアントの出力が異なる場合がある
Warning: Text content did not match. Server: "undefined" Client: "object"
    at div
    at App

スケーラビリティと保守性の課題

大規模な SSR アプリケーションでは、メモリ使用量の増大が深刻な問題となっていました：

bash# 大規模SSRアプリケーションの例
$ node --inspect server.js

Debugger listening on ws://127.0.0.1:9229/
Warning: Reached heap limit Allocation failed - JavaScript heap out of memory
    at renderToString (/node_modules/react-dom/server.js:1234:56)
    at renderPage (/src/server/render.js:89:12)

状態管理の複雑化も避けられない課題でした：

javascript// サーバー側での状態の初期化
const initialState = await fetchDataForPage(url);

// クライアント側での状態の復元
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};

// しかし、状態の同期が取れない場合
Error: Hydration failed because the initial UI does not match what was rendered on the server.

解決策

Vite による SSR 構築の基本アプローチ

Vite の SSR は、Universal JavaScriptの概念に基づいて設計されており、サーバーとクライアントで同一のコードを実行できます。この統一されたアプローチにより、従来の課題の多くが解決されます。

基本的な SSR 設定の構造：

typescript// vite.config.ts - SSR対応設定
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],

  // SSRビルド設定
  build: {
    rollupOptions: {
      input: {
        // クライアント用エントリーポイント
        client: './src/client.tsx',
        // サーバー用エントリーポイント
        server: './src/server.tsx',
      },
    },

    // SSR用の出力設定
    ssr: true,
    outDir: 'dist/server',

    // サーバー用バンドルの最適化
    minify: false,
    sourcemap: true,
  },

  // SSR固有の設定
  ssr: {
    // サーバー環境で外部化するモジュール
    external: ['express', 'compression'],

    // Node.js環境での互換性設定
    target: 'node',

    // SSR時の条件付きコンパイル
    define: {
      __SSR__: true,
    },
  },
});

開発環境での SSR 統合

開発環境での SSR 体験を最適化するため、Vite の Middleware 機能を活用します：

typescript// server/dev-server.ts - 開発用SSRサーバー
import express from 'express';
import { createServer as createViteServer } from 'vite';

async function createDevServer() {
  const app = express();

  // Vite開発サーバーを作成
  const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: 'custom',
  });

  // ViteのMiddlewareを使用
  app.use(vite.ssrLoadModule);

  // SSRミドルウェア
  app.use('*', async (req, res, next) => {
    const url = req.originalUrl;

    try {
      // HTMLテンプレートを読み込み
      let template = await vite.transformIndexHtml(
        url,
        `
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>SSR App</title>
          </head>
          <body>
            <div id="root"><!--ssr-outlet--></div>
            <script type="module" src="/src/client.tsx"></script>
          </body>
        </html>
      `
      );

      // サーバーエントリーポイントを読み込み
      const { render } = await vite.ssrLoadModule(
        '/src/server.tsx'
      );

      // SSRレンダリング実行
      const appHtml = await render(url);

      // HTMLテンプレートにレンダリング結果を埋め込み
      const html = template.replace(
        '<!--ssr-outlet-->',
        appHtml
      );

      res
        .status(200)
        .set({ 'Content-Type': 'text/html' })
        .end(html);
    } catch (error) {
      // エラーハンドリング
      vite.ssrFixStacktrace(error);
      next(error);
    }
  });

  return { app, vite };
}

// 開発サーバー起動
createDevServer().then(({ app }) => {
  app.listen(3000, () => {
    console.log(
      'SSR Dev Server running on http://localhost:3000'
    );
  });
});

プロダクション環境での最適化

プロダクション環境では、事前ビルドされたアセットを使用して最高のパフォーマンスを実現します：

typescript// server/prod-server.ts - 本番用SSRサーバー
import express from 'express';
import compression from 'compression';
import { readFileSync } from 'fs';
import { resolve } from 'path';

const app = express();

// 圧縮ミドルウェア
app.use(compression());

// 静的ファイルの配信
app.use(
  '/assets',
  express.static(resolve(__dirname, '../client/assets'))
);

// HTMLテンプレートを事前読み込み
const template = readFileSync(
  resolve(__dirname, '../client/index.html'),
  'utf-8'
);

// サーバーサイドレンダリング関数を事前読み込み
const { render } = require('./server.js');

app.use('*', async (req, res) => {
  const url = req.originalUrl;

  try {
    // SSRレンダリング実行
    const appHtml = await render(url);

    // レスポンスの組み立て
    const html = template
      .replace('<!--ssr-outlet-->', appHtml)
      .replace(/<!--ssr-head-->/, generateMetaTags(url));

    // キャッシュヘッダーの設定
    res.set({
      'Content-Type': 'text/html',
      'Cache-Control': 'public, max-age=3600', // 1時間キャッシュ
    });

    res.status(200).end(html);
  } catch (error) {
    console.error('SSR Error:', error);
    res.status(500).end('Internal Server Error');
  }
});

function generateMetaTags(url: string): string {
  // URLに基づいたメタタグの生成
  const pageData = getPageDataFromUrl(url);

  return `
    <title>${pageData.title}</title>
    <meta name="description" content="${pageData.description}" />
    <meta property="og:title" content="${pageData.title}" />
    <meta property="og:description" content="${pageData.description}" />
    <meta property="og:url" content="${pageData.url}" />
  `;
}

app.listen(3000);

具体例

React + Vite SSR プロジェクトのセットアップ

実際のプロジェクトで Vite SSR を実装する完全な手順をご紹介します。

プロジェクトの初期化：

bash# プロジェクト作成
$ yarn create vite my-ssr-app --template react-ts
$ cd my-ssr-app

# SSR用の追加パッケージをインストール
$ yarn add express compression
$ yarn add -D @types/express @types/compression tsx

プロジェクト構造の設計：

csharpmy-ssr-app/
├── src/
│   ├── components/           # 共通コンポーネント
│   │   ├── App.tsx          # メインアプリケーション
│   │   ├── Header.tsx       # ヘッダーコンポーネント
│   │   └── Router.tsx       # ルーティング設定
│   ├── pages/               # ページコンポーネント
│   │   ├── Home.tsx         # ホームページ
│   │   ├── About.tsx        # 概要ページ
│   │   └── Contact.tsx      # お問い合わせページ
│   ├── utils/               # ユーティリティ
│   │   ├── api.ts           # API関連
│   │   └── ssr-utils.ts     # SSR用ユーティリティ
│   ├── client.tsx           # クライアントエントリーポイント
│   └── server.tsx           # サーバーエントリーポイント
├── server/                  # サーバーサイド
│   ├── dev-server.ts        # 開発サーバー
│   └── prod-server.ts       # 本番サーバー
├── public/                  # 静的ファイル
└── vite.config.ts          # Vite設定

メインアプリケーションの実装：

tsx// src/components/App.tsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Header from './Header';
import Home from '../pages/Home';
import About from '../pages/About';
import Contact from '../pages/Contact';

interface AppProps {
  url?: string;
}

function App({ url }: AppProps) {
  return (
    <div className='app'>
      <Header />
      <main>
        <Routes location={url}>
          <Route path='/' element={<Home />} />
          <Route path='/about' element={<About />} />
          <Route path='/contact' element={<Contact />} />
          <Route
            path='*'
            element={<div>404 - Page Not Found</div>}
          />
        </Routes>
      </main>
    </div>
  );
}

export default App;

クライアントエントリーポイント：

tsx// src/client.tsx
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App';

// サーバーから渡された初期状態を取得
const initialState = (window as any).__INITIAL_STATE__;

function ClientApp() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}

// Hydrationの実行
const container = document.getElementById('root')!;
hydrateRoot(container, <ClientApp />);

// HMR対応（開発環境のみ）
if (import.meta.hot) {
  import.meta.hot.accept();
}

サーバーエントリーポイント：

tsx// src/server.tsx
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './components/App';

export async function render(url: string): Promise<string> {
  try {
    // 初期データの取得（必要に応じて）
    const initialData = await fetchInitialData(url);

    // SSRレンダリングの実行
    const appHtml = renderToString(
      <StaticRouter location={url}>
        <App url={url} />
      </StaticRouter>
    );

    return appHtml;
  } catch (error) {
    console.error('SSR Render Error:', error);
    throw error;
  }
}

async function fetchInitialData(url: string): Promise<any> {
  // URLに基づいた初期データの取得
  switch (url) {
    case '/':
      return {
        pageType: 'home',
        data: await getHomePageData(),
      };
    case '/about':
      return {
        pageType: 'about',
        data: await getAboutPageData(),
      };
    default:
      return { pageType: 'default', data: null };
  }
}

async function getHomePageData() {
  // ホームページ用のデータ取得
  return {
    title: 'ホームページ',
    posts: [
      {
        id: 1,
        title: '最新記事1',
        excerpt: '記事の概要...',
      },
      {
        id: 2,
        title: '最新記事2',
        excerpt: '記事の概要...',
      },
    ],
  };
}

async function getAboutPageData() {
  // 会社概要ページ用のデータ取得
  return {
    title: '会社概要',
    description: '私たちについて...',
    members: [
      { name: '田中太郎', position: 'CEO' },
      { name: '佐藤花子', position: 'CTO' },
    ],
  };
}

状態管理の実装（Redux Toolkit 使用例）

SSR での状態管理は、サーバーとクライアント間での状態同期が重要です：

tsx// src/store/store.ts
import {
  configureStore,
  createSlice,
  PayloadAction,
} from '@reduxjs/toolkit';

interface AppState {
  user: {
    name: string;
    email: string;
  } | null;
  posts: Array<{
    id: number;
    title: string;
    content: string;
  }>;
  loading: boolean;
}

const initialState: AppState = {
  user: null,
  posts: [],
  loading: false,
};

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    setUser: (
      state,
      action: PayloadAction<AppState['user']>
    ) => {
      state.user = action.payload;
    },
    setPosts: (
      state,
      action: PayloadAction<AppState['posts']>
    ) => {
      state.posts = action.payload;
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.loading = action.payload;
    },
  },
});

export const { setUser, setPosts, setLoading } =
  appSlice.actions;

export function createStore(preloadedState?: AppState) {
  return configureStore({
    reducer: {
      app: appSlice.reducer,
    },
    preloadedState: preloadedState
      ? { app: preloadedState }
      : undefined,
  });
}

export type RootState = ReturnType<
  ReturnType<typeof createStore>['getState']
>;
export type AppDispatch = ReturnType<
  typeof createStore
>['dispatch'];

SSR 対応の Store Provider：

tsx// src/components/StoreProvider.tsx
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from '../store/store';

interface StoreProviderProps {
  children: React.ReactNode;
  initialState?: any;
}

function StoreProvider({
  children,
  initialState,
}: StoreProviderProps) {
  const store = createStore(initialState);

  return <Provider store={store}>{children}</Provider>;
}

export default StoreProvider;

状態を含むサーバーレンダリング：

tsx// src/server.tsx（状態管理版）
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import { Provider } from 'react-redux';
import App from './components/App';
import {
  createStore,
  setUser,
  setPosts,
} from './store/store';

export async function render(url: string): Promise<{
  html: string;
  initialState: any;
}> {
  // Storeの作成
  const store = createStore();

  // 初期データの取得と状態への反映
  const initialData = await fetchInitialData(url);

  if (initialData.user) {
    store.dispatch(setUser(initialData.user));
  }

  if (initialData.posts) {
    store.dispatch(setPosts(initialData.posts));
  }

  // SSRレンダリング
  const appHtml = renderToString(
    <Provider store={store}>
      <StaticRouter location={url}>
        <App url={url} />
      </StaticRouter>
    </Provider>
  );

  // 最終的な状態を取得
  const finalState = store.getState();

  return {
    html: appHtml,
    initialState: finalState,
  };
}

エラーハンドリングとデバッグ

SSR 特有のエラーとその対処法を実装します：

tsx// src/utils/ssr-error-handler.ts
export class SSRError extends Error {
  public statusCode: number;
  public isSSRError = true;

  constructor(message: string, statusCode = 500) {
    super(message);
    this.statusCode = statusCode;
    this.name = 'SSRError';
  }
}

export function handleSSRError(error: unknown): {
  statusCode: number;
  message: string;
  shouldRender: boolean;
} {
  console.error('SSR Error occurred:', error);

  // SSR固有のエラー
  if (error instanceof SSRError) {
    return {
      statusCode: error.statusCode,
      message: error.message,
      shouldRender: error.statusCode < 500,
    };
  }

  // React Hydration エラー
  if (
    error instanceof Error &&
    error.message.includes('Hydration')
  ) {
    console.error(
      'Hydration mismatch detected:',
      error.message
    );
    return {
      statusCode: 500,
      message: 'Client-Server rendering mismatch',
      shouldRender: false,
    };
  }

  // ネットワークエラー
  if (
    error instanceof Error &&
    error.message.includes('fetch')
  ) {
    return {
      statusCode: 503,
      message: 'External service unavailable',
      shouldRender: true,
    };
  }

  // その他のエラー
  return {
    statusCode: 500,
    message: 'Internal server error',
    shouldRender: false,
  };
}

エラー境界コンポーネント：

tsx// src/components/SSRErrorBoundary.tsx
import React, {
  Component,
  ErrorInfo,
  ReactNode,
} from 'react';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
  error?: Error;
}

class SSRErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): State {
    return {
      hasError: true,
      error,
    };
  }

  componentDidCatch(
    error: Error,
    errorInfo: ErrorInfo
  ): void {
    console.error(
      'SSR Error Boundary caught an error:',
      error,
      errorInfo
    );

    // エラー報告サービスに送信（例：Sentry）
    if (typeof window !== 'undefined') {
      // クライアントサイドでのエラー報告
      this.reportError(error, errorInfo);
    }
  }

  private reportError(
    error: Error,
    errorInfo: ErrorInfo
  ): void {
    // エラー報告の実装
    console.log('Reporting error to monitoring service...');
  }

  render(): ReactNode {
    if (this.state.hasError) {
      return (
        this.props.fallback || (
          <div className='error-fallback'>
            <h2>エラーが発生しました</h2>
            <p>ページの読み込み中に問題が発生しました。</p>
            <button
              onClick={() => window.location.reload()}
            >
              ページを再読み込み
            </button>
          </div>
        )
      );
    }

    return this.props.children;
  }
}

export default SSRErrorBoundary;

パフォーマンス最適化テクニック

SSR のパフォーマンスを最大化するための実装例：

typescript// src/utils/ssr-cache.ts
interface CacheEntry {
  html: string;
  timestamp: number;
  etag: string;
}

class SSRCache {
  private cache = new Map<string, CacheEntry>();
  private maxAge = 5 * 60 * 1000; // 5分
  private maxSize = 100; // 最大100エントリー

  get(key: string): CacheEntry | null {
    const entry = this.cache.get(key);

    if (!entry) return null;

    // 期限切れチェック
    if (Date.now() - entry.timestamp > this.maxAge) {
      this.cache.delete(key);
      return null;
    }

    return entry;
  }

  set(key: string, html: string): void {
    // キャッシュサイズ制限
    if (this.cache.size >= this.maxSize) {
      // 最も古いエントリーを削除
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
    }

    const etag = this.generateETag(html);

    this.cache.set(key, {
      html,
      timestamp: Date.now(),
      etag,
    });
  }

  private generateETag(content: string): string {
    const crypto = require('crypto');
    return crypto
      .createHash('md5')
      .update(content)
      .digest('hex');
  }

  clear(): void {
    this.cache.clear();
  }
}

export const ssrCache = new SSRCache();

キャッシュを活用したサーバー実装：

typescript// server/cached-server.ts
import express from 'express';
import { ssrCache } from '../src/utils/ssr-cache';
import { render } from '../src/server';

const app = express();

app.use('*', async (req, res) => {
  const url = req.originalUrl;
  const cacheKey = `ssr:${url}`;

  // キャッシュチェック
  const cached = ssrCache.get(cacheKey);
  if (cached) {
    // ETag比較
    const clientETag = req.headers['if-none-match'];
    if (clientETag === cached.etag) {
      return res.status(304).end();
    }

    res.set({
      'Content-Type': 'text/html',
      ETag: cached.etag,
      'Cache-Control': 'public, max-age=300', // 5分
    });

    return res.status(200).end(cached.html);
  }

  try {
    // SSRレンダリング実行
    const { html, initialState } = await render(url);

    // 初期状態をHTMLに埋め込み
    const finalHtml = html.replace(
      '</body>',
      `
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(
            initialState
          )};
        </script>
      </body>`
    );

    // キャッシュに保存
    ssrCache.set(cacheKey, finalHtml);

    const cached = ssrCache.get(cacheKey)!;
    res.set({
      'Content-Type': 'text/html',
      ETag: cached.etag,
      'Cache-Control': 'public, max-age=300',
    });

    res.status(200).end(finalHtml);
  } catch (error) {
    console.error('SSR Error:', error);
    res.status(500).end('Internal Server Error');
  }
});

ビルドスクリプトの設定：

json{
  "scripts": {
    "dev": "tsx server/dev-server.ts",
    "build": "yarn build:client && yarn build:server",
    "build:client": "vite build --outDir dist/client",
    "build:server": "vite build --ssr src/server.tsx --outDir dist/server",
    "start": "NODE_ENV=production tsx server/prod-server.ts",
    "preview": "yarn build && yarn start"
  }
}

よくある SSR 関連のエラーと対処法：

bash# Hydration mismatch エラー
Warning: Text content did not match. Server: "2023-12-01" Client: "2023-12-02"
# 対処法：日付や時刻に関する処理を useEffect で包む

# Dynamic import エラー
Error: Dynamic require of "es6-promise" is not supported
# 対処法：vite.config.ts の ssr.external に追加

# Module not found エラー
Cannot resolve module './Component' from '/dist/server/server.js'
# 対処法：相対パスを絶対パスに変更、または alias 設定を追加