Next.js ile Server-Side Rendering (SSR)

SSR Nedir ve Neden Önemlidir?

Sunucu Tarafında Oluşturma (Server-Side Rendering - SSR), bir web sayfasının HTML içeriğinin istemci (tarayıcı) yerine sunucuda oluşturulması işlemidir. Geleneksel Client-Side Rendering (CSR) yaklaşımlarında, tarayıcı boş bir HTML ve bir JavaScript paketi alır, ardından JavaScript çalışarak sayfa içeriğini oluşturur. SSR'da ise tarayıcıya doğrudan içerikle dolu bir HTML gönderilir. Bu iki temel avantaj sağlar:

• Daha Hızlı İlk Sayfa Yüklemesi (FCP): Kullanıcılar içeriği görmek için JavaScript'in indirilip çalışmasını beklemek zorunda kalmaz. Bu, özellikle yavaş ağ bağlantılarında kullanıcı deneyimini önemli ölçüde iyileştirir.
• Daha İyi SEO: Arama motoru botları, içeriği oluşturmak için JavaScript'i çalıştırmakta zorlanabilir. SSR, botlara doğrudan taranabilir, tam içerikli bir HTML sunduğu için sitenizin arama motorlarında daha iyi sıralanmasına yardımcı olur.

Next.js ve SSR

Next.js, React tabanlı bir framework olup SSR'ı 'out-of-the-box' destekler ve son derece kolay hale getirir. Next.js'te bir sayfayı SSR ile oluşturmak için getServerSideProps adlı asenkron bir fonksiyonu export etmeniz yeterlidir.

export async function getServerSideProps(context) {\n  // Bu kısım sunucuda çalışır\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  // Dönen data, sayfa bileşenine props olarak geçer\n  return { props: { data } };\n}

getServerSideProps her istekte sunucuda çalışır. Bu, sayfanın her zaman en güncel verilerle render edilmesini sağlar. Bu, içeriğin sık sık değiştiği (örn: bir haber sitesi veya e-ticaret sitesinin stok durumu) sayfalar için idealdir.

Ne Zaman SSR, Ne Zaman SSG?

Next.js ayrıca Static Site Generation (SSG) de destekler. SSG'de sayfalar build time'da (uygulama derlenirken) bir kez oluşturulur ve CDN'den servis edilir. Bu, SSR'dan bile daha hızlıdır. Kural olarak:

• İçeriği her istek için kişiselleştirmeniz veya çok dinamik olan verilerle çalışmanız gerekiyorsa SSR kullanın. (Örn: Kullanıcı paneli)
• İçerik build anında biliniyorsa ve tüm kullanıcılar için aynıysa (örn: blog yazısı, pazarlama sayfası), SSG (getStaticProps ile) kullanın.

Next.js'in bu esnekliği, uygulamanızın her sayfası için en uygun render yöntemini seçmenize olanak tanır.