## Background For various reasons — performance, SEO, accessibility — it's desirable for React (or other virtual DOM) apps to serve a static version of the page immediately on first visit, then hydrate into the fully interactive version once the bundle loads. ## Server-Side Rendering React provides [Server React DOM APIs](https://react.dev/reference/react-dom/server) for SSR, but they require a Node.js process. If your backend already runs on Node.js this is convenient, but if it doesn't, you'd need a separate Node.js service or a headless browser. Is there a lighter alternative? ## Webpack Pre-rendering ### HtmlWebpackPlugin Yes. [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) — an indispensable part of any React scaffolding — generates HTML files and injects compiled JS/CSS into them. Critically, it also supports [templates](https://github.com/jantimon/html-webpack-plugin/blob/main/docs/template-option.md). Webpack renders an [ejs](https://ejs.co) template at compile time, so you can bake in static content: ```html

<%= menu %>

``` ```javascript { plugins: [ new HtmlWebpackPlugin({ minify: false, template: "./path-of-the-template/index.ejs", templateParameters: { menus: ["Home", "About", "Contact"], }, }), ]; } ``` Webpack produces: ```html

Home
About
Contact

``` The natural extension: write the above-the-fold structure as a template and pass dynamic data as template variables at compile time. But what if that data needs to be fetched from a server at build time? ### Fetching Data at Compile Time HtmlWebpackPlugin exposes [Events](https://github.com/jantimon/html-webpack-plugin#events) based on webpack's [tapable](https://github.com/webpack/tapable/tree/master) mechanism, letting you hook into the plugin lifecycle. ![HtmlWebpackPlugin Execution Flow](/api/media/serve/images/2024/04/3723544198.png) Looking at the flow diagram, template compilation happens at step 8 (`afterTemplateExecution`). To inject data, we hook in just before that — e.g., `alterAssetTagGroups` — fetch the data, and write it into `templateParameters`. #### Writing the Plugin ```javascript const HtmlWebpackPlugin = require("html-webpack-plugin"); class HtmlWebpackTemplatePlugin { constructor(options) { this.options = options; } apply(compiler) { compiler.hooks.compilation.tap( "HtmlWebpackTemplatePlugin", (compilation) => { HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync( "HtmlWebpackTemplatePlugin", (data, cb) => { this.options .func(data) .then((resp) => { cb(null, resp); }) .catch(() => { cb(null, data); }); }, ); }, ); } } module.exports = HtmlWebpackTemplatePlugin; ``` The `data` object passed to the callback: ![HtmlWebpackPlugin Data Structure](/api/media/serve/images/2024/04/2365741893.png) `data.plugin.options.templateParameters` holds the template variables — write your data there. #### Using the Plugin ```javascript { plugins: [ new HtmlWebpackPlugin({ minify: false, template: "./path-of-the-template/index.ejs", templateParameters: {}, }), new HtmlWebpackTemplatePlugin({ func: (data) => new Promise((resolve) => { rxjs .from( fetch(`${process.env.API_URI}/categories`).then((response) => response.json(), ), ) .pipe( rxjs.switchMap((categories) => rxjs .forkJoin( (categories || []).map((category) => fetch( `${process.env.API_URI}/category/${category.id}/sites`, ).then((response) => response.json()), ), ) .pipe( rxjs.map((sites) => sites.map((site, index) => ({ ...categories[index], sites: site, })), ), rxjs.map((sites) => [categories, sites]), ), ), ) .subscribe(([categories, sections]) => { data.plugin.options.templateParameters.categories = categories; data.plugin.options.templateParameters.sections = sections; resolve(data); }); }), }), ]; } ``` ![Static Content](/api/media/serve/images/2024/04/2146204698.png) ![Static Content Preview](/api/media/serve/images/2024/04/3290655478.png) ![React-rendered Content](/api/media/serve/images/2024/04/4284217883.png) As the screenshots show: on first load the browser receives the pre-rendered static HTML; once the scripts execute, React mounts onto the root node and replaces the static content. ## Conclusion This approach has one limitation: it's only suitable for data that doesn't change frequently, because the page must be recompiled whenever the data changes. A better solution for dynamic data is to have the server (e.g., Spring with Thymeleaf) output HTML on every request, so the browser always gets fresh server-generated content and React takes over after hydration.