React with Vite でサーバーサイドレンダリング (SSR) をマスターする: 開発者のための究極のガイド-jsチュートリアル-php.cn

React with Vite でサーバーサイドレンダリング (SSR) をマスターする: 開発者のための究極のガイド

DDD

リリース： 2024-12-25 19:24:10

オリジナル

556 人が閲覧しました

Mastering Server-Side Rendering (SSR) in React with Vite: The Ultimate Guide for Developers

React は常にフロントエンド開発における変革者であり、React 19 のリリースによりさらに強力かつ効率的になりました。このブログでは、超高速ビルドツールである Vite を使用した React 19 のサーバーサイドレンダリング (SSR) について詳しく説明します。初心者でも上級開発者でも、このガイドは SSR を親しみやすく、実践できるように作成されています。

React 19 の新機能は何ですか?

React 19 では、いくつかの重要なアップデートが導入されています:

サーバーコンポーネントの改善: サーバーでレンダリングされたコンポーネントとクライアントでレンダリングされたコンポーネントをシームレスに統合してアプリケーションを構築する新しい方法。
ストリーミングレンダリング: React のコンテンツをブラウザーにストリーミングする機能により、パフォーマンスが向上しました。
同時レンダリング: タスクに動的に優先順位を付けることで、よりスムーズなユーザーインターフェイスが可能になります。

これらの機能により、React 19 は Vite などの最新ツールを使用して SSR を実装するための理想的な候補となります。

サーバーサイドレンダリング (SSR) について

サーバー側レンダリングには、サーバー上で React コンポーネントをレンダリングし、HTML をクライアントに送信することが含まれます。ブラウザーがレンダリングを処理するクライアントサイドレンダリング (CSR) とは異なり、SSR は次の機能を提供します。

初期読み込みの高速化: ブラウザは完全にレンダリングされた HTML ページを受け取ります。
SEO のメリット: コンテンツは検索エンジンクローラーですぐに利用可能になります。
ユーザーエクスペリエンスの向上: 接続が遅い場合でも、ユーザーはコンテンツをより早く表示できます。

SSR は React 19 でどのように機能しますか?

React 19 のストリーミング機能と同時機能により、SSR はより効率的になります。コンポーネントは準備が整うとストリーミングされるため、サーバーの応答時間が短縮され、対話性が向上します。

SSR に Vite を使用する理由

Vite は、スピードとシンプルさで知られる最新のビルドツールです。高速モジュール解決やホットモジュール交換 (HMR) などの高度な機能を備えた Vite は、React 19 プロジェクトに SSR を統合するための優れた選択肢です。

SSR における Vite の主な利点:

超高速ビルド: 最適化された開発および運用ワークフロー。
シンプルな構成: 最小限の定型セットアップ。
React のネイティブサポート: JSX、TypeScript、最新ライブラリの組み込みサポート。
スケーラブルなアーキテクチャ: 大規模なプロジェクトを効率的に処理します。

Vite を使用して React 19 で SSR をセットアップするためのステップバイステップガイド

Vite を使用して SSR 対応の React 19 アプリを最初から構築してみましょう。開始するには、次の手順に従ってください:

1. プロジェクトを初期化する

npm create vite@latest my-react-ssr-app --template react
cd my-react-ssr-app
npm install

ログイン後にコピー

2. 必要な依存関係をインストールする

npm install express @vitejs/plugin-react react-dom/server

ログイン後にコピー

3. Vite 構成のセットアップ

vite.config.js を編集して SSR を有効にします:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    ssr: true,
    rollupOptions: {
      input: './server/index.js',
    },
  },
});

ログイン後にコピー

4. 単純な React コンポーネントを作成する

src/App.jsx を作成します:

function App() {
  return (
    <div>
      <h1>Welcome to React 19 SSR with Vite</h1>
      <p>This page is server-side rendered!</p>
    </div>
  );
}
export default App;

ログイン後にコピー

5. Express サーバーのセットアップ

server/index.js を作成します:

import express from 'express';
import { renderToString } from 'react-dom/server';
import App from '../src/App';

const app = express();

app.use('/static', express.static('dist'));

app.get('*', (req, res) => {
  const appHtml = renderToString(<App />);

  const html = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>React 19 SSR with Vite</title>
    </head>
    <body>
      <div>



<h3>
  
  
  6. Build and Run
</h3>

<p>To build and serve your SSR app:<br>
</p>

<pre class="brush:php;toolbar:false">npm run build
node server/index.js

ログイン後にコピー

http://localhost:3000 にアクセスして、SSR React アプリの動作を確認してください。

例とベストプラクティス

ストリーミング SSR の例

React 19 の renderToPipeableStream ではストリーミングが可能です:

import { renderToPipeableStream } from 'react-dom/server';

app.get('*', (req, res) => {
  const stream = renderToPipeableStream(<App />, {
    onShellReady() {
      res.status(200).setHeader('Content-Type', 'text/html');
      stream.pipe(res);
    },
    onError(err) {
      console.error(err);
      res.status(500).send('Internal Server Error');
    },
  });
});

ログイン後にコピー

このアプローチでは、コンテンツが段階的にレンダリングされ、パフォーマンスが向上します。