Sunucu Eylemleriyle Aşamalı Geliştirme

Aşamalı geliştirme, çalışan bir HTML temelinden başlayıp üzerine JavaScript yetenekleri eklediğiniz bir web geliştirme stratejisidir. JavaScript devre dışı olan, yavaş bağlantılar kullanan veya yardımcı teknolojilerden yararlananlar dahil tüm kullanıcılar temel işlevlerden yararlanabilir; JavaScript etkin kullanıcılar ise geliştirilmiş bir deneyim elde eder.

action={serverAction} içeren bir form, JavaScript olmadan da tam sayfa HTML POST gönderimi olarak çalışır. Tarayıcı formu gönderir, sunucu eylemi yürütür ve sunucu güncellenmiş bir HTML sayfası döndürür. Bu, web formlarını 1995'ten beri çalıştıran mekanizmanın aynısıdır — React'in Sunucu Eylemleri tasarım gereği bununla uyumludur.

JavaScript olmadığında doğrulamanın sunucuda yapılması gerekir. Sunucu Eylemi form verilerini doğrular ve doğrulama başarısız olursa hata durumunu döndürür. Sunucu, hata mesajları HTML içine yerleştirilmiş şekilde sayfayı yeniden oluşturur. Kullanıcı, istemci tarafında herhangi bir JavaScript çalışmadan hataları görür.

React sayfaya hidrasyon uyguladığında form gönderimlerini yakalar ve bunları tam sayfa POST gönderimleri yerine eşzamansız Sunucu Eylemi çağrıları olarak işler. Kullanıcı, temel eylemi veya form yapısını değiştirmeden yerinde güncelleme, görünür bekleme durumu ve iyimser kullanıcı arayüzü elde eder.

Sunucu, başlangıç durumunu HTML içine yerleştirerek formu oluşturur. React hidrasyon uyguladığında bu başlangıç durumunu herhangi bir titreme veya uyuşmazlık oluşturmadan devralır. useActionState kancası, sunucu tarafından oluşturulan başlangıç durumunu istemci hidrasyonuyla sorunsuz biçimde uzlaştırmak üzere tasarlanmıştır.

React geçişleri, Sunucu Eylemi çağrısı sırasında kullanıcı arayüzünün etkileşimli kalmasını sağlar. Form gönderimini bir geçiş içine almak, React'in sunucu gidiş-dönüşünü daha düşük öncelikli ele alıp sayfanın yanıt vermeye devam etmesini sağlar. JavaScript ile geliştirilmiş deneyimin tam sayfa yeniden yüklemeden belirgin biçimde daha hızlı hissettirmesini sağlayan şey budur.

JavaScript olmadan: kullanıcı gönder düğmesine tıklar, tarayıcı tam bir POST gönderir, sunucu yeni bir HTML sayfasıyla yanıt verir (kısa süreli beyaz ekran parlaması ve kaydırma konumunun sıfırlanması olur). JavaScript ile: React araya girer, eylem eşzamansız olarak çalışır, yalnızca sayfanın değişen bölümleri yerinde güncellenir — parlama olmaz, kaydırma konumu sıfırlanmaz.

Aşamalı geliştirme, JavaScript çalıştırmayabilecek arama motoru tarayıcılarına fayda sağlar. Tam sayfa HTML formu olarak çalışan form tabanlı bir arama veya filtreleme sayfası dizine eklenebilir ve taranabilir. Sunucu tarafından oluşturulan sonuçlar, tarayıcının JavaScript'i bekleyen boş öğeler yerine gerçek içeriği görmesini sağlar.

Ekran okuyucuları ve yardımcı teknolojiler, anlamsal HTML ile en iyi şekilde çalışır. Aşamalı olarak geliştirilmiş bir form, yardımcı teknolojilerin doğal olarak anlayabildiği gerçek <form>, <input> ve <button> öğelerini kullanır. JavaScript, hata duyuruları için ARIA canlı bölgeleri ekleyerek erişilebilir temel yapının yerini almak yerine onu geliştirir.

Güvenilir olmayan ağlarda JavaScript paketleri yüklenemeyebilir. Aşamalı olarak geliştirilmiş bir sayfa, temel kullanım senaryosunda yine de çalışır. Bu dayanıklılık, özellikle kapsama alanının zayıf olduğu bölgelerde mobil bağlantı kullanan kullanıcılar veya ağ koşullarının büyük ölçüde değiştiği bölgeler için önemlidir.

Aşamalı geliştirme; kayıt, iletişim, arama ve ödeme gibi kullanıcılara açık formlar için en değerlidir. Karmaşık etkileşimlere sahip iç panoların buna ihtiyacı olmayabilir. En geniş erişim ve güvenilirliğin önemli olduğu pazarlama sayfaları, e-ticaret ve kullanıcıların ilk kullanım süreçleri gibi alanlarda bunu bilinçli olarak uygulayın.

Aşamalı geliştirmenin temel ilkesi nedir?

Aşamalı geliştirme, formun JavaScript olmadan yalın bir HTML POST gönderimi olarak çalışması anlamına gelir. Sunucu Eylemleri bunu doğal olarak destekler: action={serverAction} tam sayfa POST gönderimini etkinleştirir. React'in hidrasyonu daha sonra formu bekleme durumlarıyla eşzamansız yerinde güncellemelere dönüştürür. Bu yaklaşım, zengin bir JavaScript deneyimi sunmaya devam ederken erişilebilirlik, arama motoru optimizasyonu ve düşük bağlantı kalitesine sahip kullanıcılar açısından fayda sağlar.