diff --git a/docs/source/config.json b/docs/source/config.json index bcf62a9d297..7b44ded2134 100644 --- a/docs/source/config.json +++ b/docs/source/config.json @@ -54,11 +54,11 @@ }, "Server-Side Rendering and React Server Components": { "Introduction": "/ssr-and-rsc/introduction", - "Usage in React Server Components": "", - "Usage in React Client Components with streaming SSR": "", - "Setting up with Next.js": "", - "Setting up a custon \"streaming SSR\" server": "", - "Classic Server-side rendering with `renderToString`": "/ssr-and-rsc/server-side-rendering-string", + "Usage in React Server Components": "/ssr-and-rsc/usage-in-rsc.mdx", + "Usage in React Client Components with streaming SSR": "/ssr-and-rsc/usage-in-client-components.mdx", + "Setting up with Next.js": "/ssr-and-rsc/nextjs.mdx", + "Setting up a custom \"streaming SSR\" server": "/ssr-and-rsc/custom-streaming-ssr.mdx", + "Classic Server-side rendering with `renderToString`": "/ssr-and-rsc/server-side-rendering-string" }, "Performance": { "Improving performance": "/performance/performance", diff --git a/docs/source/ssr-and-rsc/custom-streaming-ssr.mdx b/docs/source/ssr-and-rsc/custom-streaming-ssr.mdx new file mode 100644 index 00000000000..eeb51d4ef33 --- /dev/null +++ b/docs/source/ssr-and-rsc/custom-streaming-ssr.mdx @@ -0,0 +1,3 @@ +--- +title: Setting up Apollo Client with a custom "streaming SSR" server +--- diff --git a/docs/source/ssr-and-rsc/introduction.mdx b/docs/source/ssr-and-rsc/introduction.mdx index 0b83c706bf5..67ee794e984 100644 --- a/docs/source/ssr-and-rsc/introduction.mdx +++ b/docs/source/ssr-and-rsc/introduction.mdx @@ -4,10 +4,11 @@ title: Server-Side Rendering and React Server Components - Introduction # Disambiguation of essential terms -Talking about Server-Side Rendering (SSR) and React Server Components (RSC), it's important to understand the distinction between classic SSR and the modern approaches used in frameworks like Next.js. +When discussing Server-Side Rendering (SSR) and React Server Components (RSC), it's necessary to understand the distinction between classic SSR and the modern approaches used in frameworks like Next.js. * **Classic SSR**, typically executed using React's `renderToString`, involves rendering the entire React component tree on the server into a static HTML string, which is then sent to the browser. -This HTML will be generated in one final pass after all data dependencies have been resolved, which can take a significant amount of time. +First, your React tree will render one or multiple times to start all network requests your page needs to render successfully. +Once all these network requests have finished, one final render pass will generate the HTML sent to the browser. Only after that can that HTML be transported to the Browser, where a hydration pass has to happen before the page becomes interactive, often leading to a delay before interactive elements become functional. This approach is explained in the "Classic Server-side rendering with `renderToString`" section. @@ -19,3 +20,6 @@ When the term **SSR** is used outside the "Classic SSR" section, it refers to st A router can replace the RSC contents of a page by re-initializing an RSC render on the RSC server, and replace the static HTML of the page with the new RSC contents, while leaving interactive React Client Components intact. * React **Client Components** are the interactive components that React has been known for the longest time of its existence, rendered either in SSR or after hydration directly in the browser. +You can read more on how React "draws the line" between Client and Server Components in the [React documentation](https://react.dev/reference/react/use-client) + +Generally, most custom implementations will use classic SSR, while frameworks like Next.js and Remix might use streaming SSR and RSC. It is possible to use streaming SSR in a manual setup, but at this point, it still requires a lot of setup. Using RSC without a framework is generally not recommended. diff --git a/docs/source/ssr-and-rsc/nextjs.mdx b/docs/source/ssr-and-rsc/nextjs.mdx new file mode 100644 index 00000000000..4ebc737397d --- /dev/null +++ b/docs/source/ssr-and-rsc/nextjs.mdx @@ -0,0 +1,3 @@ +--- +title: Setting up Apollo Client with Next.js +--- diff --git a/docs/source/ssr-and-rsc/usage-in-client-components.mdx b/docs/source/ssr-and-rsc/usage-in-client-components.mdx new file mode 100644 index 00000000000..378171c202d --- /dev/null +++ b/docs/source/ssr-and-rsc/usage-in-client-components.mdx @@ -0,0 +1,3 @@ +--- +title: Using Apollo Client in React Client Components with streaming SSR +--- diff --git a/docs/source/ssr-and-rsc/usage-in-rsc.mdx b/docs/source/ssr-and-rsc/usage-in-rsc.mdx new file mode 100644 index 00000000000..06faa183ff6 --- /dev/null +++ b/docs/source/ssr-and-rsc/usage-in-rsc.mdx @@ -0,0 +1,3 @@ +--- +title: Using Apollo Client in React Server Components +---