web:prerendering

About

Prerendering is a web static generator method that will take a dynamic website and turn it into a static web application.

You then:

don't need a server.
improve the page load

The website (called a progressive static site) is created at build time via a static site generator where every statically exported HTML page is an entry point to the full application.

Method

Built time

The page is created at built time.

Example with React: see React - Server-rendered markup (renderToString / hydrate)

Crawling

The principle is:

Starts a local webserver,
Crawl it with a headless browser
Export each URL (route) as a static HTML file with a folder structure mirroring the structure of the routes.

Use case

There are some use-cases where prerendering might not be a great idea.

Tons of routes - If your site has hundreds or thousands of routes, it could take ages.
Dynamic Content - If your render routes that have content that's specific to the user viewing it or other dynamic sources, you should make sure you have placeholder components that can display until the dynamic content loads on the client-side. Otherwise it might be a tad weird.

List

wget

Wget

wget \
     --recursive \ # Download the whole site.
     --page-requisites \ # Get all assets/elements (CSS/JS/images).
     --adjust-extension \ # Save files with .html on the end.
     --span-hosts \ # Include necessary assets from offsite as well.
     --convert-links \ # Update links to still work in the static version.
     --restrict-file-names=windows \ # Modify filenames to work in Windows as well.
     --domains yoursite.com \ # Do not follow links outside this domain.
     --no-parent \ # Don't follow links outside the directory you pass in.
     https://hostname.com/whatever/path # The start URL to download

others

Name	Headless browser used	Create React App Support
React Snap	pupetteer	Yes
react-snapshot	jsdom	Yes
prerender-spa-plugin	pupetteer / jsdom	WebPack
phenomic		Yes
Prep	PhantomJs	No

A lot are present on this page: alternatives

Other:

React-static - discontinued (7533)
https://github.com/markdalgleish/static-site-generator-webpack-plugin (gatsby is built on top)
React Framework - Gatsby - Gatsby.js is a static PWA (Progressive Web App) generator.
React Framework - Next.js

Table of Contents

Web - Prerendering / Snapshoting (Dynamic to Static Web Site Generation)