React Foundations: Server and Client Components | Next.js

nextjs.org · 949 words · saved by 1 readers

To understand how Server and Client Components work, it's helpful to be familiar with two foundational web concepts: In the context of web applications: Each environment has its own set of capabilities and constraints. For example, by moving rendering and data fetching to the server, you can reduce the amount of code sent to the client, which can improve your application's performance. But, as you learned earlier, to make your UI interactive, you need to update the DOM on the client. Therefore, the code you write for the server and the client is not always the same. Certain operations (e.g. data fetching or managing user state) are better suited for one environment over the other. The Network Boundary is a conceptual line that separates the different environments. In React, you choose where to place the network boundary in your component tree. For example, you can fetch data and render a user's posts on the server (using Server Components), then render the interactive LikeButton for ea

10 Chapter 10 Server and Client Components To understand how Server and Client Components work, it's helpful to be familiar with two foundational web concepts: The environments your application code can be executed in: the server and the client. The network boundary that separates server and client code. Server and Client Environments In the context of web applications: The client refers to the browser on a user’s device that sends a request to a server for your application code. It then turns the response it receives from the server into an interface the user can interact with. The server ref

React Foundations: Server and Client Components | Next.js

related reading