Not server-side rendering but still want to speed up the performance of your React site? Try pre-rendering!
react-snap is a third-party
library that pre-renders pages on your site into static HTML files. This can
improve
First Paint
times in your application.
Here's a comparison of the same application with and without pre-rendering loaded on a simulated 3G connection and mobile device:
Why is this useful?
The main performance problem with large single-page applications is that the user needs to wait for the JavaScript bundle(s) that make up the site to finish downloading before they can see any real content. The larger the bundles, the longer the user will have to wait.
To solve this, many developers take the approach of rendering the application on the server instead of only booting it up on the browser. With each page/route transition, the complete HTML is generated on the server and sent to the browser, which reduces First Paint times but comes at the cost of a slower Time to First Byte.
Pre-rendering is a separate technique that is less complex than server rendering, but also provides a way to improve First Paint times in your application. A headless browser, or a browser without a user interface, is used to generate static HTML files of every route during build time. These files can then be shipped along with the JavaScript bundles that are needed for the application.
react-snap
react-snap uses Puppeteer to
create pre-rendered HTML files of different routes in your application. To
begin, install it as a development dependency:
npm install --save-dev react-snap
Then add a postbuild script in your package.json:
"scripts": {