What are Server Components in Next.js?
Server Components are a new feature in Next.js that allow developers to write server-side code directly in their React components. This means that the components can be rendered on the server before being sent to the client, which can improve performance and SEO.
How do Server Components work?
When a user requests a page that contains a Server Component, Next.js will first render the component on the server. This process involves parsing the component's code, resolving its dependencies, and fetching any data that the component needs. Once the component has been rendered, Next.js will send the rendered HTML to the client.
What are the benefits of using Server Components?
There are several benefits to using Server Components, including:
- Improved performance: Server Components can improve performance by rendering the components on the server before they are sent to the client. This can reduce the amount of JavaScript that needs to be downloaded by the client, which can improve the initial load time of the page.
- Better SEO: Server Components can also improve SEO by rendering the components on the server. This means that the search engines will be able to see the rendered HTML, which can help your pages rank higher in search results.
- More flexibility: Server Components give you more flexibility in how you build your applications. You can use them to move data fetching to the server, closer to your database. You can also use them to keep large dependencies that previously would impact the client JavaScript bundle size on the server, leading to improved performance.
When to use Server and Client Components?
To simplify the decision between Server and Client Components, we recommend using Server Components (default in the app directory) until you have a use case for a Client Component.
This table summarizes the different use cases for Server and Client Components:
| What do you need to do? | Server Component | Client Component |
|---|---|---|
| Fetch data. | ☑ | ☒ |
| Access backend resources (directly) | ☑ | ☒ |
| Keep sensitive information on the server (access tokens, API keys, etc) | ☑ | ☒ |
| Keep large dependencies on the server / Reduce client-side JavaScript | ☑ | ☒ |
Add interactivity and event listeners (onClick(), onChange(), etc) |
☒ | ☑ |
Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc) |
☒ | ☑ |
| Use browser-only APIs | ☒ | ☑ |
| Use custom hooks that depend on state, effects, or browser-only APIs | ☒ | ☑ |
| Use React Class components | ☒ | ☑ |
How to use Server Components in Next.js
To use Server Components in Next.js, you need to add the export default keyword to the top of your component file. You also need to add the use server directive to the top of any asynchronous functions that you want to run on the server.
Here is an example of a Server Component:
import React from "react";
export default function ServerComponent() {
const data = fetch("https://api.example.com/data").then((res) => res.json());
return (
<div>
<h1>This is a Server Component</h1>
<p>The data from the API is: {data.name}</p>
</div>
);
}
// This function will run on the server
use server async function fetchData() {
const data = await fetch("https://api.example.com/data").then((res) => res.json());
return data;
}
Conclusion
Server Components are a powerful new feature in Next.js that can improve the performance, SEO, and flexibility of your applications. If you are looking for ways to improve your Next.js application, I encourage you to try using Server Components.
Diagram of how Server Components work
Here is a diagram of how Server Components work in Next.js:
The diagram shows that when a user requests a page that contains a Server Component, Next.js will first render the component on the server. This process involves parsing the component's code, resolving its dependencies, and fetching any data that the component needs. Once the component has been rendered, Next.js will send the rendered HTML to the client.
The client will then receive the rendered HTML and display it in the browser. The client will not need to execute any JavaScript code to render the component, which can improve performance.
Sharing fetch requests between Server Components
When fetching data, you may want to share the result of a fetch between a page or layout and some of its children components. This is an unnecessary coupling between the components and can lead to passing props back and forth between components.
Instead, we recommend colocating data fetching alongside the component that consumes the data. fetch requests are automatically deduped in Server Components, so each route segment can request exactly the data it needs without worrying about duplicate requests. Next.js will read the same value from the fetch cache.
I hope this blog has helped you understand Server Components in Next.js. If you have any questions, please feel free to leave a comment below.
Credits-
Top comments (1)
Thanks 👍