Caching in headless server-side rendering mode

Version: 20.x

If a server-side rendered JSS application in headless mode performs poorly, you can take the following actions:

  • Enable output caching in Sitecore to cache JSON fragments within the Layout Service, which makes the Layout Service scale better and increase the maximum throughput of the rendering engine. This does not affect the CPU cycles needed for server-side rendering JavaScript.

  • Implement caching in the JavaScript layer. For example, you can:

    • Add memory caching to the Node server to save JSON for a route and reuse it.

    • Add memory caching to the Node server to save the HTML output of the entire route (all-or-nothing caching) in scenarios where caching the entire page is acceptable.

    • Dynamically prerender routes and save to Node memory on a regular interval.

    • If implementing a progressive web application, utilize service workers and browser cache strategies.

    Note

    When a page is server-side rendered, Node renders the entire page as one block of HTML, not as individual renderings.

  • Remove or customize the cache middleware. If you are server-side rendering your JSS application using the sitecore-jss-proxy sample, the application uses node-level output caching as implemented in cacheMiddleware.js . This middleware is applied when you start the application.

    Note

    Node-level output caching has some limitations:

    • Security - users with different roles might see the same output. You must customize cacheMiddleware.js to add user identifier keys to the cache.

    • Personalization can be impacted when using output caching. Customize the cacheMiddleware.js file as needed.

    • Tracking does not work.

Do you have some feedback for us?

If you have suggestions for improving this article,