Oluşturma, son kullanıcıların tarayıcıları üzerinden etkileşim kurabileceği bir sayfa oluşturmak için gereken kodu oluşturma işlemini ifade eder. Buna içeriğin hazırlanması, mantık ve işleme uygulanması, son sayfayı görüntülemek için gereken kullanıcı arayüzü öğelerinin ve diğer gerekli bileşenlerin eklenmesi dahildir. İçerik odaklı uygulamalar yüksek yükleme hızına, düşük gecikme süresine ve hızlı oluşturma sürelerine odaklanır.
Sunucu tarafı oluşturma (SSR)
Sunucu tarafı oluşturma (SSR), web sayfalarının sunucuda oluşturulmasını ve ardından tamamen oluşturulmuş HTML'nin istemci tarafında JavaScript ile oluşturmak yerine istemcinin tarayıcısına gönderilmesini içerir. Kullanıcılar bir uygulamaya eriştiğinde, tarayıcıları sunucuya bir istek gönderir. Uygulama, isteği sunucudaki isteği işler. Bu işlem, veritabanlarından veya harici API'lerden veri toplamayı içerir. Ardından istenen sayfanın HTML'sini oluşturur. Daha sonra sunucu, sayfanın tamamen oluşturulmuş HTML'sini kullanıcının tarayıcısına geri gönderir. Kullanıcının tarayıcısı HTML'yi aldığında, tarayıcı gerekli tüm JavaScript dosyalarını yükler.
HTML hakkında bilgi edinmek için web.dev sayfasını ziyaret edin.
SSR'yi kullanmanın avantajları arasında hızlı bir ilk yükleme hızı, iyi arama motoru optimizasyonu (SEO) performansı, güvenilirlik ve iyi bir kullanıcı deneyimi yer alır. Ancak SSR'nin uygulanması, performans ek yükü ve SSR özellikli uygulamaları oluşturup yürütmek için gereken geliştirme becerisi nedeniyle istemci taraflı oluşturma (CSR) ile karşılaştırıldığında daha karmaşık olabilir. SSR, özellikle içeriğe dayalı web uygulamaları, e-ticaret platformları ve iyi SEO performansı ile hızlı ilk yanıt hızları gerektiren tüm uygulamalar için yararlıdır.
Statik Site Oluşturma (SSG)
Statik site oluşturma (SSG), derleme zamanında statik HTML dosyaları oluşturur ve bunları sunucu tarafında veya istemci tarafında oluşturma işlemi olmadan kullanıcılara teslim eder. Web içeriği genellikle Markdown, JSON veya YAML gibi yapılandırılmış bir biçimde yazılır ve metin, resim ve diğer öğeleri içerir. Hugo veya Jekyll gibi statik bir site oluşturma aracı, içeriği işler ve HTML, CSS ve JavaScript dosyaları oluşturur. Statik çıkış, web sitesinin tamamını oluşturur ve bu statik dosyalar bir web sunucusuna, CDN'ye veya barındırma hizmetine dağıtılır.
CSS ve HTML hakkında daha fazla bilgiyi web.dev adresinde bulabilirsiniz.
Dosyalar statik olduklarından önbelleğe alınabilir ve bu nedenle çok hızlı yüklenebilir. SSG, sık sık değişmeyen veya düzenli site yapılarıyla güncellenen web uygulamaları için iyi bir seçenektir. Dinamik etkileşime sahip web uygulamaları için uygun bir seçim değildir.
İstemci Taraflı Oluşturma (CSR)
İstemci tarafı oluşturma (CSR), sunucuda değil, istemcinin tarayıcısında gerçekleşir. Web uygulamaları genellikle minimal HTML şablonlarıyla yüklenir. Daha sonra içerik, JavaScript ve sunuculardan veya API'lerden alınan veriler kullanılarak dinamik olarak değiştirilir. Bir uygulama isteğinden sonra sunucu, sayfayı oluşturmak için gereken temel yapıya ve JavaScript koduna sahip minimal bir HTML belgesi gönderir. JavaScript kodu, kullanıcının tarayıcısında yürütülür. Daha sonra kod, getirilen verileri işler ve CSS, HTML ve tüm etkileşimli öğeler dahil olmak üzere içeriği oluşturur. JavaScript kodu daha sonra form gönderme gibi kullanıcı etkileşimlerine yanıt verir.
CSR'nin avantajları arasında hızlı sayfa geçişleri ve duyarlı arayüzler yer alır. KSS tabanlı web uygulamaları genellikle SSR'ye kıyasla daha yavaş ilk yükleme sürelerine sahiptir ve SEO zorlukları doğurabilir. CSR uygulamaları büyüdükçe, geliştirilmesi ve bakımı oldukça karmaşık hale gelebilir.