【React】ViteでのストリーミングSSR/Suspenseサンプル

  const { pipe } = renderToPipeableStream(
    <div>
      <Suspense fallback={<p className="loading">ヘッダー読み込み中...</p>}>
        <Ssr text="■■ヘッダー■■" mSecond={5000} />
      </Suspense>
      <div id="csr">
        <Csr />
      </div>
      <Suspense fallback={<p className="loading">フッター読み込み中...</p>}>
        <Ssr text="■■フッター■■" mSecond={3000} />
      </Suspense>
    </div>,
    {

vite-react-ssr-stream
 ┣━ dist
 ┃   ┣━ csr ←CSR側ビルド結果
 ┃   ┃   ┣━ assets
 ┃   ┃   ┃   ┣━ index-CK43AXXj.css
 ┃   ┃   ┃   ┗━ index-CTuOo48z.js
 ┃   ┃   ┣━ src
 ┃   ┃   ┃   ┗━ csr
 ┃   ┃   ┃       ┗━ csr.html ←使用しないファイル
 ┃   ┃   ┗━ manifest.json ←assets内ファイルの名前解決用
 ┃   ┗━ ssr ←SSR側ビルド結果
 ┃       ┣━ entry-ssr.js
 ┃       ┣━ template.css ←静的コピー
 ┃       ┗━ template.html ←静的コピー
 ┣━ src
 ┃   ┣━ csr ←CSR側ソース
 ┃   ┃   ┣━ csr.css
 ┃   ┃   ┣━ csr.html ←CSRビルド用html
 ┃   ┃   ┣━ csr.jsx
 ┃   ┃   ┗━ entry-csr.jsx
 ┃   ┗━ ssr ←SSR側ソース
 ┃       ┣━ entry-ssr.jsx
 ┃       ┣━ ssr.jsx
 ┃       ┣━ template.css
 ┃       ┗━ template.html
 ┣━ package.json
 ┣━ server.js ←サーバースクリプト
 ┗━ vite.config.js

{
  "name": "vite-react-ssr-stream",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "set NODE_ENV=development&& node server.js",
    "build": "vite build && vite build --ssr",
    "start": "node server.js"
  },
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
    "babel-plugin-react-compiler": "^1.0.0",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "express": "^5.2.1",
    "globals": "^16.5.0",
    "vite": "^7.2.4",
    "vite-plugin-static-copy": "^3.2.0"
  }
}

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from "vite-plugin-static-copy";

// https://vite.dev/config/
export default defineConfig(({ command, isSsrBuild }) => {
  const isDev = command === "serve";

  return {
    plugins: [
      react({
        babel: {
          plugins: ['babel-plugin-react-compiler'],
        },
      }),
      viteStaticCopy({
        targets: [
          {
            src: [
              "src/ssr/template.html",
              "src/ssr/template.css"
            ],
            dest: "",
          },
        ],
        environment: "ssr"
      }),
    ],

    esbuild: {
      jsxDev: false,
    },
    build: isSsrBuild
      ? {
        ssr: true,
        outDir: "dist/ssr",
        rollupOptions: {
          input: "src/ssr/entry-ssr.jsx",
          output: {
            format: "esm",
          },
        },
      }
      : {
        // CSR ビルド
        outDir: "dist/csr",
        manifest: "manifest.json",
        rollupOptions: {
          input: "src/csr/csr.html",
          output: {
            format: "esm",
          },
        },
      },
    ssr: isDev
      ? {
        // 開発時 SSR
        external: ["react", "react-dom"],
      }
      : {
        // 本番 SSR ビルド
        // → react / react-dom をバンドルに含める
        noExternal: [
          "react",
          "react-dom",
        ],
      },
  }
});

import express from "express";
import fs from "fs";
import path from "path";
import { pathToFileURL } from "url";

process.env.NODE_ENV ??= "production";
const isProd = process.env.NODE_ENV === "production";

const app = express();
const root = process.cwd();

  // template.htmlを読み込みにtemplate.cssの内容を挿入して返す
const loadTemplate = (root, isProd) => {
    const templatePath = path.join(
        root, isProd ? "dist" : "src", "ssr/template");
    const template = fs.readFileSync(templatePath + ".html", "utf-8");
    const css = fs.readFileSync(templatePath + ".css", "utf-8");
    return template.replace("<!--template.css-->", `<style>${css}</style>`);
};

const render = await (async () => {

    const SCRIPT_PRD = "<!--scripts1-->";
    const SCRIPT_DEV = "<!--scripts2-->";
    const STYLES = "<!--styles-->";

    if (isProd) {

        /**
         * 本番環境
         */
        app.use(
            "/assets",
            express.static(path.join(root, "dist/csr/assets"))
        );

        // manifest.jsonからビルド後のスクリプトファイル名を取得
        const manifest = JSON.parse(
            fs.readFileSync("dist/csr/manifest.json")
        )["src/csr/csr.html"];

        // テンプレートにscriptタグ、linkタグ挿入
        const template = loadTemplate(root, isProd)
            .replace(SCRIPT_PRD, `<script type="module" crossorigin src="/${manifest.file}"></script>`)
            .replace(SCRIPT_DEV, "")
            .replace(STYLES, manifest["css"].map(
                css => `<link rel="stylesheet" crossorigin href="/${css}">`
            ).join(""));

        // SSR側モジュール読み込み
        const importModule = await import(
            pathToFileURL(path.join(root, "dist/ssr/entry-ssr.js")).href
        );
        // レンダー関数取得
        const render = (res) => {
            return importModule.default(res, template);
        };
        return render;
    }

    /**
     * 開発環境
     */
    const { createServer } = await import("vite");
      // vite開発サーバー起動
    const vite = await createServer({
        server: { middlewareMode: true },
        appType: "custom",
    });

    app.use(vite.middlewares);

        // テンプレートにscriptタグ、linkタグ挿入
    const template = async (url) => {
        const rawTemplate = loadTemplate(root, isProd)
            .replace(SCRIPT_PRD, "")
            .replace(SCRIPT_DEV, `<script type="module" src="/src/csr/entry-csr.jsx"></script>`)
            .replace(STYLES, "");
        return await vite.transformIndexHtml(url, rawTemplate);
    };
        // レンダー関数定義
    const render = async (res, url) => {
        // SSR側モジュール読み込み
        const importModule = await vite.ssrLoadModule("/src/ssr/entry-ssr.jsx");
        // レンダー実行
        importModule.default(res, await template(url));
    };
    return render;
})();

app.use(async (req, res) => {

    try {
        render(res, req.originalUrl);
    } catch (e) {
        console.error(e);
        res.status(500).end("Internal Server Error");
    }
});

app.listen(3000, () => {
    console.log(`Server running: http://localhost:3000`);
});

import { renderToPipeableStream } from "react-dom/server";
import { Suspense } from 'react';
import Ssr from "./ssr";
import Csr from "../csr/csr";

function render(res, template) {
  const [head, tail] = template.split("<!--ssr-->");

  let didError = false;

  const { pipe } = renderToPipeableStream(
    <div>
      <Suspense fallback={<p className="loading">ヘッダー読み込み中...</p>}>
        <Ssr text="■■ヘッダー■■" mSecond={5000} />
      </Suspense>
      <div id="csr">
        <Csr />
      </div>
      <Suspense fallback={<p className="loading">フッター読み込み中...</p>}>
        <Ssr text="■■フッター■■" mSecond={3000} />
      </Suspense>
    </div>,
    {
      onShellReady() {
        
        res.status(didError ? 500 : 200);
        res.setHeader('Content-Type', 'text/html; charset=utf-8');
        res.write(head);
        pipe(res);
        res.write(tail);
      },
      onError(err) {
        didError = true;
        console.error(err);
      },
    }

  );

}
export default render

async function Ssr({text,mSecond}) {
 await new Promise(r=>setTimeout(()=>r(),mSecond));

  return (
    <div className="ssr">
      <p>{text}</p>
    </div>
  );
}
export default Ssr

import { hydrateRoot } from 'react-dom/client'
import './csr.css'
import Csr from './csr.jsx'

const container = document.getElementById("csr");

if (container) {
  hydrateRoot(container,<Csr />);
}

import { useState } from "react";
function Csr() {

  const [sourceText, setSourceText] = useState("Clickでソースコードを取得");
  const [busy, setBusy] = useState(false);

  const fetchData = async () => {
    setBusy(true);
    const location = `${window.location.href}`;
    try {
      const html = await fetch(location)
        .then(data => data.text());

      setSourceText(html);
    } catch (error) {
      setSourceText('Error:', error);
    }
    setBusy(false);
  };

  return (
    <div id="client">
      <p>CSR側</p>
      <p><button className={busy ? "loading" : ""} onClick={
        () => {
          fetchData();
        }
      }>Click!!</button></p>
      <code style={{ whiteSpace: "pre" }}>
        {sourceText}
      </code>
    </div>
  );
}

export default Csr

サーバー側ディレクトリ
 ┣━ dist
 ┃   ┣━ csr ←CSR側ビルド結果
 ┃   ┃   ┣━ assets
 ┃   ┃   ┃   ┣━ index-CK43AXXj.css
 ┃   ┃   ┃   ┗━ index-CTuOo48z.js
 ┃   ┃   ┣━ src
 ┃   ┃   ┃   ┗━ csr
 ┃   ┃   ┃       ┗━ csr.html ←使用しないファイル
 ┃   ┃   ┗━ manifest.json ←assets内ファイルの名前解決用
 ┃   ┗━ ssr ←SSR側ビルド結果
 ┃       ┣━ entry-ssr.js
 ┃       ┣━ template.css ←静的コピー
 ┃       ┗━ template.html ←静的コピー
 ┗━server.js ← サーバー常駐コード