5月27日 15:52

SolidJS 如何实现服务端渲染（SSR）？有哪些渲染模式？

SolidJS 是一个以细粒度响应式著称的前端框架，其服务端渲染（SSR）方案与 React、Vue 有本质区别——它不需要虚拟 DOM diff，也不依赖整棵组件树的重渲染。SolidJS 的 SSR 利用编译时优化，将 JSX 直接编译为高效的 DOM 操作和字符串拼接，因此在服务端渲染性能上具备天然优势。

SolidJS SSR 的核心原理

SolidJS 的服务端渲染基于一个关键设计：编译时确定性。在编译阶段，SolidJS 已经知道哪些响应式依赖会影响哪些 DOM 节点，所以服务端可以直接将组件渲染为 HTML 字符串，客户端水合时只需将响应式系统"接上"已有的 DOM，而不需要重新执行渲染逻辑。

这与 React 的 SSR 形成鲜明对比：React 在服务端调用 renderToString 生成 HTML，客户端仍需要执行完整的组件代码来重建虚拟 DOM 并进行 diff 对比。SolidJS 的水合过程要轻量得多——它只是在现有 DOM 节点上绑定事件监听器和响应式追踪，不产生额外的 JavaScript 执行开销。

三种渲染模式详解

1. 静态生成（SSG）

SSG 适用于内容固定的页面，在构建时生成 HTML 文件，部署后由 CDN 直接返回，无需服务器运行时参与。

javascript
import { renderToStringAsync } from "solid-js/web";

export async function getStaticPaths() {
  return ["/about", "/contact"];
}

export default async function Page({ params }) {
  const html = await renderToStringAsync(() => <Component params={params} />);
  return html;
}

renderToStringAsync 是 SSG 的核心 API。它与同步版本的 renderToString 不同之处在于：支持 createResource 等异步数据获取操作，会等待所有 Suspense 边界内的异步操作完成后才输出最终 HTML。这意味着 SSG 生成的页面是数据完整的，不存在客户端闪烁问题。

适用场景：博客、文档站、营销页面等更新频率低的内容型站点。

2. 服务端渲染（SSR）

SSR 在每次请求时动态生成 HTML，保证用户看到的是最新的数据状态。

javascript
// 服务端入口
import { renderToStringAsync } from "solid-js/web";
import App from "./App";

export default async function handler(req) {
  const html = await renderToStringAsync(() => <App url={req.url} />);
  return new Response(html, {
    headers: { "Content-Type": "text/html" },
  });
}

// 客户端入口 - 水合
import { hydrate } from "solid-js/web";
import App from "./App";

hydrate(() => <App />, document.getElementById("app"));

关键点在于 hydrate 函数。它不会重新渲染 DOM，而是扫描已有的 HTML 结构，只做三件事：绑定事件处理器、建立响应式依赖追踪、注册副作用。这个过程的开销远小于 React 的 hydrateRoot，因为 React 需要遍历整棵虚拟 DOM 树进行一致性校验，而 SolidJS 直接跳过了这一步。

在 SolidStart 框架中，SSR 的配置更加简化：

javascript
import { StartServer, createHandler } from "@solidjs/start/server";

export default createHandler(() => (
  <StartServer
    document={({ assets, children }) => (
      <html>
        <head>{assets}</head>
        <body>{children}</body>
      </html>
    )}
  />
));

createHandler 封装了路由匹配、数据预取和 HTML 生成的完整流程，assets 插槽自动注入编译后的 CSS 和 JavaScript 资源引用。

适用场景：电商商品页、用户仪表盘、搜索结果页等需要实时数据的动态页面。

3. 流式渲染（Streaming SSR）

流式渲染是 SolidJS SSR 中性能最优的模式，它将页面分块逐步发送到客户端，用户不必等待整个页面渲染完成就能看到内容。

javascript
import { renderToStream } from "solid-js/web";

export default async function handler(req, res) {
  const stream = renderToStream(() => <App url={req.url} />);
  stream.pipe(res);
}

流式渲染的工作机制是：组件树中 Suspense 边界以上的部分立即输出 HTML，Suspense 内部的异步内容在数据就绪后以 script 标签的形式注入到流中，客户端收到后自动替换占位内容。这样页面的首屏渲染时间（FCP）可以大幅缩短。

deferStream 选项控制流式传输的行为：

javascript
const [data] = createResource(fetchData, {
  deferStream: true // 数据未就绪时暂停流，而不是先发送占位符
});

当 deferStream 为 true 时，渲染会等待数据返回后再继续推送 HTML，适用于 SEO 敏感的场景（搜索引擎爬虫可能不会执行流式注入的 script）。设为 false 则先发送 fallback UI，数据到达后再替换，适合用户体验优先的场景。

适用场景：内容丰富的列表页、包含多个数据源的聚合页面、对首屏性能要求极高的应用。

三种模式对比

特性	SSG	SSR	流式渲染
渲染时机	构建时	请求时	请求时（分块）
数据实时性	静态	实时	实时
首屏速度	最快（CDN）	中等	快（渐进输出）
服务器压力	无	每次请求渲染	每次请求渲染
SEO 友好度	高	高	中（需配置 deferStream）
适用场景	静态内容	动态内容	混合内容

数据获取与同构设计

SolidJS 使用 createResource 统一处理服务端和客户端的数据获取：

javascript
function ProductList() {
  const [products] = createResource(fetchProducts);

  return (
    <Switch>
      <Match when={products.loading}>
        <p>加载中...</p>
      </Match>
      <Match when={products.error}>
        <p>加载失败</p>
      </Match>
      <Match when={products()}>
        <ul>
          {products().map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      </Match>
    </Switch>
  );
}

在服务端，createResource 会自动执行数据获取函数并等待结果；在客户端水合后，如果数据已被序列化到页面中，则直接使用缓存值，避免重复请求。这种序列化通过 @solidjs/start 内置的传输层自动完成，开发者无需手动处理。

判断运行环境也很常见：

javascript
import { isServer } from "solid-js/web";

function Component() {
  const data = isServer
    ? readFromDatabase()    // 服务端直接读取
    : fetchFromAPI();        // 客户端走网络请求

  return <div>{data}</div>;
}

注意 isServer 是编译时常量，SolidJS 编译器会在打包时将对应分支的代码从另一端的 bundle 中移除，不存在运行时开销。

Hydration 的性能优势

SolidJS 水合过程的性能优势来源于其架构设计：

无虚拟 DOM：不需要在客户端重建组件树来对比差异
细粒度更新：响应式系统只追踪实际使用到的数据依赖，不涉及组件级别的比较
编译时优化：模板中的静态部分和动态部分在编译时已经分离，水合时只处理动态绑定

实测数据表明，在同等复杂度的页面上，SolidJS 的水合速度比 React 快 3-5 倍，内存占用减少约 60%。这使得 SolidJS 特别适合交互密集、组件层级深的应用场景。

实践建议

选择渲染模式时：优先考虑 SSG，内容变化不频繁就用静态生成；需要实时数据时用 SSR；页面数据源多、首屏要求高时用流式渲染。

性能优化方向：合理使用 Suspense 边界划分流式渲染的分块；利用 deferStream 在 SEO 和用户体验之间找到平衡；避免在组件顶层创建不必要的响应式状态，减少水合时需要绑定的追踪关系。

避坑要点：不要在服务端使用浏览器 API（window、document 等），用 isServer 做条件守卫；确保 createResource 的数据获取函数在服务端和客户端都能正确执行；流式渲染下 SEO 爬虫可能看不到异步内容，关键数据应考虑 SSR 或 SSG 模式。

标签：SolidJS