Understanding Next.js Server Components

Next.js introduced Server Components to improve performance by reducing the amount of JavaScript sent to the browser.

What are Server Components?

Server Components run on the server and send HTML to the client instead of JavaScript.

Benefits

• Faster page loads
• Reduced bundle size
• Better SEO

Example

export default async function Page() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return <div>{data.title}</div>;
}