Server-rendering Relay without a framework

· 1 min read

The pattern is three steps:

  1. The page’s frontmatter runs the Relay query against the API and keeps the resulting record source.
  2. A React component tree renders to HTML from a Relay environment built on those records, so useLazyLoadQuery never suspends or hits the network.
  3. If a page has interactive parts, the same records are passed to the island as a prop and the client environment is seeded from them. Otherwise nothing is sent to the browser.