A Helmet-like HOC without content implements SPA routing-level caching, manner without additional configuration.


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

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

Function Signature

The PreRender provides a set of configuration for controlling caching rules, expiration times, caching algorithms, and more.

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: set the time the cache keep fresh, seconds. During this time, the cache will be used directly and not invoke asynchronous rendering.
  • staleLimit: sets the time when the cache is completely expired, seconds.During this time, The cache can be returned and asynchronous rendering will be invoke, otherwise must wait for the re-rendered result.
  • level: sets the calculation rule level for the cache identity, usually used with includes and matches. The default value is 0.
0: pathname
1: pathname + querystring
2: pathname + headers
3: pathname + querystring + headers
  • includes: sets the content that needs to be included in the cache identifier, used when the level is not 0. The default value is null.
  • matches: sets the rewriting rule for the value of query or header in cache identity, usually used in cache category, supports regular expressions. The default value is null.


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

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

The following example shows how to add the parameters in the query and header into the cache identifier calculation:

/* calculate cache identifier using channel in query and language in header */
    query: ['channel'],
    header: ['language'],

The following example shows how not to let the test channel affect the online cache:

/* rewrite the channel value starting with test_ in the query as "testChannel", otherwise rewrite it as "otherChannel" */
<PreRender interval={10} level={2} includes={{
  query: ["channel"],
  header: ["language"]
}} matches={{
  query: {
    channel: {
      "testChannel", "^test_",
      "otherChannel", ".*"
}} />