prerender.ts

/**
 * Build-time prerender (SSG) step.
 *
 * Runs after both the client build (`vite build`) and the server build
 * (`vite build --ssr src/entry-server.tsx`). It renders the app to an HTML
 * string and injects it into the client-built `index.html`, producing a fully
 * static, pre-rendered page that hydrates on the client.
 */
import { readFileSync, rmSync, writeFileSync } from 'node:fs';
import { dirname, resolve } from 'node:path';
import { fileURLToPath, pathToFileURL } from 'node:url';

const __dirname = dirname(fileURLToPath(import.meta.url));

const distDir = resolve(__dirname, 'dist');
const templatePath = resolve(distDir, 'index.html');
const serverEntryPath = resolve(distDir, 'server/entry-server.js');
const serverDir = resolve(distDir, 'server');

const PLACEHOLDER = '<!--ssr-outlet-->';

async function prerender() {
  const template = readFileSync(templatePath, 'utf-8');

  if (!template.includes(PLACEHOLDER)) {
    throw new Error(
      `Could not find "${PLACEHOLDER}" in dist/index.html. Is the placeholder still in index.html?`,
    );
  }

  const { render } = await import(pathToFileURL(serverEntryPath).href) as {
    render: () => string;
  };

  const appHtml = render();
  const html = template.replace(PLACEHOLDER, appHtml);

  writeFileSync(templatePath, html);

  // The server bundle is only needed for prerendering; keep it out of the
  // deployed output.
  rmSync(serverDir, { recursive: true, force: true });

  console.log('Prerendered dist/index.html');
}

prerender().catch(err => {
  console.error(err);
  process.exit(1);
});