Rendering

Rendering, yazdığınız kodu kullanıcı arayüzlerine dönüştürür. React ve Next.js, kodunuzun bazı bölümlerinin sunucuda veya istemcide işlenebildiği hibrit web uygulamaları oluşturmanıza olanak tanır. Bu bölüm, bu render ortamları, stratejileri ve çalışma zamanları arasındaki farkları anlamanıza yardımcı olacaktır.

Fundamentals

Başlangıç olarak, üç temel web kavramına aşina olmak faydalı olacaktır:

• Uygulama kodunuzun çalıştırılabileceği ortamlar: sunucu ve istemci.
• Bir kullanıcı uygulamanızı ziyaret ettiğinde veya uygulamanızla etkileşime girdiğinde başlatılan İstek-Yanıt Yaşam Döngüsü.
• Sunucu ve istemci kodunu ayıran Ağ Sınırı.

Rendering Environments

Web uygulamalarının işlenebileceği iki ortam vardır: istemci ve sunucu.

• İstemci, uygulama kodunuz için bir sunucuya istek gönderen bir kullanıcının cihazındaki tarayıcıyı ifade eder. Daha sonra sunucudan gelen yanıtı bir kullanıcı arayüzüne dönüştürür.
• Sunucu, uygulama kodunuzu depolayan, bir istemciden gelen istekleri alan ve uygun bir yanıtı geri gönderen bir veri merkezindeki bilgisayarı ifade eder.

Geçmişte, geliştiriciler sunucu ve istemci için kod yazarken farklı diller (ör. JavaScript, PHP) ve çerçeveler kullanmak zorundaydı. React ile geliştiriciler aynı dili (JavaScript) ve aynı çerçeveyi (örneğin Next.js veya tercih ettiğiniz çerçeve) kullanabilir. Bu esneklik, bağlam değiştirmeden her iki ortam için de sorunsuz bir şekilde kod yazmanıza olanak tanır.

Ancak, her ortamın kendine özgü yetenekleri ve kısıtlamaları vardır. Bu nedenle, sunucu ve istemci için yazdığınız kod her zaman aynı değildir. Bir ortam için diğerine göre daha uygun olan belirli işlemler (örneğin veri getirme veya kullanıcı durumunu yönetme) vardır.

Bu farklılıkları anlamak, React ve Next.js'yi etkili bir şekilde kullanmanın anahtarıdır. Sunucu ve İstemci Bileşenleri sayfalarında farklılıkları ve kullanım durumlarını daha ayrıntılı olarak ele alacağız, şimdilik temelimizi oluşturmaya devam edelim.

Request-Response Lifecycle

Genel olarak, tüm web siteleri aynı İstek-Yanıt Yaşam Döngüsünü takip eder:

1. Kullanıcı Eylemi: Kullanıcı bir web uygulaması ile etkileşime girer. Bu, bir bağlantıya tıklamak, bir form göndermek veya doğrudan tarayıcının adres çubuğuna bir URL yazmak olabilir.
2. HTTP İsteği: İstemci, sunucuya hangi kaynakların talep edildiği, hangi yöntemin kullanıldığı (örneğin GET, POST) ve gerekirse ek veriler hakkında gerekli bilgileri içeren bir HTTP isteği gönderir.
3. Sunucu: Sunucu isteği işler ve uygun kaynaklarla yanıt verir. Bu işlem yönlendirme, veri getirme vb. gibi birkaç adımda gerçekleşebilir.
4. HTTP Yanıtı: İsteği işledikten sonra sunucu istemciye bir HTTP yanıtı gönderir. Bu yanıt bir durum kodu (istemciye isteğin başarılı olup olmadığını bildirir) ve istenen kaynakları (örn. HTML, CSS, JavaScript, statik varlıklar, vb.) içerir.
5. İstemci: İstemci, kullanıcı arayüzünü oluşturmak için kaynakları ayrıştırır.
6. Kullanıcı Eylemi: Kullanıcı arayüzü oluşturulduktan sonra, kullanıcı onunla etkileşime girebilir ve tüm süreç yeniden başlar.

Hibrit bir web uygulaması oluşturmanın önemli bir kısmı, yaşam döngüsünde işin nasıl bölüneceğine ve Ağ Sınırının nereye yerleştirileceğine karar vermektir.

Network Boundary

Web geliştirmede Ağ Sınırı, farklı ortamları birbirinden ayıran kavramsal bir çizgidir. Örneğin, istemci ve sunucu ya da sunucu ve veri deposu.

React'te, istemci-sunucu ağ sınırını en mantıklı olan yere yerleştirmeyi siz seçersiniz.

Perde arkasında, çalışma iki bölüme ayrılır: istemci modülü graf iği ve sunucu modülü grafiği. Sunucu modülü grafiği sunucuda işlenen tüm bileşenleri, istemci modülü grafiği ise istemcide işlenen tüm bileşenleri içerir.

Modül grafiklerini, uygulamanızdaki dosyaların birbirlerine nasıl bağlı olduklarının görsel bir temsili olarak düşünmek faydalı olabilir.

Sınırı tanımlamak için React "use client" kuralını kullanabilirsiniz. Ayrıca, React'e sunucuda bazı hesaplama işleri yapmasını söyleyen bir "use server" kuralı da vardır.

Building Hybrid Applications

Bu ortamlarda çalışırken, uygulamanızdaki kod akışını tek yönlü olarak düşünmek faydalı olacaktır. Başka bir deyişle, bir yanıt sırasında uygulama kodunuz tek yönde akar: sunucudan istemciye.

İstemciden sunucuya erişmeniz gerekirse, aynı isteği tekrar kullanmak yerine sunucuya yeni bir istek gönderirsiniz. Bu, bileşenlerinizin nerede işleneceğini ve Ağ Sınırının nereye yerleştirileceğini anlamayı kolaylaştırır.

Uygulamada bu model, geliştiricileri, sonucu istemciye göndermeden ve uygulamayı etkileşimli hale getirmeden önce sunucuda ne yürütmek istediklerini düşünmeye teşvik eder.

Bu kavram, istemci ve sunucu bileşenlerini aynı bileşen ağacında nasıl bir araya getirebileceğinizi incelediğimizde daha açık hale gelecektir.