diff --git a/content/blog/what-are-react-server-components/index.md b/content/blog/what-are-react-server-components/index.md index b007c703..c23e2d8f 100644 --- a/content/blog/what-are-react-server-components/index.md +++ b/content/blog/what-are-react-server-components/index.md @@ -1,10 +1,10 @@ --- { title: "What are React Server Components (RSCs)?", - description: "", - published: '2023-12-14T21:52:59.284Z', + description: "React Server Components have been a topic of regular discussion in the WebDev space as-of late. What are they? How do they improve the SSR story for React? Let's take a look.", + published: '2023-12-16T21:52:59.284Z', authors: ['crutchcorn'], - tags: ['react', 'webdev'], + tags: ['react', 'webdev', 'javascript'], attached: [], license: 'cc-by-4', collection: "react-beyond-the-render", @@ -26,7 +26,7 @@ See, up to that point Next.js and other React SSR solutions had one way of doing -![// TODO: Write alt](./ssr_slowdown.svg) +![The developer ships SSR and framework code to the server, which produces HTML. This HTML/CSS is then sent to the user machine where it re-initializes on the client's browser](./ssr_slowdown.svg) This process is called "Rehydration" and while it _worked_ the way it did before, it introduced a new performance problem. Rehydration could be needlessly expensive if most of your content coming from the server was going to be static anyway. This was a huge problem that the React team had to solve. @@ -53,7 +53,7 @@ function App() { When executed, it might look something like the following process: -![// TODO: Write alt](./react-server-components.svg) +![The developer authors JSX with distinct client and server components. These components are ALL rendered on the server, but only the client components are re-rendered on the client](./react-server-components.svg) Here, we can see that ``, ``, and all of their children will be re-initialized on the client. Meanwhile the `