![\"Diagram](\"/images/journal-inline-static-prerender-shells-spa.webp\")
\n div id root with a spinner is a performance and SEO anti-pattern on public URLs. Crawlers may index the spinner era. Users stare at white while parse and compile run. I replace that with static HTML mirroring the hydrated hero.
\n\nPrerender is not full SSR on Node for every request. It is build-time or edge-cached HTML aligned with client components.
\n\nFirebase Hosting rewrites can serve shell HTML per route while API stays dynamic. Config is infrastructure as code in firebase.json. Lighthouse sometimes scores shell-only HTML highly then drops after hydration. Test both states.
\n\n<!-- prerender shell: real title + article before bundle -->\n<main>\n <article>\n <h1>Field note title</h1>\n <p>Summary paragraph crawlers can read.</p>\n </article>\n</main>\n
H1, lead paragraph, primary image with dimensions, nav links, and critical CSS inline or linked. Not the entire app state. Below-fold widgets can stay placeholders with reserved height.
\n\nJournal entries on briancrabtree.me ship body HTML in content files; React enhances navigation and likes, it does not author the article twice.
\n\nEdge functions that prerender on first request are middle ground between build-time and SSR. Cache TTL defines cost. Service worker precache of shell HTML must version on content hash, not only JS hash.
\n\nBuild pipeline generates shell from same data source as client routes. MDX, content collections, or custom script reading Firestore export. Drift happens when marketing edits CMS but static job does not run; CI must fail if shell stale.
\n\nSitemap XML should list prerendered URLs only after shell job completes in CI, not on developer laptop manual run.
\n\nPartial hydration experiments label interactive islands explicitly in HTML comments for future maintainers.
\n\nDo not display none the shell until React mounts. That delays LCP to hydration. I style shell and client to match, hydrate in place, remove only duplicate nodes if unavoidable with careful keys.
\n\nStructured data in shell must match JSON client router will hydrate or rich results get inconsistent dates.
\n\nEdge cache purge API hooks into CMS publish button save editor workflow time.
\n\nVite prerender plugin, react-snap legacy patterns, Astro static pages with islands, Next static export where dynamic needs are modest. Pick based on deploy target: S3 plus CDN, Firebase Hosting, or nginx static root.
\n\nI test curl -A Googlebot on shell HTML without executing JS. What you see is what many crawlers index.
\n\nLegal cookie text in shell must match post-hydration consent state or regulators notice.
\n\nLCP element should be in first HTML chunk. View source must show copy. PSI mobile should not show blank Speed Index frames. If shell works, lab scores stabilize across runs more than spinner apps.
\n\nPrerender does not remove need for accessible interactive components after hydration. Keyboard test post-hydration still required.
\n\nA/B headline tests on shell need server assignment, not client-only randomness, for SEO consistency.
\n\nSend your view-source screenshot. If root is empty, I will sketch shell fields for your top three URLs and wire build step. Usually days, not months.
\n\nRollback plan: keep previous shell artifact in CDN versioned folder if bad copy ships without broken JS deploy.
\n\nInternationalized shells need hreflang in head before JS locale detection runs. For a related angle I keep coming back to, see Technical SEO Audit for React SPAs (What Crawlers Actually See).
","tags":["prerender","spa","performance"],"views":53}