Making a React app visible to bots that don't run JavaScript

A modern React app renders almost everything in the browser. A user's device fetches a nearly empty HTML shell, downloads the JavaScript bundle, and only then builds the actual page. For a human visitor with a modern browser, that's invisible; the page just appears. For a crawler that doesn't execute JavaScript, and a large share of the bots indexing content for AI answer engines fall into that category, that empty shell is all there is to see. No headline, no description, no content. Just a <div id="root"> waiting for code that never runs.

MamaPapa's public marketing pages, welcome, features, pricing, trust, and the rest, are exactly this kind of React app. Making them visible to non-JavaScript crawlers meant generating real, static HTML for each of them ahead of time.

Rendering the app once, at build time, and saving the result

The approach is prerendering: after the production build finishes, a script starts a local preview server serving that build, then uses a headless browser to visit each public route the same way a real visitor's browser would, letting the page fully render, and saves the resulting HTML to disk. That saved file becomes what gets served for that specific route, instead of the generic empty shell, while the rest of the app still works exactly as before for anyone whose browser does run the JavaScript.

This only applies to the public, unauthenticated marketing routes, welcome, features, pricing, and the like. Nothing behind login gets prerendered; there's no crawler that should be indexing a signed-in user's private album pages, and prerendering them would serve no purpose beyond wasted build time.

Why this instead of switching frameworks

The alternative would be moving to a framework with built-in server rendering, which is a much bigger change for an app that already works well as a client-rendered SPA everywhere except this one specific problem. Prerendering solves the actual issue, crawlers that can't run JavaScript seeing nothing, without touching how the rest of the app is built or deployed. It's a targeted fix scoped to exactly the pages that need to be publicly discoverable, not a rewrite justified by one narrow requirement.

The result: two audiences, one codebase

A visitor with JavaScript enabled still gets the same interactive React app as always; the prerendered HTML is just what their browser starts from before the JavaScript bundle takes over and re-renders normally. A crawler that never executes that JavaScript instead sees the fully rendered content directly in the initial response, the actual headline, the actual description, the actual page structure, because that's genuinely what's sitting in the HTML file it received.

Getting this right matters more now than it did a few years ago. It's not just classic search engines deciding whether to index a page anymore; it's whether an AI answer engine can read a page at all when deciding whether to reference it in response to someone's question. An app that only renders for JavaScript-capable visitors is invisible to a meaningful and growing share of how people now find things.

More on what MamaPapa actually offers is on its product page.