Why server components are the default in NextJS

Introduction

Server components run on the server by default to make web apps faster and simpler. They send only the needed HTML to the browser, saving time and data.

When you want faster page loads by sending ready HTML from the server.

When you want to keep sensitive data or API keys safe on the server.

When you want to reduce the amount of JavaScript sent to the browser.

When you want simpler code that doesn't need to handle browser events.

When you want to improve SEO by having fully rendered pages on the server.

Syntax

NextJS

export default function MyComponent() {
  return <h1>Hello from Server Component</h1>
}

By default, components in Next.js 13+ are server components unless marked otherwise.

You can make a component a client component by adding 'use client' at the top.

Examples

This is a simple server component that renders a paragraph.

NextJS

export default function ServerComponent() {
  return <p>This runs on the server.</p>
}

This is a client component because it uses state and browser events.

NextJS

'use client'

import { useState } from 'react'

export default function ClientComponent() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
}

Sample Program

This component runs on the server by default and sends HTML to the browser.

NextJS

export default function Greeting() {
  return <h2>Welcome to Server Components!</h2>
}

Important Notes

Server components cannot use browser-only APIs like 'window' or 'document'.

They help reduce JavaScript bundle size sent to the client.

Use client components only when you need interactivity like event handlers.

Summary

Server components run on the server by default to improve speed and security.

They send only HTML to the browser, reducing data and load time.

Use client components only when you need browser features like state or events.