What are React server components? | Shalini Chauhan
Shared on React
What are React server components?
React Server Components allows the server and the client to collaborate in rendering your React application. Here’s a quick illustration from the React team, showing what the end goal is: a React tree, where the orange components rendered on the server, and blue components are rendered on the client.
Isn’t that “server-side rendering”?
React Server Component is not server-side rendering (SSR)! It’s a bit confusing because they both have “server” in the name, and they’re both doing work on the server. But it is much easier to understand them as two separate features. Using RSC does not require using SSR, and vice versa!
SSR simulates an environment for rendering a React tree into raw html; it does not differentiate between server and client components, and it renders them the same way! In short, React Server Components makes it possible for the server and the browser to do what they do best.
Server components can focus on fetching data and rendering content, and client components can focus on stateful interactivity, resulting in faster page loads, smaller javascript bundle sizes, and a better user experience. Let’s gain some intuition first about how this works.
Kids love decorating cupcakes, but they’re not so into baking them. Asking them to make and decorate cupcakes from scratch would be an (adorable) nightmare. We would need to hand them bags of flour and sugar, sticks of butter, give them access to the oven, read them a ton of instructions, and take the whole day. But hey, we can do the baking part much faster;
if we do some of the work upfront — by first baking the cupcakes and making the frosting, and handing those to kids, instead of the raw ingredients — they can get to the fun decorating part much faster! And better still, we don’t need to worry about them using the oven at all. Win!
React server components is all about enabling this division of labor — let the server do what it can do better upfront, before handing things off to the browser to finish the rest. And in doing so, there are fewer things for the server to hand off — instead of a whole bag of flour and a friggin’ oven, 12 little cupcakes are much more efficient to transport!
React
Pages and Layouts in Nextjs- When building projects with Next.js, we typically create an entire user interface by assembling isolated components. However, some parts of the interface require the same code snippets across multiple routes — for example, the navigation header, footer, and sidebar. To manage this, we use layouts to structure the interface in a way that contains shared code snippets. Next.js recommends starting a new project with the App Router. However, we’ll discuss how to implement layouts and nested layouts with the Pages Router for users who have yet to migrate to the new Next.js routing system.
How to Parse JSON in Dart/Flutter Parsing JSON is a very common task for apps that need to fetch data from the Internet. And depending on how much JSON data you need to process, you have two options: write all the JSON parsing code manually automate the process with code generation Encoding and Decoding JSON When a JSON response is sent over the network, the entire payload is encoded as a string. But inside our Flutter apps, we don't want to extract the data from a string manually: