How I Built a .NET + React Islands Site With a Playwright Snapshot Worker

A .NET and React Islands site was built using ASP.NET Core 10 Razor Pages, React islands, PostgreSQL, and a Node/Playwright worker. The site features catalog pages, a journal, search, and a stay inquiry flow. The challenge was rendering interactive pages without relying on browser rendering for every visitor. The solution involved moving browser execution to publication time.

Razor generates the source document, while a background Chromium process mounts islands, validates the result, and saves the completed HTML in PostgreSQL. The public gateway serves this saved document, allowing the visitor's browser to hydrate the already populated islands for interaction. This approach ensures crawlable first-response HTML and hydration without compromising either aspect.

ASP.NET Core Razor Pages handle public routes, catalog, article content, HTML shell, SEO, and JavaScript-free results. React islands manage interactive state, search controls, gallery, mobile navigation, and inquiry form interaction. The admin interface is a separate protected React Router SPA, distinct from the public pages.

When a visitor accesses a public page, the snapshot gateway looks up the published HTML document by path. The document includes Razor content and gallery markup produced by Chromium. The visitor's browser then hydrates the controls, enabling interaction with JavaScript-enabled features.

The snapshot process involves the Playwright worker making a request to a protected source page. It validates the HTML, sets the `__SNAPSHOT_READY__` flag, and ensures successful browser execution before saving the document. This method provides crawlable, indexable content while allowing interactive controls as enhancements dependent on JavaScript.