服务端渲染 SSR

提示

小程序端不支持该能力。

服务器渲染，简称 SSR (Server Side Rendering)，是一种在服务端运行 Node.js 程序动态生成 HTML 的渲染方式。

SSR 相比传统在浏览器端渲染的模式(CSR)，受设备性能和网络情况的影响更小，可以达到更好的性能体验和 SEO 能力。

开启 SSR

与 SSG 不同的是，ice.js 中 SSR 不是默认启用的，需要手动开启。

在 ice.config.mts 中，增加如下配置：

ice.config.mts

import { defineConfig } from '@ice/app';

export default defineConfig(() => ({
  // ...
  ssr: true,
}));

数据请求

开启 SSR 后，路由组件中导出的 dataLoader 方法将优先在 Server 端执行，如果 SSR 渲染成功，在 Client 端将不会再次调用 dataLoader，而会复用 SSR 的结果。当页面在浏览器侧通过路由跳转，或页面降级时，才会在 Client 端调用 dataLoader。

因此，一般情况下 dataLoader 内的数据请求需要保持同构，在 Server 端和 Client 端都能执行。

示例：

src/pages/foo.tsx

import { useData, defineDataLoader, defineServerDataLoader } from 'ice';

// 同构的数据请求
export const dataLoader = defineDataLoader(async () => {
  if (isClient) {
    return await fetch('https://example.com/api/xxx');
  } else if (isServer) {
    return await fetchDataAtServer();
  }
});

如果确实需要为 Server 端指定不一样的数据请求方式，可以通过定义 serverDataLoader 来实现。当路由组件声明了 serverDataLoader，会在 SSR 优先使用这个方法。

示例：

src/pages/foo.tsx

import { useData, defineDataLoader, defineServerDataLoader } from 'ice';

// Client 端的数据请求
export const dataLoader = defineDataLoader(async () => {
  return await fetch('https://example.com/api/xxx');
});

// Server 端的数据请求
export const serverDataLoader = defineServerDataLoader(async () => {
  return await fetchDataAtServer();
});

在构建 Client 端的产物时，会移除导出的 serverDataLoader 及其相关依赖。