This repository is a proof of concept using Next.js, React Server Components and Relay.
The usual way to use Relay with Next.js Server Side Rendering has the following steps:
A similar flow is also possible with React Server Components:
However React Server Components introduced a way to serialize promises. Serialized promises opens up a new way to use Relay with React Server Components:
With this approach, it is possible to start hydrating the Relay store on the client while the server is still streaming the response. This can potentially reduce the time to first byte and improve the perceived performance of the application.
Especially with @defer
and @stream
directives, it is possible to start rendering the page with the initial data while the server is still fetching the rest of the data.
Demo: https://relay-rsc-poc.vercel.app/ Example Code
<FilmTitle>
is a React Server Component
<FilmDirector>
is a React Client Component
export default async function Home() {
const data = await getStreamableQuery<pageQuery>(
graphql`
query pageQuery {
films {
id
...FilmTitle
...FilmDirector @defer
}
}
`,
{}
);
return (
<StreamedHydration responses={[data]}>
<main>
<h1>Films</h1>
{data.films?.map(
(film) =>
film && (
<>
<FilmTitle filmKey={film} />
<Suspense key={film.id} fallback={<div>🌀 Loading...</div>}>
<FilmDirector filmKey={film} />
</Suspense>
</>
)
)}
</main>
</StreamedHydration>
);
}
There are similar POCs: