jiang13-forum/frontend/renderer/+onRenderClient.tsx

import { StrictMode } from 'react';
import type { ComponentType } from 'react';
import { hydrateRoot, createRoot } from 'react-dom/client';
import type { PageContextClient } from 'vike/types';
import { applyTheme, getStoredTheme } from '../src/utils/theme';
import { beginHomeHydrate } from '../src/utils/homeHydrate';
import { reloadForStaleChunk } from '../src/utils/chunkLoad';
import { consumeHomeBoot } from '../src/utils/homeBoot';
import { ensureColdBootReady, isMainLayoutPath } from '../src/utils/prefetchRoute';

export { onRenderClient };

type PageComponent = ComponentType<{ url?: string }>;

let root: ReturnType<typeof createRoot> | null = null;

function waitForStylesheets(): Promise<void> {
  const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
  if (links.length === 0) return Promise.resolve();
  return Promise.all(
    links.map(
      (node) =>
        new Promise<void>((resolve) => {
          const link = node as HTMLLinkElement;
          try {
            if (link.sheet) {
              resolve();
              return;
            }
          } catch {
            /* cross-origin */
          }
          const finish = () => resolve();
          link.addEventListener('load', finish, { once: true });
          link.addEventListener('error', finish, { once: true });
        }),
    ),
  ).then(() => undefined);
}

async function onRenderClient(pageContext: PageContextClient) {
  applyTheme(getStoredTheme());
  consumeHomeBoot();

  // Vite modulepreload / 动态 import 失败（发版后旧 hashed URL 404）
  window.addEventListener('vite:preloadError', (event) => {
    event.preventDefault();
    reloadForStaleChunk();
  });

  const el = document.getElementById('root');
  if (!el) return;

  await waitForStylesheets();
  try {
    if (document.fonts?.ready) await document.fonts.ready;
  } catch {
    /* ignore */
  }

  const path = `${window.location.pathname}${window.location.search}`;
  if (isMainLayoutPath(window.location.pathname)) {
    await ensureColdBootReady(path);
  }

  // 有 SSR 正文 → hydrate 接管同一 DOM（首帧 hydrate 同构变体）；SPA 壳 → 整树挂载
  const hydrating = pageContext.isHydration && el.innerHTML.trim() !== '';
  if (hydrating) beginHomeHydrate();

  const Page = pageContext.Page as PageComponent;
  const app = (
    <StrictMode>
      <Page />
    </StrictMode>
  );

  if (hydrating) {
    try {
      hydrateRoot(el, app);
    } catch (err) {
      console.warn('[j13] hydrateRoot 失败，回退 createRoot', err);
      el.innerHTML = '';
      if (!root) root = createRoot(el);
      root.render(app);
    }
  } else {
    if (!root) root = createRoot(el);
    root.render(app);
  }
}