Sunucu tarafı oluşturmanın (SSR) popülaritesi son yıllarda arttı. Bu oluşturma yöntemi, web sitesi performansının artmasına, arama motoru görünürlüğünün artmasına ve genel olarak daha iyi bir kullanıcı deneyimine yol açar. Peki server-side rendering ssr nedir, nasıl çalışır ve web sitelerimizde nasıl bir fark yaratır?
SSR’yi ve nasıl çalıştığını anlamak, web sitelerini optimize etmek ve web ziyaretçilerine üstün kullanıcı deneyimi sağlamak isteyen web geliştiricileri ve işletmeler için çok önemlidir.
Bu yazıda server-side rendering in ne olduğunu, nasıl çalıştığını, artılarını ve eksilerini ve SSR kullanma senaryolarını öğreneceğiz.
Hazırsanız ssr nedir öğrenmeye başlayalım.
Server-side Rendering SSR Nedir?
SSR nedir? SSR, tamamen işlenmiş HTML işaretlemesini istemciye göndermeden önce bir web sayfasının sunucuda işlenmesini içeren bir web geliştirme tekniğidir.
SSR nedir? SSR, sunucunun bir web sayfası için HTML ve CSS kodunu oluşturduğu ve bunu istemciye (kullanıcının tarayıcısına) tamamen işlenmiş bir sayfa olarak gönderdiği bir yöntemdir.
Tamamen oluşturulmuş bir sayfayı tarayıcıya göndermek, sayfa yükleme sürelerinin daha hızlı olmasını sağlar ve arama motorlarının sayfayı etkili bir şekilde taramasına ve dizine eklemesine yardımcı olarak SEO performansının iyileşmesine yol açar.
SSR ile istemcinin JavaScript veya CSS dosyalarının yüklenmesini beklemesine gerek yoktur. Bunun yerine web sayfası tamamen oluşturulur ve gerekli içerikle doldurulur. Bu daha iyi bir kullanıcı deneyimi sağlar çünkü web ziyaretçileri gerekli kodun yüklenmesini beklerken boş bir ekranla karşılaşmazlar. Bunun yerine web sitesi içeriğini daha hızlı görüyorlar.
Server-side rendering SSR Nasıl Çalışır?
SSR sürecinin nasıl çalıştığına ve web sayfalarını nasıl oluşturup sunduğuna ilişkin üst düzey bir genel bakışı burada bulabilirsiniz:
- Bir kullanıcı bir URL’yi ziyaret eder: Bir kullanıcı, tarayıcısı aracılığıyla belirli bir URL’ye (örneğin prismic.io) gider.
- Sunucu sayfa için bir istek alır: Bu eylem, isteği alan ve istenen yolu veya URL’yi tanımlayan sunucuya bir istek gönderir.
- Veri alma: Sunucu, gerekli verileri veritabanlarından, harici API’lerden veya diğer ilgili kaynaklardan alır. Bu veriler HTML şablonunu doldurmak için kullanılacaktır.
- Şablon oluşturma: Sunucu, bir şablon oluşturma motoru veya getirilen verileri sayfanın önceden tanımlanmış yapısıyla birleştiren bir çerçeve kullanarak HTML işaretlemesini oluşturur. Bu, içeriğin oluşturulmasını, stillerin uygulanmasını ve gerekli işlevlerin eklenmesini içerir.
- Oluşturulan sayfayı gönderme: Şablon oluşturulduktan ve HTML oluşturulduktan sonra, sunucu, isteğe yanıt olarak tamamen işlenmiş sayfayı kullanıcının tarayıcısına gönderir.
- Sayfanın görüntülenmesi: Kullanıcının tarayıcısı, ilk sayfa yüklemesi JavaScript koduna bağlı olmadığından ek JavaScript yürütülmesini beklemeden sayfayı görüntüler.
- Rehidrasyon: Oluşturulan HTML’nin yanı sıra sunucu, istemci tarafı etkileşimini ve dinamik davranışı yönetmek için gereken JavaScript’i de gönderir. Bu JavaScript, statik HTML’yi tamamen etkileşimli bir web uygulamasına “yeniden nemlendirmekten” sorumludur ve sunucu tarafı oluşturmadan istemci tarafı etkileşimine sorunsuz bir geçiş sağlar. Örneğin, bir uygulamanın bir form gönderme düğmesi olduğunu varsayalım; yeniden doldurma işlemi, tıklama olayı dinleyicisini düğmeye ekleyerek tıklandığında etkinleşmesini sağlar. Rehidrasyon olmadan düğme tıklandığında etkileşimli olmayacaktır.
- Oluşturma işlemini tekrarlayın: Kullanıcı diğer sayfalara gittiğinde tarayıcı sunucuya yeni istekler gönderir ve işlem kendini tekrar eder.
Server-side rendering Avantajları
Daha hızlı yükleme süreleri
SSR, istemcinin içeriği oluşturmadan önce JavaScript kodunun yüklenmesini beklemesine gerek kalmadığından, bir web sayfasının ilk yükleme süresini iyileştirir. Artan yükleme hızı, daha iyi bir kullanıcı deneyimine ve First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) gibi gelişmiş Temel Web Verilerine yol açar.
SEO'yu iyileştirir
Google ve Bing gibi arama motorları, web sitelerini dizine eklemek ve sıralamak için web tarayıcılarını kullanır. Bu tarayıcılar, istemci tarafında oluşturulan web sitelerini anlamakta zorluk çekerler çünkü bir sayfanın içeriğini taramak için JavaScript’in yüklenmesini beklemek zorunda kalırlar. Bu yaklaşım düşük arama sıralamalarına yol açar.
SSR, istemciye tam olarak oluşturulmuş bir HTML dosyası göndererek bu sorunu giderir; bu, web tarayıcılarının bir web sayfasının içeriğini dizine eklemesini ve anlamasını kolaylaştırır. SEO için idealdir ve daha yüksek arama motoru sonuç sayfası (SERP) sıralamalarına yol açar.
Arttırılmış güvenlik
Sunucuda HTML oluşturmak güvenlik açıkları riskini azaltır. Bunun nedeni, SSR’nin istemciye herhangi bir uygulama mantığını veya kodunu göstermemesidir. Bunun yerine, temel uygulama ayrıntıları sunucuda kalır. Bu yaklaşım, hassas kullanıcı verilerini ve web sitesi bilgilerini korurken aynı zamanda kötü niyetli saldırıları da önlememize olanak tanır.
Daha zengin kullanıcı deneyimi
CSR genellikle web sitelerinin daha yavaş yüklenmesine neden olur çünkü tarayıcının şunları yapması gerekir:
- Gerekli HTML, CSS ve JavaScript dosyalarını indirin
- Kodu yürüt
- Bir sayfa için gerekli verileri getirmek üzere API çağrıları yapın
- Belge Nesne Modelini (DOM) Oluşturma
Kullanıcılar, CSR süreci gerçekleşirken bir yükleme ekranıyla karşılaşıyor, bu da kötü bir deneyim yaratabiliyor ve kullanıcıların site tam yüklenmeden siteden ayrılmasına neden olabiliyor.
Sunucu tarafı görüntülemeye geçerek web ziyaretçilerine daha zengin bir tarama deneyimi sunabiliriz. Bu işleme yöntemi, istemciye tamamen işlenmiş bir sayfa döndürerek ekran yükleme ihtiyacını ortadan kaldırır.
Düşük ağ bant genişliğine sahip cihazlarda daha iyi performans
Sunucu tarafı oluşturma sayesinde, düşük ağ bant genişliğine ve düşük işlem gücüne sahip cihazların, sayfa oluşturmanın ağır yükünü taşıması gerekmez. Bu, içeriğin yüklenmesi ve görüntülenmesi için gereken süreyi önemli ölçüde azaltarak daha sorunsuz bir kullanıcı deneyimi sağlar.
SSR, istemcinin JavaScript dosyalarını alıp yürütmesine gerek olmadığından cihaz veri tüketimini azaltır. Bu, sınırlı ağ bant genişliğine sahip kullanıcılar için büyük bir avantajdır.
Server-side rendering Dezavantajları
Artan sunucu yükü
Sunucu tarafı işleme, sunucunun aldığı her istek için işleme işlemini gerçekleştirmesini gerektirir. Bu, özellikle trafiğin yoğun olduğu dönemlerde veya karmaşık sayfaların işlenmesi sırasında sunucuya önemli bir yük getirebilir. Sonuç olarak, sunucu tarafı işleme, artan işlem taleplerini karşılamak için ek sunucu kaynakları gerektirebilir ve bu da potansiyel olarak daha yüksek barındırma maliyetlerine yol açabilir.
Gecikmiş web sitesi etkileşimi
Sunucu tarafı oluşturma, bir web sitesinin etkileşimini ve yanıt verme hızını sınırlayabilir. İçerik sunucuda önceden oluşturulurken dinamik formlar veya gerçek zamanlı güncellemeler gibi etkileşimli öğelerin tarayıcının istemci tarafı JavaScript kodunu alıp yürütmesini beklemesi gerekir. Bu, özellikle istemci tarafı kodun ağır olduğu ve indirilmesinin daha uzun sürdüğü durumlarda, etkileşim süresinin (TTI) daha yavaş olmasına neden olabilir.
Artan maliyet
Özellikle yüksek trafiğe sahip web siteleri için sunucu tarafı oluşturmanın uygulanması, ek sunucu kaynakları gerektirir ve bu da gereken hesaplama gücü nedeniyle daha yüksek maliyetlere yol açabilir.
Kendimize sunucu kurmak yerine sunucu tarafı çerçeveleri destekleyen Vercel ve Netlify gibi barındırma sağlayıcılarını kullanabiliriz. Ancak SSR web siteleri daha fazla hesaplama kaynağı tükettiği için maliyet etkileri devam etmektedir.
Artan geliştirme karmaşıklığı
Sunucu tarafı işlemenin uygulanması, istemci tarafı işlemeye kıyasla daha karmaşık olabilir. Oluşturma işlemini gerçekleştirmek için ek sunucu tarafı mantığı ve altyapısı gerekir. Bu karmaşıklık, özellikle SSR konusunda sınırlı kaynaklara veya deneyime sahip ekipler için geliştirme süresini, maliyeti ve bakım çalışmalarını artırabilir.
SSR geliştirme sürecini karmaşıklaştırsa da, bu ilk yatırım sonuçta yüksek arama motoru görünürlüğü, iyileştirilmiş temel web verileri ve daha iyi bir kullanıcı deneyimi ile karşılığını verir. Sonuçta bu, SSR’yi çabaya değer kılar.
Pek çok çerçeve ve kitaplıkla uyumlu değil
CSR’yi destekleyenlerle karşılaştırıldığında çok az çerçeve sunucu tarafı oluşturma için yerleşik destek sağlar. Bu, çalışabileceğimiz araç sayısını sınırlıyor. Yerleşik destek sağlamayan kitaplıklara ve çerçevelere SSR ekleyebilsek de bu, geliştirme sürecini daha da karmaşık hale getirecektir.
Çoğu çerçeve SSR’yi desteklemese de sunucu tarafında oluşturulan web siteleri oluşturmak için kullanabileceğimiz Next.js, Nuxt.js, Astro ve SvelteKit gibi popüler seçenekler vardır. Örneğin The Washington Post, SSR destekli web sitesi için Next.js’yi kullanırken Appwrite, SvelteKit’i kullanıyor.
Server-side rendering ne zaman kullanılmalı?
Sunucu tarafı işlemenin avantajları olmasına rağmen her zaman en iyi işleme stratejisi değildir. SSR’nin CSR’den daha iyi bir seçenek olduğu senaryoları ve projeleri inceleyelim.
SEO bir öncelik olduğunda
Sunucu tarafı oluşturma, bir web sitesinin SEO performansını artırmada kritik bir rol oynar. Bunun nedeni, arama motoru tarayıcılarına tam olarak oluşturulmuş HTML sunarak içeriğin dizine ekleme için hazır olmasını sağlamasıdır. Doğru indeksleme, daha iyi arama motoru sıralamalarına ve artan organik trafiğe yol açabilir.
Hızlı bir ilk sayfa yüklemesi gerektiğinde
Sunucu tarafı oluşturma, HTML’yi sunucuda işleyerek ve istemcinin tarayıcısına teslim ederek ilk sayfa yükleme süresini iyileştirir. Bu yaklaşım, kullanıcıların istemci tarafı JavaScript’in yüklenmesini ve çalıştırılmasını beklemeden en son içeriği görebilmelerini sağlar.
SSR, sayfa yükleme sürelerini iyileştirir ve bu, özellikle bloglar gibi içerik ağırlıklı web siteleri ve haber yayınları veya e-ticaret web siteleri gibi sıklıkla güncellenen web sitesi içeriği için geçerlidir. İçeriğin sunucuda gerçek zamanlı olarak oluşturulması, ilk yükleme süresini önemli ölçüde azaltır ve kullanıcıların güncel içeriğe mümkün olan en kısa sürede erişmesine ve kullanmasına olanak tanır. Bu, kullanıcı etkileşimini artırabilir ve hemen çıkma oranlarını azaltabilir.
Yavaş internet bağlantılarına hizmet verirken
Sunucu tarafı oluşturma, yavaş internet bağlantısı olan web ziyaretçilerine daha iyi bir deneyim sağlar. HTML’yi sunucuda oluşturup doğrudan tarayıcıya göndererek kullanıcılar, yavaş ağlarla uğraşırken bile içeriğe daha hızlı erişir. Bir web ziyaretçisinin internet hızından bağımsız olarak daha sorunsuz bir deneyim sağlar. Örneğin, hedef kitleniz ağ kapsama alanının zayıf olduğu bölgelerde bulunuyorsa SSR, zayıf ağa rağmen web sitelerinin hızlı yüklenmesini sağlar.
Bu yazımızda ssr nedir ve nasıl çalışır; avantajlarını ve dezavantajlarını gördük. Bir diğer yazımızda görüşmek üzere
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
