A static HTML representation is a prerendered version of an application that browsers can display without dynamically executing the application first. It reduces the time users see an empty window and does not require live application resources to generate each response. section 27.0 section 27.6
A typical prerendering workflow has these properties:
- Run the prerender command to create HTML files in the application's browser distribution folder. section 8.2.5
- Serve the generated files with a separate HTTP server because the prerendered application cannot dynamically build and serve itself. section 27.5.2
- Let rehydration use the prerendered HTML as the basis for browser-generated content when JavaScript loads. section 27.5.2
- Account for stale content: prerendered HTML does not reflect later changes in application state or data. section 27.6
Testing a prerendered application
Run npm run prerender, serve the generated browser directory on port 4500, disable JavaScript, and request the application. The browser displays HTML documents and category buttons can load other prerendered documents. Re-enable JavaScript and reload to observe rehydration and dynamic behavior. section 27.5.2
Listing 27.27. Prerendering the example application
npm run prerender
Use the prerender command listing as the direct build step for producing the static HTML representation. section 27.5.2
Listing 27.28. Running an HTTP server to deliver the prerendered application
npx http-server@14.1.1 dist/exampleApp/browser --port 4500
Use the HTTP server listing to deliver the generated files for browser testing. section 27.5.2
