M

MLOG

Türkçe

Sunucu Taraflı Oluşturma (SSR) ve Statik Site Oluşturma (SSG) arasındaki kritik farkları anlayarak Next.js App Router'ın gücünü ortaya çıkarın. Optimum performans ve SEO için her bir stratejiyi ne zaman kullanacağınızı öğrenin.

Next.js App Router: SSR ve SSG Karşılaştırması - Kapsamlı Bir Rehber

Next.js App Router, React uygulamaları oluşturma şeklimizde devrim yaratarak gelişmiş performans, esneklik ve geliştirici deneyimi sunuyor. Bu yeni mimarinin merkezinde iki güçlü oluşturma stratejisi yer alıyor: Sunucu Taraflı Oluşturma (SSR) ve Statik Site Oluşturma (SSG). Doğru yaklaşımı seçmek, uygulamanızın performansını, SEO'sunu ve kullanıcı deneyimini optimize etmek için çok önemlidir. Bu kapsamlı rehber, Next.js App Router bağlamında SSR ve SSG'nin inceliklerini ele alarak projeleriniz için bilinçli kararlar vermenize yardımcı olacaktır.

Temelleri Anlamak: SSR ve SSG

Next.js App Router'ın özelliklerine dalmadan önce, SSR ve SSG hakkında net bir anlayış oluşturalım.

Sunucu Taraflı Oluşturma (SSR)

SSR, React bileşenlerinin her istek için sunucuda HTML'e dönüştürüldüğü bir tekniktir. Sunucu, tamamen oluşturulmuş HTML'i istemcinin tarayıcısına gönderir, bu da sayfayı hidrate ederek etkileşimli hale getirir.

SSR'ın Temel Özellikleri:

Statik Site Oluşturma (SSG)

SSG ise React bileşenlerinin derleme zamanında (build time) HTML'e önceden oluşturulmasını içerir. Oluşturulan HTML dosyaları daha sonra doğrudan bir CDN'den veya web sunucusundan sunulur.

SSG'nin Temel Özellikleri:

Next.js App Router'da SSR ve SSG: Temel Farklılıklar

Next.js App Router, rotaları tanımlamak ve veri alımını yönetmek için yeni bir paradigma sunuyor. Bu yeni ortamda SSR ve SSG'nin nasıl uygulandığını ve aralarındaki temel farkları inceleyelim.

App Router'da Veri Alma

App Router, sunucu bileşenleri içinde `async/await` sözdizimini kullanarak veri almak için birleşik bir yaklaşım sunar. Bu, SSR veya SSG kullanıyor olmanıza bakılmaksızın veri alma sürecini basitleştirir.

Sunucu Bileşenleri: Sunucu Bileşenleri, yalnızca sunucuda çalışan yeni bir React bileşeni türüdür. Bu, API rotaları oluşturmanıza gerek kalmadan verileri doğrudan bileşenleriniz içinde almanızı sağlar.

Örnek (SSR):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Bu örnekte, `getBlogPost` fonksiyonu her istek için sunucuda blog yazısı verilerini alır. `export default async function BlogPost` ifadesi, bunun bir sunucu bileşeni olduğunu belirtir.

Örnek (SSG):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export async function generateStaticParams() {
  const posts = await getAllBlogPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Burada, `generateStaticParams` fonksiyonu, derleme zamanında mevcut tüm slug'lar için blog yazılarını önceden oluşturmak amacıyla kullanılır. Bu, SSG için çok önemlidir.

Önbellekleme Stratejileri

Next.js App Router, hem SSR hem de SSG için performansı optimize etmek üzere yerleşik önbellekleme mekanizmaları sunar. Bu mekanizmaları anlamak hayati önem taşır.

Veri Önbelleği: Varsayılan olarak, sunucu bileşenlerinde `fetch` kullanılarak alınan veriler otomatik olarak önbelleğe alınır. Bu, aynı veriler için sonraki isteklerin önbellekten sunulacağı ve veri kaynağınız üzerindeki yükün azalacağı anlamına gelir.

Tam Rota Önbelleği: Bir rotanın oluşturulmuş çıktısının tamamı önbelleğe alınarak performans daha da artırılabilir. Önbellek davranışını `route.js` veya `page.js` dosyalarınızdaki `cache` seçeneğini kullanarak yapılandırabilirsiniz.

Örnek (Önbelleği Devre Dışı Bırakma):

// app/blog/[slug]/page.js

export const fetchCache = 'force-no-store';

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Bu durumda, `fetchCache = 'force-no-store'` bu özel rota için önbelleklemeyi devre dışı bırakacak ve verilerin her zaman sunucudan taze olarak alınmasını sağlayacaktır.

Dinamik Fonksiyonlar

Bir rotayı çalışma zamanında dinamik olarak bildirmek için `dynamic` rota segmenti yapılandırma seçeneğini ayarlayabilirsiniz. Bu, Next.js'e bir rotanın dinamik fonksiyonlar kullanıp kullanmadığını ve derleme zamanında farklı şekilde ele alınması gerektiğini bildirmek için yardımcı olur.

Örnek (Dinamik rota segmenti):

// app/blog/[slug]/page.js
export const dynamic = 'force-dynamic'; // isteği okumadığı sürece varsayılan olarak statiktir

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Artımlı Statik Yenileme (ISR)

App Router, hem SSR hem de SSG'nin faydalarını birleştiren hibrit bir yaklaşım olarak Artımlı Statik Yenileme (ISR) sunar. ISR, sayfaları statik olarak oluşturmanıza olanak tanırken, aynı zamanda bunları belirli bir aralıkta arka planda güncellemenizi sağlar.

ISR Nasıl Çalışır:

  1. Bir sayfaya yapılan ilk istek statik oluşturmayı tetikler.
  2. Sonraki istekler statik olarak oluşturulmuş önbellekten sunulur.
  3. Arka planda, Next.js belirtilen bir zaman aralığından (revalidate süresi) sonra sayfayı yeniden oluşturur.
  4. Yeniden oluşturma tamamlandığında, önbellek sayfanın yeni sürümüyle güncellenir.

ISR'ı Uygulama:

ISR'ı etkinleştirmek için `getStaticProps` fonksiyonunuzdaki (`pages` dizininde) `revalidate` seçeneğini veya `fetch` seçeneklerini (`app` dizininde) yapılandırmanız gerekir.

Örnek (App Router'da ISR):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export const revalidate = 60; // Her 60 saniyede bir yeniden doğrula

Bu örnek, ISR'ı her 60 saniyede bir blog yazısını yeniden doğrulamak üzere yapılandırır. Bu, tüm siteyi yeniden derlemeden statik içeriğinizi taze tutar.

Doğru Stratejiyi Seçmek: Pratik Bir Rehber

SSR, SSG ve ISR arasında seçim yapmak, uygulamanızın özel gereksinimlerine bağlıdır. İşte bir karar verme çerçevesi:

SSR Ne Zaman Kullanılmalı:

Örnek: Sürekli güncellenen makaleler ve son dakika haber uyarıları olan bir haber web sitesi. Ayrıca gerçek zamanlı olarak yenilenen sosyal medya akışları için de uygundur.

SSG Ne Zaman Kullanılmalı:

Örnek: Yeteneklerinizi ve projelerinizi sergileyen kişisel bir portfolyo web sitesi. Bir şirketin nadiren değişen "Hakkımızda" sayfası.

ISR Ne Zaman Kullanılmalı:

Örnek: Ürün fiyatları günlük olarak güncellenen bir e-ticaret web sitesi. Haftada birkaç kez yeni makalelerin yayınlandığı bir blog.

Next.js App Router'da SSR ve SSG Uygulamak için En İyi Pratikler

Optimum performans ve sürdürülebilirlik sağlamak için, Next.js App Router'da SSR ve SSG uygularken şu en iyi pratikleri izleyin:

İleri Düzey Konular

Edge Fonksiyonları

Next.js ayrıca, uç ağda (edge network) sunucusuz fonksiyonlar çalıştırmanıza olanak tanıyan Edge Fonksiyonlarını da destekler. Bu, A/B testi, kimlik doğrulama ve kişiselleştirme gibi görevler için faydalı olabilir.

Middleware

Middleware, bir istek tamamlanmadan önce kod çalıştırmanıza olanak tanır. Middleware'i kimlik doğrulama, yönlendirme ve özellik bayrakları gibi görevler için kullanabilirsiniz.

Uluslararasılaştırma (i18n)

Küresel uygulamalar oluştururken uluslararasılaştırma çok önemlidir. Next.js, i18n için yerleşik destek sunarak web sitenizin yerelleştirilmiş sürümlerini kolayca oluşturmanıza olanak tanır.

Örnek (i18n kurulumu):

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es', 'de'],
    defaultLocale: 'en',
  },
}

Gerçek Dünya Örnekleri

Farklı şirketlerin SSR, SSG ve ISR'ı Next.js ile nasıl kullandıklarına dair bazı gerçek dünya örneklerini inceleyelim:

Sonuç

Next.js App Router, modern web uygulamaları oluşturmak için güçlü ve esnek bir platform sunar. SSR ve SSG arasındaki farkları ve ISR'ın faydalarını anlamak, oluşturma stratejiniz hakkında bilinçli kararlar vermek için çok önemlidir. Uygulamanızın özel gereksinimlerini dikkatlice göz önünde bulundurarak ve en iyi pratikleri izleyerek performansı, SEO'yu ve kullanıcı deneyimini optimize edebilir, sonuç olarak küresel bir kitleye hitap eden başarılı bir web uygulaması oluşturabilirsiniz.

Uygulamanızın performansını sürekli olarak izlemeyi ve gerektiğinde oluşturma stratejinizi uyarlamayı unutmayın. Web geliştirme dünyası sürekli gelişiyor, bu nedenle en son trendler ve teknolojilerle güncel kalmak başarı için esastır.