Nextjs is a React framework that offers server-side rendering (SSR) that enables developers to build web applications that run on server.
In Nextjs 13+ that comes with App Router, there’s new feature Server Components. Server Components are a new way to create component that render on the server. Server component execute only on the server and never sent to the browser.
By default, all components inside the /app folder are Server Components. This means we cannot use useEffect, useState or other hooks that run only on the client. However, we can create a separate component specifically for client-side feature and add "use client" at top of the component file to indicate that it should run on client / browser side.
There are some benefits we will get by using Server Components:
- Faster performance, because no javascript sent to the client
- Better SEO, HTML is rendered on the server before sent to client (pre-rendered)
- Smaller bundle size, because no javascript sent to the client so less javascript to load on browser
- Direct access to API, we don’t need extra api call. Variables assigned with value from API can be used directly because the request happens during server rendering. By the time the variables are sent to client, it already contain the actual data. Server components also support async/await at the top level.