Server Components in Next.js 15 — What You Need to Know

Why Server Components?

React Server Components (RSC) are one of the most important features in Next.js 15. They allow you to render components exclusively on the server — without sending JavaScript to the client.

Benefits at a Glance

• Smaller bundle size: Less JavaScript = faster load times
• Direct database access: No API layer needed
• Better SEO: Content is immediately available in the HTML
• Security: Sensitive data stays on the server

A Simple Example

// app/blog/page.tsx — Server Component (default)
import { prisma } from "@/lib/prisma"

export default async function BlogPage() {
  const posts = await prisma.blogPost.findMany({
    where: { status: "PUBLISHED" },
    orderBy: { publishedAt: "desc" },
  })

  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.titleEn}</h2>
          <p>{post.descriptionEn}</p>
        </article>
      ))}
    </div>
  )
}

Note: Server Components are the default in Next.js 15. You only need to add "use client" when you need browser APIs, state, or event handlers.

When Do I Need Client Components?

Feature	Server Component	Client Component
Database access	✅	❌
useState / useEffect	❌	✅
Event handlers (onClick)	❌	✅
Browser APIs	❌	✅
SEO-critical content	✅	⚠️

Best Practices

1. Start with Server Components — only switch to Client Components when needed
2. Keep Client Components small — extract interactive parts into separate files
3. Use Server Actions for forms and mutations
4. Avoid unnecessary "use client" directives in layouts

---

Server Components fundamentally change how we build React applications. The key is to draw the boundary between server and client intentionally.