Recommended Free Tools
If you prerendered a React single-page app for search and crawlers still find thin pages with no paths to the rest of the site, the cause is usually markup rather than timing. Prerendering saves whatever the component tree outputs at build time. If your navigation relies on click handlers, buttons, or router props without an href, the saved HTML contains no links to follow. The fix is to make sure each route’s HTML contains real anchor elements pointing at the pages you want discovered, then verify that output route by route.
Why prerendering can leave routes without links
Prerendering is a rendering strategy. It captures the HTML your app produces for a given route at a given moment, and nothing more. It does not inspect your site for the connections a search engine needs. A page can be fully prerendered, with its headline and body text in place, and still have no internal links if the navigation was never rendered as anchors in the first place.
As an Amazon Associate I earn from qualifying purchases.
Three situations cause most of the gaps:
- Navigation built from click handlers. Menus, cards, and “related articles” lists that call a navigate function on click produce elements with no destination in the markup.
- Links that appear only after interaction. Menus that open on hover or on click, tabs, and “load more” controls may never show their links in the initial output.
- A generic shell for every path. If the build writes one
index.htmland every route loads its content in the browser, each route’s first response is the same empty container.
Step 1: Check the raw HTML for each route
Start with what the server returns before any JavaScript runs. Work through your list of important URLs, such as landing pages, category pages, and articles, in this order:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute- Write the list down. Include the canonical path of every public page you want discovered, and confirm each one resolves with a 200 status.
- Read the source, not the inspector. In a desktop browser, open the page and choose View Page Source (or press Ctrl+U on Windows and Linux, or Cmd+Option+U on macOS). Do not use the Elements panel of developer tools for this step, because it shows the DOM after JavaScript has run.
- Or fetch it from the command line. Run
curl -s https://www.example.com/guides/example-guide -o route.html, thengrep -o '<a [^>]*href="[^"]*"' route.htmlto list every anchor with an href in the response. Replace the domain and path with your own. - Interpret the result. If the file contains the route’s headline and body text and anchors to the other pages, the build is emitting route content. If it contains only an empty root element and script tags, the route is a shared shell, and the build or server is not writing route-specific HTML.
Repeat the check for a sample of each page type, not just the homepage. Templates often share a bug, but a route that was added later can be missing from the prerender list entirely.
#1 Best Overall
Step 2: Compare the rendered DOM and check Google’s view
Once the raw response is clear, load the same page in a browser with JavaScript running and inspect the final DOM in the Elements panel. Compare it with the source from Step 1. Links that exist only in the rendered DOM are a weaker signal than links present in the raw HTML.
Google’s JavaScript documentation, titled Understand JavaScript SEO Basics, explains that Google processes pages in stages and renders JavaScript later, with timing that depends on resource availability. Google parses the rendered HTML for links, but the first pass may not include links added by scripts. For the page Google actually sees, use URL Inspection in Search Console, enter the live URL, and open the rendered HTML view. Confirm that your anchors appear there.
Step 3: Replace non-link navigation with real anchors
Google’s SEO Link Best Practices guidance is direct about the markup it can follow. In its words, “Generally, Google can only crawl your link if it’s an <a> HTML element (also known as anchor element) with an href attribute.” The table below covers the patterns you are most likely to find in a React codebase.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →| Markup pattern | Followed as a link? | Fix |
|---|---|---|
<a href="/guides/example">Example guide</a> |
Yes | Keep. This is the target markup. |
A router link component that renders an <a href> in its output |
Yes, when the href is present in the HTML | Confirm in the raw response from Step 1. |
<span onClick={() => navigate('/guides/example')}> |
No | Replace with an anchor that has an href. |
<button onClick={...}> used for navigation |
No | Use an anchor for navigation and a button only for actions. |
<a onClick={...}> without an href |
Not reliable | Add the href to the real destination. |
<span href="/guides/example"> |
No | Change the element to an anchor. |
Use descriptive anchor text that names the destination, such as “prerendering checklist” rather than “click here.” Keep the href as a resolvable path that returns a 200 status. Avoid hash-only or script-only destinations for pages you want discovered.
Step 4: Give every important page an inbound internal link
Google recommends that “every page you care about should have a link from at least one other page on your site.” A prerendered route with a perfect head and body still needs at least one link from another page. Check these places, in roughly this order of value:
- The main navigation or header, for top-level sections.
- Category or hub pages that list their child articles or products with anchors.
- Contextual links inside article bodies, where the link adds information for the reader.
- Footer or breadcrumb links for secondary routes.
- Your XML sitemap, which supplements internal links for discovery. It does not replace navigation that readers use, and it cannot make a page’s content visible on its own.
A useful audit is to crawl your own site with a link-following tool that reads the raw HTML, then list any important URL that has zero inbound anchors. Those are the pages to fix first.
Step 5: Decide which routes need HTML on the first response
Restoring links is only part of the job. If a route’s content is generated only in the browser, the links on that route are missing from its first response too. Pick one of three approaches per route group. The React Router documentation covers the first two under Single Page Application (SPA) and Pre-Rendering, and React’s documentation covers the static prerender API used for the third.
| Approach | Route coverage | Content freshness | Build and hosting complexity | Links in first HTML response |
|---|---|---|---|---|
| SPA mode with a shared shell | Client-rendered for all routes | Live in the browser after load | Lowest: one index.html served for app paths | Not stated for route-specific links; the shell itself contains none |
| Route-based prerendering of selected paths | Only the paths you select, with an SPA fallback for others | Fixed at build time unless loaders fetch current data during the build | Moderate: build step per selected path and loader data | Yes, for selected paths, when the rendered output includes anchors |
| Server rendering | Any route the server handles | Per request, using server data | Highest: a running server or edge runtime | Yes, when the server renders anchors into the response |
A practical rule: if a route is one a search engine must read, prerender it or render it on the server. If a route is behind a login or is mostly interactive tooling, a shared shell may be acceptable. Be aware that an SPA fallback returns the shell for paths that do not exist, so unknown URLs may still receive a 200 status. Configure your server to return a real 404 for unknown paths if you need that distinction.
Best Value
Step 6: Verify hydration uses the same inputs
React’s prerender API produces static HTML from a React tree, and the browser then attaches event handlers with hydrateRoot. Hydration only works when the client renders the same markup the server or prerender step produced. The React documentation for prerender notes that server and client render inputs should match to avoid hydration errors.
When prerendering a route, check these inputs:
- The same route path and the same loaded data are passed to both the prerender call and the client.
- The asset map used for script tags matches the build that produced the HTML.
- Browser-only values such as
window.innerWidthor the current time are not used during the first render.
A hydration mismatch means the page can show different content after load than the HTML a crawler received. Fix mismatches before you judge the prerendered output, because a broken hydration can remove the links that were rendered correctly.
Step 7: Recheck status codes and page-specific content
After changes are deployed, rerun Step 1 against the production domain, not a local preview. Confirm that each important URL returns a 200 status, a title and first heading that belong to that page, and the anchors you expect. Google’s documentation notes that rendering may be skipped for non-200 responses, such as errors, so a route that returns an error at the server level will not be rendered regardless of its HTML.
Free tools Windows power users keep installed
One-click scans. No signup required.
Troubleshooting by symptom
- The raw response has no anchors, but the rendered DOM does. Your links depend on JavaScript. Emit them in the prerendered or server HTML, then recheck with URL Inspection.
- Every route returns the same HTML. The build is writing one shell. Prerender each important path to its own file, such as
dist/guides/example/index.html, or render it on the server. - Anchors exist in the response, but a page is still not discovered. Check that the linking pages are themselves reachable and return 200, and that robots directives do not block them. Confirm with URL Inspection. Google’s documentation describes crawling and rendering, but a link alone does not guarantee indexing.
- The prerendered HTML and the hydrated page differ. Compare route selection, serialized data, and build assets. Treat any hydration error as a signal that the prerendered links may not match what users see.
- Links are visible on screen but not in the HTML. The navigation is built with click handlers or spans. Replace them with anchors as shown in Step 3.
Once the anchors appear in each route’s raw response and in URL Inspection’s rendered HTML, the prerendered output is doing what it was meant to do.
Quick Recap
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.
