Pre-rendering and progressive rendering are two techniques used by static site generators to improve website performance and user experience. Rendering is generating HTML. In the case of Static Site Generators, this is not the same as web page rendering as explained by Constructing the Object Model on the web.dev site.
Here’s a brief overview of two additional types of rendering:
- Pre-rendering: Pre-rendering involves generating the HTML, CSS, and JavaScript for a website at build time before the user requests the page. When a user visits the website, the server can serve the pre-rendered HTML rather than generate it on the fly. Pre-rendering can significantly improve the speed and performance of a website, as it eliminates the delay caused by rendering the page on the server.
- Progressive rendering: Progressive rendering, on the other hand, involves generating and serving the HTML, CSS, and JavaScript for a website in stages as the user requests the page. For example, the server might first serve a basic HTML page with minimal styling and functionality and then progressively add more content and features as the user interacts with the page. Progressive rendering can help reduce a website’s initial load time, as the user can start interacting with the page before all the content and features are loaded.
When evaluating a Static Site Generator (SSG) it’s best to understand the performance requirements for your docs site on both the amount of content you need to render immediately and that which can wait in the user’s browser. In the case of NextJS and Gatsby, once the app’s JavaScript is loaded to the client’s browser, JavaScript code picks up the work, but initially, a pre-rendered initial static HTML is available for reading. NextJS and Gatsby are built on the base React frontend framework.
Considerations for SSGs and technical documentation
In summary, pre-rendering involves generating the entire website at build time, while progressive rendering involves developing and serving the website in stages as the user interacts with it. Both techniques can help improve a website’s performance and user experience, but they have different strengths and use cases. Pre-rendering is best suited for websites with a lot of content and features that can be generated beforehand. In contrast, progressive rendering is best suited for websites that need to load quickly and allow the user to start interacting with the page as soon as possible. Pre-rendering is likely best for most documentation sites. Documentation built into a dashboard may benefit from tight integration and progressive rendering. Like the considerations when Evaluating print, PDF, or epub output, or evaluating themes, you want to evaluate rendering when looking into static site generators.