React Server Components Nedir? Next.js 14 ile Kullanımı

Next.js 14 ile birlikte React ekosisteminde köklü bir değişiklik yaşandı. Artık bileşenlerimiz varsayılan olarak sunucuda çalışıyor. Peki bu ne anlama geliyor ve projelerimizde nasıl kullanabiliriz?

React Server Components (RSC) Nedir?

Server Components, adından da anlaşılacağı gibi sadece sunucuda render edilen React bileşenleridir. Bu bileşenlerin kodları ve içerdikleri kütüphaneler istemciye (tarayıcıya) gönderilmez. Bu sayede JavaScript bundle boyutu ciddi oranda düşer.

• Daha hızlı sayfa yüklenmesi (Zero Bundle Size)
• Doğrudan veritabanına erişim
• Daha iyi SEO performansı

Nasıl Kullanılır?

import { db } from '@/lib/db';

// Bu bileşen sadece sunucuda çalışır
export default async function PostList() {
  const posts = await db.query('SELECT * FROM posts');
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Gördüğünüz gibi, doğrudan SQL sorgusu yazabiliyoruz. Herhangi bir API endpoint'i oluşturmamıza gerek kalmıyor.