Next.js ve Server-Side Rendering: Kapsamlı Bir Rehber

Next.js, production'a hazır React uygulamaları geliştirmede tercih edilen framework haline geldi. En güçlü özelliklerinden biri de Server-Side Rendering (SSR) dahil olmak üzere sunduğu esnek render stratejileridir.

Server-Side Rendering Nedir?

Server-Side Rendering (SSR), web sayfalarının tarayıcı yerine sunucuda render edilmesi işlemidir. Bir kullanıcı bir sayfa talep ettiğinde sunucu HTML'in tamamını oluşturur ve istemciye gönderir.

SSR'ın Faydaları

1. Gelişmiş SEO: Arama motorları içeriğinizi kolayca tarayıp dizine ekleyebilir
2. Daha Hızlı İlk Yükleme: Kullanıcılar içeriği daha çabuk görür
3. Düşük Donanımlı Cihazlarda Daha İyi Performans: İstemci tarafında daha az JavaScript çalıştırılır
4. Sosyal Medya Paylaşımı: Zengin önizlemeler için doğru meta etiketleri

Next.js Render Stratejileri

Next.js 15 birkaç farklı render stratejisi sunar:

1. Server-Side Rendering (SSR)

Sayfalar her istekte oluşturulur:

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    cache: 'no-store' // Force dynamic rendering
  });
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();
  
  return (
    <div>
      <h1>Products</h1>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

2. Static Site Generation (SSG)

Sayfalar build sırasında oluşturulur:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  
  return posts.map(post => ({
    slug: post.slug,
  }));
}

export default async function BlogPost({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then(res => res.json());
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

3. Incremental Static Regeneration (ISR)

Statik sayfaları, tüm siteyi yeniden build etmeden build sonrasında güncelleyin:

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalidate every hour
  });
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

Server Component'ler ve Client Component'ler

Next.js 15, React Server Component'leri varsayılan olarak kullanıma sunar:

Server Component'ler (Varsayılan)

// app/components/ServerComponent.tsx
// No 'use client' directive - this is a Server Component
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  
  return <div>{json.title}</div>;
}

Faydaları:

• Sıfır JavaScript bundle boyutu
• Doğrudan veritabanı/API erişimi
• Daha iyi güvenlik (API anahtarları sunucuda kalır)

Client Component'ler

'use client';

import { useState, useEffect } from 'react';

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

Ne zaman kullanılmalı:

• Etkileşimli özellikler (onClick, onChange)
• Tarayıcı API'leri (localStorage, window)
• State yönetimi (useState, useReducer)
• Effect'ler (useEffect)

Veri Çekmede En İyi Pratikler

1. Paralel Veri Çekme

async function Page() {
  // These fetch in parallel
  const [user, posts] = await Promise.all([
    fetch('https://api.example.com/user'),
    fetch('https://api.example.com/posts')
  ]);
  
  return (
    <div>
      <UserProfile data={user} />
      <PostsList data={posts} />
    </div>
  );
}

2. İstek Tekilleştirme (Request Deduplication)

Next.js, birbirinin aynısı olan istekleri otomatik olarak tekilleştirir:

async function getUserData() {
  return fetch('https://api.example.com/user');
}

// These calls are automatically deduped
async function Component1() {
  const user = await getUserData(); // Only fetches once
  return <div>{user.name}</div>;
}

async function Component2() {
  const user = await getUserData(); // Uses cached result
  return <div>{user.email}</div>;
}

3. Streaming ve Suspense

İçeriği yüklendikçe aşamalı olarak gösterin:

import { Suspense } from 'react';

async function SlowComponent() {
  await new Promise(resolve => setTimeout(resolve, 3000));
  return <div>Slow content loaded!</div>;
}

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Performans Optimizasyonu

1. Görsel Optimizasyonu

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // Load immediately
      placeholder="blur"
    />
  );
}

2. Font Optimizasyonu

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Sonuç

Next.js, modern web uygulamaları geliştirmek için güçlü ve esnek bir framework sunar. Hibrit render yaklaşımı sayesinde her sayfa için en uygun stratejiyi seçerek performans, SEO ve kullanıcı deneyimini optimize edebilirsiniz.

İster SSR'ın SEO avantajlarına, ister SSG'nin performansına, ister ISR'ın esnekliğine ihtiyacınız olsun, Next.js hepsini karşılar. React Server Component'lerle birleştiğinde, hızlı ve ölçeklenebilir uygulamalar geliştirmek hiç bu kadar kolay olmamıştı.

Varsayılan olarak Server Component'lerle başlayın, istemci tarafı etkileşimi yalnızca gerekli yerlerde ekleyin ve kullanıcılarınıza mümkün olan en iyi deneyimi sunmak için Next.js'in otomatik optimizasyonlarından yararlanın.