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


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

You then:

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.


Built time

The page is created at built time.

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


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.




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


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


Discover More
Map Of Internet 1973
File Transfer - Wget

wget is a headless browser command line. It's most used to download files from the Web but you can also download/mirror a whole website. It supports the HTTP, HTTPS, and FTP protocols curl ...
HTML - Data Block

data block are a way to embed data in a html document. The well known is ld-json data block Inject json data in pre-rendered HTML Static pre-generated by the server (ie pre-rendering), the...
HTTP Caches - All the web caches layer explained on one page

Cache is an important tool for data performance but may be creepy when controlling data consistency. Why am I seeing an old version, is it my code or is it the cache ? This article lists all the possible...
React - Server-rendered markup (renderToString / hydrate)

server-rendered markup is the dynamic possibility of server-side rendering (vs static). The steps are: the web server returns a web page where the root component has been rendered as HTML with special...
React - Seo (ie Javascript SEO)

SEO in the context of React (ie javascript) bot such as GoogleBot uses a web rendering service (WRS) to index the page content...
React - Static Web Site Generation

How to generate a static pages from a React App.
Firebug Netpanel Explained
Web - Page Load Time (Speed|Performance)

Goal: being interactive in under 5 seconds Duplicate of . Mobile web speeds matter. On average, faster experiences lead to 70% longer...
Web - Static Web Site

A Static website is a web application that is composed of static resources. (ie the web site doesn't need to generate dynamic pages at runtime) The first reason to create or generate a static website...

Share this page:
Follow us:
Task Runner