For a utility suite with 30 known calculator URLs, generate a static HTML page for each URL during the build, then hydrate pages in the browser where calculator controls need interactivity. React Router’s framework mode supports this pattern through explicit prerender paths. Choose whether to keep a runtime server for ungenerated paths or deploy the generated output as static files; the right choice depends on route predictability, data freshness, and hosting requirements.
What pre-rendering changes for a 30-calculator site
Pre-rendering moves initial page generation from the visitor’s browser to the build. A client-only single-page app typically relies on JavaScript running in the browser to create page content; a pre-rendered route can instead return HTML already containing its initial content. Hydration can attach client behavior to that HTML so calculator inputs and controls work interactively.
As an Amazon Associate I earn from qualifying purchases.
React Router describes pre-rendering as a build-time operation that generates static HTML and client navigation data for a list of URLs. It does not publish a performance benchmark or route-count guarantee for a 30-page site. Measure build duration, generated output size, client bundle and hydration cost, and direct URL behavior in your own project before making performance or SEO claims.
Choose where routes are rendered and served
| Approach | Where initial output is generated | Deployment consequence | Good fit when |
|---|---|---|---|
| Client-side rendering | In the visitor’s browser | Typically requires client-side route handling and JavaScript to render page content. | Routes or content are not suitable for build-time generation, or the app is intentionally client-rendered. |
| Pre-rendering with runtime SSR enabled | Known routes at build time; other requests can be handled by a runtime server | Deploy generated pages alongside the runtime server, which can serve paths not generated ahead of time. | You want static output for known calculators plus a server-side fallback for routes that arise later. |
Pre-rendering with ssr: false |
Known routes at build time | Deploy generated files to static hosting. There is no runtime route server for route actions or response headers. | All needed routes are known at build time and the deployment can serve their generated files. |
| Request-time SSR | On a server when each request arrives | Requires a runtime server. | Initial output depends on request-time conditions or routes cannot be generated ahead of time. |
React describes client rendering, server rendering, and static pre-rendering as available rendering strategies through frameworks. The framework documentation explains these mechanics; it does not establish that one option will rank better or load faster for every site.
#1 Best Overall
Enumerate the calculator URLs explicitly
In React Router framework mode, prerender: true covers static paths inferred from route definitions. Dynamic parameter routes need concrete values, so a boolean setting cannot generate every possible calculator URL automatically. For a defined suite, use an explicit list or a prerender callback that returns the canonical paths you want built.
import { type Config } from "@react-router/dev/config";
export default {
prerender: [
"/calculators/percentage",
"/calculators/loan-payment",
"/calculators/unit-converter",
],
} satisfies Config;The paths above illustrate the configuration shape only; replace them with your app’s actual route scheme. Before building, validate that the path list includes each intended calculator, uses the same canonical spelling and trailing-slash convention as your app, and supplies actual values for every dynamic parameter. The React Router pre-rendering guide documents a boolean, array, or callback approach and the generated output: React Router: Pre-Rendering.
Account for build-time data and freshness
Loaders for pre-rendered routes run during the build, using the same route logic used for server rendering. That means data embedded in a calculator page reflects what the loader obtains when the build runs, not necessarily what a visitor’s later request would have obtained from a changing source.
- Keep build-time data for stable explanatory content, defaults, or reference values when that matches the product’s freshness needs.
- For frequently changing inputs, decide whether to refresh through a new build, fetch data in the browser, or use a runtime server. The appropriate choice depends on the data and host; the framework documentation does not prescribe an update cadence.
- Check loader behavior in the build environment, including required secrets, network access, and failure handling. A route that cannot load its required data cannot produce the intended pre-rendered page.
Make the generated page interactive safely
Static HTML can deliver the page’s initial structure and content; React hydration can then make calculator controls interactive. React’s prerender API waits for data before completing static HTML generation, while hydrateRoot is the client API for attaching React behavior to existing HTML. See React: prerender.
For React Router’s static SPA configuration, ssr: false does not mean the app is never rendered during the build: the root route is rendered to create index.html. Keep code that runs during initial rendering safe in environments without browser globals such as window. Put browser-dependent work in client-only effects or otherwise guard access so it does not execute during build-time rendering. React Router’s guidance is at Single Page App (SPA).
Choose framework support or a custom Vite pipeline
React Router offers an integrated configuration for enumerating routes and generating their output. If you are building directly on Vite’s SSR facilities instead, Vite documents generating static HTML for known routes and data using production SSR logic. That is a viable custom workflow, but the documentation does not establish that it is simpler or preferable for this utility suite. Review Vite: Server-Side Rendering (SSR) alongside the needs of your current app.
For lower-level rendering, React’s react-dom/static APIs generate static HTML. The documented prerender API uses Web Streams; in a Node.js environment, use React’s documented Node stream counterpart rather than assuming Web Streams are the right runtime interface. If the result needs client behavior, pair the static markup with the appropriate client hydration strategy.
Recommended Free Tools
Validate the architecture in the deployed project
- Build a canonical path inventory. List all 30 intended calculator URLs and supply concrete values for dynamic segments.
- Verify route content and loaders. Build the app and inspect representative generated pages to confirm expected titles, explanatory content, and build-time data are present.
- Test both navigation patterns. Open a generated calculator URL directly in a fresh browser session, then navigate to it from another route. A static host’s fallback and path-to-file mapping are host-specific and must be confirmed in that deployment.
- Exercise hydration and controls. Check that inputs, calculations, validation, and any client-side navigation behave correctly after the page loads.
- Record operational costs. Measure build duration and output size as the route list grows, and inspect client bundle and hydration costs. These are project measurements, not published guarantees for 30 routes.
- Test failure and freshness paths. Confirm how the build handles unavailable loader data and document how changing source data reaches the generated pages.
For React Router’s configuration details, see Rendering Strategies. The choice between static-only deployment and a runtime server is an operational decision as well as a rendering decision: the latter can serve paths not pre-rendered, while static-only mode needs the required routes represented in the generated files and a host configured to serve them correctly.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
