-
Notifications
You must be signed in to change notification settings - Fork 13
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.
- 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 tosupport-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 tomain.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
- Redux Glossary
- Why Redux Toolkit?
- Writing state slices with Redux Toolkit
- Handling action side effects in Redux
- Presentational and Container Components
- Scoped actions and reducers
- Server Side Rendering
- Form validation
- CI build process
- Post deployment testing
- Post deployment test runbook
- TIP Real User Testing
- Code testing and validation
- Visual testing
- Testing Apple Pay locally
- Test Users
- Deploying to CODE
- Automated IT tests
- Deploying Fastly VCL Snippets
- Archived Components
- Authentication
- Switchboard
- How to make a fake contribution
- The epic and banner
- Environments
- Tech stack
- Supported browsers
- Contributions Internationalisation
- Payment method internationalisation in Guardian Weekly
- Print fulfilment/delivery
- Updating the acquisitions model
- Runscope testing
- Scala Steward for dependency management
- Alarm Investigations
- Ticker data
- Ophan
- Quantum Metric
- [Google Tag Manager] (https://github.com/guardian/support-frontend/wiki/Google-Tag-Manager)