` contains only whitespace or tiny loader markup, it's a SPA shell — flag.
### Runtime-only meta detection
Look for:
- `react-helmet-async` usage without `HelmetProvider` in SSR server entry.
- `vue-meta` / `@vueuse/head` without SSR plugin.
- Direct `document.title = ...` / `document.querySelector('meta[name=description]').content = ...` writes.
If meta is only set at runtime, it won't be in the initial response → crawlers miss it.
### HashRouter detection
```jsx
// React Router HashRouter
import { HashRouter } from 'react-router-dom';
...
// Vue Router hash mode
createRouter({ history: createWebHashHistory(), ... })
```
Hash routes like `/#/about` are fragments — Google does NOT index them as separate URLs.
Always use `BrowserRouter` / `createWebHistory()` for public routes.
### Hydration mismatch signals
```jsx
// Red flag: different output based on environment
function Component() {
if (typeof window !== 'undefined') {
return
;
}
return
;
}
// Red flag: overuse of suppressHydrationWarning
{Math.random()} {/* Masking a real bug */}
```
The skill flags `>3` occurrences of `suppressHydrationWarning` in the codebase as a heuristic WARN.
---
## Prerendering Strategies for SPAs
When migration to Next.js / Remix isn't feasible, SPA prerendering is the fallback:
### react-snap (CRA, Vite-React)
Runs a headless browser against the SPA at build time, snapshots the DOM per route, writes static HTML.
```json
// package.json
{
"scripts": {
"postbuild": "react-snap"
},
"reactSnap": {
"source": "build",
"include": ["/", "/about", "/pricing"]
}
}
```
Works for: static content sites. Breaks on: dynamic/authenticated routes.
### vite-plugin-prerender
Same approach for Vite projects.
### vike (formerly vite-plugin-ssr)
Full SSR for Vite projects. More invasive than prerender plugins but more capable.
### prerender-spa-plugin (Webpack)
Older Webpack-based solution for Vue/React SPAs.
### Dynamic rendering (legacy — Google deprecated)
`prerender.io`, `rendertron`: intercept requests from crawler user agents, serve prerendered HTML.
Google's recommendation as of 2024: use SSR/SSG instead. Dynamic rendering is a fallback, not a solution — detected as INFO severity, not HIGH.
---
## Quick Detection Reference (for seo-validate Category 7)
| Check | Signal | Severity |
|-------|--------|----------|
| `public/index.html` mount div empty | CSR confirmed | HIGH (if content site) |
| `package.json` has `react-scripts` + no `react-snap` | CRA SPA no prerender | HIGH |
| `react` + `vite` + no `vike`/`vite-plugin-ssr`/prerender | Vite SPA no prerender | HIGH |
| `@angular/core` + no `@angular/ssr` + no `@nguniversal/*` | Angular SPA no SSR | HIGH |
| `vue` + no `nuxt` + no SSR plugin | Vue SPA no SSR | HIGH |
| `HashRouter` or `createWebHashHistory` on public route | Hash routing | HIGH |
| `dynamic(..., { ssr: false })` on hero component | LCP blocked + CSR | HIGH |
| `ssr: false` in `nuxt.config` | Nuxt SPA mode | WARN |
| `export const ssr = false` in SvelteKit route | Route is CSR | WARN |
| `client:only` on Astro hero component | Component is CSR | WARN |
| `'use client'` at top of Next.js page with no server-side logic | Forced CSR boundary | WARN |
| `react-helmet-async` without `HelmetProvider` in server entry | Meta only client-side | HIGH |
| `document.title = ...` in component code | Runtime-only title | HIGH |
| `suppressHydrationWarning` ≥4 occurrences | Likely masked mismatch | WARN |
| `prerender.io` / `rendertron` config | Legacy dynamic rendering | INFO |
---
## When to NOT Flag
Not every SPA needs SEO. The skill should NOT flag rendering-mode HIGH for:
- Auth-gated dashboards, admin panels (no public routes to index).
- Internal tools, intranet apps.
- Mobile app backends with no web UI.
- Electron/desktop apps.
Heuristic: if no public routes exist (check `robots.txt`, presence of marketing pages, landing page in a layout), downgrade SPA findings to INFO.
For mixed cases (Next.js app with marketing routes + dashboard routes), flag per-route: marketing routes should be SSG/SSR; dashboard can be CSR-heavy.
---
## References
- Google Search Central on JavaScript SEO: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics
- web.dev rendering patterns: https://web.dev/rendering-on-the-web/
- Next.js rendering: https://nextjs.org/docs/app/building-your-application/rendering
- Nuxt rendering: https://nuxt.com/docs/guide/concepts/rendering
- Astro rendering: https://docs.astro.build/en/guides/rendering/
- Gatsby rendering: https://www.gatsbyjs.com/docs/conceptual/rendering-options/
- SvelteKit rendering: https://kit.svelte.dev/docs/page-options
- Angular SSR: https://angular.dev/guide/ssr
- vike (vite-plugin-ssr): https://vike.dev/
- react-snap: https://github.com/stereobooster/react-snap