PreRender

补充信息

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

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

API

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

<PreRender></PreRender>

参数

• interval：number，设置缓存保持新鲜的时间，单位秒。在该时间内，将直接使用缓存，并且不做异步渲染。
• [staleLimit]：number，设置缓存完全过期的时间，单位秒。在该时间内，缓存可以被返回，否则必须使用重新渲染的结果。
• [level]：number，设置缓存标识的计算规则等级，通常配合 includes 与 matches 使用。默认值为 0。

0：路由路径
1：路由路径 + 查询字符串
2：路由路径 + 请求头
3：路由路径 + 查询字符串 + 请求头

• [includes]：{ header?: string[], query?: string[] }，设置需要被纳入缓存标识的内容，在 level 非 0 时使用。默认值为 null。
• [matches]：{ header?: Record<string, any>, query?: Record<string, any> }，设置 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", ".*"
        }
    }
}} />