Next.js 15 ile birlikte Server Components ve Client Components kullanımı daha da yaygınlaştı. Sunucu-istemci mimarisini daha iyi anlayabilmek için, web dünyasındaki iki temel kavram hakkında bilgi sahibi olmak önemlidir.
👨💻 Client Components, kullanıcının cihazındaki tarayıcıda çalışan bileşenlerdir. Tarayıcı, sunucudan uygulama kodunu talep eder ve aldığı yanıtı etkileşimli bir kullanıcı arayüzüne dönüştürür. Bu bileşenler, JavaScript kullanarak çalışır ve genellikle kullanıcı etkileşimi gerektiren, dinamik veri işleyen durumlar için tercih edilir.
⚙️ Server Components, verilerin işlendiği ve render işlemlerinin gerçekleştirildiği sunucu taraflı bileşenlerdir. Sunucu, veri merkezinde yer alan ve istemciden gelen istekleri karşılayan bir bilgisayardır; uygulama kodunu barındırır, gerekli hesaplamaları yapar ve istemciye sadece işlenmiş HTML çıktısını gönderir. Bu yapı, istemci tarafındaki yükü azaltarak sayfa yükleme hızını artırır ve daha verimli bir kullanıcı deneyimi sağlar.
Yeni Default: Server Components
Next.js 15 ile birlikte Server Components, varsayılan bileşen tipi haline gelmiştir. Yani bir bileşen oluşturduğunuzda, ekstra bir yapılandırmaya ihtiyaç duymadan React tarafından otomatik olarak Server Component olarak değerlendirilir. Bu yaklaşım, uygulamanızın performansını artırmayı amaçlar ve tüm bileşenlerin varsayılan olarak sunucuda çalışmasını sağlar.
İlk etapta Server Component olarak yazmak, gereksiz client-side yükü ve JavaScript'i engelleyecektir. Eğer bileşen etkileşim gerektirmiyorsa, sadece veriyi sunucuda işlemek mantıklı olacaktır. Bu, sayfa yükleme süresini ciddi anlamda hızlandırır.
👆 Client Component'lere Ne Zaman İhtiyacımız Olur?
Kullanıcı etkileşimlerini yönetmek, animasyonlar, formlar, local state gibi client-side logic gerektiren durumlarda devreye girerler.
Eğer bir bileşen:
useState,useEffect,useRefgibi hook'lara ihtiyaç duyuyorsa,- Kullanıcı etkileşimleri (click, input, hover) ile çalışıyorsa,
- Tarayıcı API'lerini (
window,localStorage,document) kullanıyorsa, - Form kontrolleri, tema değişimi, modal yönetimi gibi işlemler yapıyorsa,
o bileşeni Client Component olarak işaretlememiz gerekir. Bu da çok basit bir şekilde, bileşenin en üstüne 'use client' direktifini yazarak yapılır:
Tarayıcıdaki hataya baktığınızda, Next.js size bir Server Component içinde useState kullanmaya çalıştığınız konusunda uyarı veriyor. Bu hatayı düzeltmek için, etkileşimli olan butonu bir Client Component içerisine taşıyabilirsiniz. Dosyanın en üstüne 'use client' yönergesini eklersek React'a bileşenin istemci tarafında çalıştırılması gerektiğini bildirmiş oluruz.
Bu şekilde hata çözülmüş olur. Ayrıca tüm etkileşimler tarayıcıda gerçekleşir ve sayfa yenilemesi gerekmez.
⚙️ Server Component'lere Ne Zaman İhtiyacımız Olur?
Aşağıdaki durumlar söz konusuysa, bileşeni Server Component olarak bırakmak (zaten varsayılan olarak böyle gelir) genellikle tercih edilir:
- Asenkron veri çekme (API çağrıları, veritabanı sorguları): Sunucu tarafında veriye erişim sağlayan işlemler için Server Component kullanımı gereklidir.
- Çevresel değişken (
process.env) kullanma: Çevresel değişkenlere yalnızca sunucu tarafında erişilebilir, bu nedenle bu tür işlemler için Server Component kullanmak daha güvenli olur. - Sadece statik HTML render etme: Dinamik veri ya da interaktif öğeler içermeyen sayfalar için sadece HTML render'ı gerekiyorsa, Server Component kullanmak sayfa yükleme hızını artırır.
- UI etkileşimi gerekmiyorsa: Kullanıcı etkileşimi gerektirmeyen ve yalnızca veriyi görüntüleyen sayfalar için sunucu tarafında işleme yapılması, daha hızlı ve verimli sonuçlar sağlar.
Bu yaklaşım, daha az JavaScript, daha hızlı sayfa yükleme, daha güvenli kod ve daha iyi SEO sağlar.
Bu bileşen sunucudan veri çekiyor ve async fonksiyon kullanıyor. Kullanıcıyla doğrudan etkileşimi yok, yani server component adayı.
🚫 Sunucuya Özel İşlemleri Server Component'te Tut
Veritabanı bağlantısı, authentication, ortam değişkenleri gibi işlemleri client component'e sokmamaya dikkat etmeliyiz. Güvenlik riski doğurur.
Client-side rendering (CSR) yaparken tüm veriler, kullanıcı tarayıcısında JavaScript olarak işlenir. Bu, kötü niyetli kişilerin sayfanın kaynak kodunu inceleyerek veya geliştirici araçlarını kullanarak kritik verilere erişmesine neden olabilir. Ancak Server Components ile veriler sadece sunucuda işlenir, tarayıcıya gönderilmez.
Client-side rendering'de veriyi doğru bir şekilde maskelemek, şifrelemek zor olabilir. Ancak Server Components ile sadece gerekli veriler istemciye gönderilir, hassas veriler gizli kalır.
🔑 Etkileşim ve Sunucu İle İletişim
Next.js'te Server ve Client Components kullanırken, etkileşimler Server Actions ile sunucu tarafında da işlenebilir. Bu, istemciye daha az JavaScript gönderir, sayfa yükleme süresini kısaltır ve güvenliği artırır. Veriler sunucuda işlenir, API endpoint'lerine gerek kalmaz. JavaScript devre dışı olsa bile formlar çalışır ve erişilebilirlik sağlanır. Sayfa yenilemesi olmadan sonuçlar gösterilebilir ve Optimistic UI güncellemeleri yapılabilir.
✨ Sonuç
Next.js 15, Server ve Client Components kullanarak daha hızlı ve güvenli web uygulamaları geliştirmeyi mümkün kılar. Server Components, yalnızca gerekli verileri tarayıcıya göndererek performansı optimize ederken, güvenlik avantajları da sağlar. Hangi bileşenin sunucu, hangisinin istemci tarafında çalışacağına dikkat etmek, uygulamanın yönetilebilirliğini ve güvenliğini artırır.
Hızlı ve keyifli kodlamalar! 🎉
Bu yazı ilk olarak Medium'da yayınlandı.