05 / 05

Discuss react-dom/static and apis available on it.

Difficulty: 8/10
Static Site Generation, React 19 Prerender APIs, Streaming & Suspense

The react-dom/static APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A framework may call them for you. Most of your components don’t need to import or use them.

Static APIs for Web Streams
  1. 1

    prerender renders a React tree to static HTML with a Readable Web Stream.

  2. 2

    These methods are only available in the environments with Web Streams, which includes browsers, Deno, and some modern edge runtimes:

Static APIs for Node.js Streams
  1. 1

    prerenderToNodeStream renders a React tree to static HTML with a Node.js Stream.

  2. 2

    These methods are only available in the environments with Node.js Streams:

Scenario Questions

0-2 years experience

  1. 1We need to generate HTML for transactional emails, like order receipts, using our existing React component library. How would you set up a Node.js script using react-dom/static to turn a <Receipt items={items} /> component into a raw HTML string?
  2. 2Imagine you are building a simple, read-only blog where pages don't need any React interactivity on the client side. If you use renderToStaticMarkup instead of renderToString, what actually changes in the final HTML sent to the browser, and why won't React hooks like useState work on the client?

2-5 years experience

  1. 1We migrated our static landing page generator to use renderToStaticMarkup to save bundle size, but now our interactive 'Newsletter Signup' form is completely dead on the client side. How would you debug this, and what is the architectural tradeoff of using react-dom/static for pages that need partial interactivity?
  2. 2We are using react-dom/static to pre-render static pages during our build step. We noticed that when a single component throws an error during the static render pass, the entire build script crashes. How would you handle errors during the static rendering phase to ensure one bad page doesn't block the entire build?

5-8 years experience

  1. 1We are designing a high-throughput documentation platform using React 19. We want to use the new prerender API from react-dom/static to generate static shells while waiting for dynamic content. How would you design the streaming and caching architecture to handle slow-loading Suspense boundaries during this static generation phase?
  2. 2Our team is building a multi-tenant CMS where users can customize their landing pages. We want to pre-render these pages to HTML on edge workers using react-dom/static's streaming APIs. How would you structure the edge function to stream the static markup incrementally to the user while managing memory constraints?

8+ years experience

  1. 1We have a massive, custom in-house framework built on React 17 using renderToString. We want to upgrade to React 19 and leverage react-dom/static's new prerender APIs for our static pages. What is your migration strategy, how do you handle the deprecation of legacy static APIs, and how do you align this with the team's CI/CD build performance?
  2. 2You are architecting a micro-frontend platform where different teams deploy static fragments of a page. Some fragments are completely static, while others require hydration. How would you design a unified rendering engine that orchestrates react-dom/static and react-dom/server to stitch these fragments together without causing hydration mismatches or duplicate asset loading?

Follow-up Questions

  • If you use renderToStaticMarkup, how would you bootstrap client-side React on the client if you later decide you need interactivity?
  • How does the React 19 prerender API handle data fetching inside Suspense boundaries compared to legacy static rendering?
  • What are the memory and CPU implications of running heavy static rendering streams on edge runtimes like Cloudflare Workers?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.