Skip to content

Commit

Permalink
wording, create more files
Browse files Browse the repository at this point in the history
  • Loading branch information
phryneas committed Apr 24, 2024
1 parent 4ec9f5b commit a218bb3
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 7 deletions.
10 changes: 5 additions & 5 deletions docs/source/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 3 additions & 0 deletions docs/source/ssr-and-rsc/custom-streaming-ssr.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
title: Setting up Apollo Client with a custom "streaming SSR" server
---
8 changes: 6 additions & 2 deletions docs/source/ssr-and-rsc/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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.
3 changes: 3 additions & 0 deletions docs/source/ssr-and-rsc/nextjs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
title: Setting up Apollo Client with Next.js
---
3 changes: 3 additions & 0 deletions docs/source/ssr-and-rsc/usage-in-client-components.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
title: Using Apollo Client in React Client Components with streaming SSR
---
3 changes: 3 additions & 0 deletions docs/source/ssr-and-rsc/usage-in-rsc.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
title: Using Apollo Client in React Server Components
---

0 comments on commit a218bb3

Please sign in to comment.