指南
教程
配置
API
社区
指南
教程
配置
API
社区
简体中文

PreRender

无展示内容的高阶组件，通过类似 Helmet 的方式实现 SPA 路由级的缓存，无需额外配置。

使用姿势

import { PreRender } from '@modern-js/runtime/ssr';

export default () => (
  <>
    <PreRender interval={5} />
  </>
);

函数签名

PreRender 组件提供了一套常用的配置参数，用于控制缓存的规则、过期时间、缓存算法等。

type Props {
  interval: number;
  staleLimit: number;
  level: number;
  include: { header?: string[], query?: string[] };
  matches: { header?: Record<string, any>, query?: Record<string, any> }
}

function PreRender(props: Props): React.Component

参数

  • interval：设置缓存保持新鲜的时间，单位秒。在该时间内，将直接使用缓存，并且不做异步渲染。
  • staleLimit：设置缓存完全过期的时间，单位秒。在该时间内，缓存可以被返回，并且会做一步渲染，否则必须使用重新渲染的结果。
  • level：设置缓存标识的计算规则等级，通常配合 includes 与 matches 使用。默认值为 0。
0：路由路径
1：路由路径 + 查询字符串
2：路由路径 + 请求头
3：路由路径 + 查询字符串 + 请求头
  • includes：设置需要被纳入缓存标识的内容，在 level 非 0 时使用。默认值为 null。
  • matches：设置 query 或 header 的值在缓存标识计算中的重写规则，通常用在缓存分类时，支持正则表达式。默认值为 null。

示例

import { PreRender } from '@modern-js/runtime/ssr';

export default function App() {
  return (
    <>
      <PreRender interval={10} />
      <div>Hello Modern</div>
    </>
  );
}

下面例子展示了如何将 query、header 中指定的参数纳入缓存计算中：

/* 使用 query 中的 channel 和 header 中的 language 计算缓存标识 */
<PreRender
  interval={10}
  level={2}
  includes={{
    query: ['channel'],
    header: ['language'],
  }}
/>

下面例子展示了如何不让测试频道影响线上缓存：

/* 将 query 中 channel 值为 test_ 开头的重写为 testChannel，否则重写为 otherChannel */
<PreRender interval={10} level={2} includes={{
  query: ["channel"],
  header: ["language"]
}} matches={{
  query: {
    channel: {
      "testChannel", "^test_",
      "otherChannel", ".*"
    }
  }
}} />