Server side rendering
How can you use percolate to prerender your pages?
When you build a Progressive Web App (PWA), your page is mostly rendered using JavaScript. Because SEO crawlers generally do not execute JavaScript, this can impact your SEO score significantly. This can be solved by using the server side rendering (SSR) or prerender feature that Percolate offers.
This feature is controlled by the MODULE_OPTIZE_SSR_REQUEST_ENABLED
(enabled by default) setting and OPTIMIZE_SSR_BOT_ONLY
(enabled by default). So by default, only bots will get server-side pre-rendered pages served.
Render flow
When SSR is enabled Percolate will render the page in a few steps, as shown in the following flow diagram:
The Prepare page
step will call the percolate.preparePage
function within your application. This built-in hook gives you the power
to load some data and inject it into the page, or make changes to your page in order to make your app function properly when prerendered by Percolate.
The percolate.preparePage
function is allowed to return a promise or just block until finished. Percolate will throw a timeout
and won't optimize anything if PERCOLATE_ACTION_TIMEOUT
is exceeded.
Non-bot clients
For many PWA's the main issue is the initial loading time. The SSR feature can also be used to render the page for regular clients. This allows you to significantly increase your initial page load times.
This is done by setting OPTIMIZE_SSR_BOT_ONLY
to false
.
Settings
Option | Default value | Description |
---|---|---|
MODULEOPTIZESSRREQUESTENABLED | true | Enable SSR |
OPTIMIZESSRBOT_ONLY | true | Only use SSR with bot clients |
OPTIMIZESSRWAITPREPAREPAGE | false | Enable the use of percolate.preparePage |
PERCOLATEACTIONTIMEOUT | 120000 | Timeout in milliseconds to wait for the percolate.preparePage function to finish |