Server Side Rendering

On some pages we use Server Side Rendering (SSR) to add pre-rendered HTML to the page, this means that users on slow connections see something much sooner than they otherwise would and may also help with SEO.

How it works

• Pages which should be rendered on the server are defined in ssrPages.ts

export const pages = [
  {
    filename: 'showcase.html',
    html: render(showcase),
  },
  {
    filename: 'paper-subscription-landing.html',
    html: render(paper),
  },
];

filename can be any unique and descriptive name, html should be a React element suitable to pass to ReactDOMServer.renderToString()

• The Github Actions build runs yarn build-ssr which executes ssrScript.js - this generates html files and writes them to support-frontend/conf/ssr-cache/ where they are then bundled with the app and so available at run time.

• The scala controller action for a server rendered page loads the generated html file by calling AssetsResolver.getSsrCacheContentsAsHtml and passing the result to main.scala.html for inclusion in the page:

Ok(views.html.main(
      title = "Support the Guardian",
      mainElement = assets.getSsrCacheContentsAsHtml("showcase-landing-page","showcase.html"),
      ...
)

This is the PR that introduced SSR: https://github.com/guardian/support-frontend/pull/1746