/
Pack Hosting Panel

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:

No
Yes
No
Yes
Yes
NO
Yes
No
SSR Enabled
Do not render
Is bot
Bot only enabled
Render page
Wait CPU Idle
Prepare enabled
Prepare page
Save html
Request

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

OptionDefault valueDescription
MODULEOPTIZESSRREQUESTENABLEDtrueEnable SSR
OPTIMIZESSRBOT_ONLYtrueOnly use SSR with bot clients
OPTIMIZESSRWAITPREPAREPAGEfalseEnable the use of percolate.preparePage
PERCOLATEACTIONTIMEOUT120000Timeout in milliseconds to wait for the percolate.preparePage function to finish