Notes on pre-rendering

#javascript #html #nextjs #gatsby

Typical single page applications needs to load all JavaScript before rendering the application. This increases the time for FP (First Paint) and FCP (First Contentful Paint). However this can be mitigated using pre-rendering. Pre-rendering is generating the HTML from server and sending to the browser.

There are two types of pre-rendering techniques. SSR (Server Side Generation) and SSG (Static Site Generation). Both of these techniques create the HTML in the server and send back to the client, thus improving FP and FCP. However the difference is that,

SSR, HTML is generated for each request.
In SSG, HTML generation is done at the build step of the application.

With SSR dynamic content as such data from APIs are fetched at each time. But with SSG if such dynamic content is present they can become stale. In different frameworks there are techniques to overcome this issue to a certain extent. In Next.js, it is possible to SSG an application without the dynamic content or add incremental static site generation. SSG can provide better performance with CDN cache.