React ile Sunucu Tarafı Oluşturma

Yayınlanan: 2021-05-27

React Hakkında Biraz

React, Facebook Developer Community tarafından oluşturulan ve sürdürülen açık kaynaklı bir ön uç JavaScript kitaplığıdır. Kullanıcı Arayüzleri veya UI Bileşenleri oluşturmak için kullanılır.

Ancak, bu tanım acemiler için tamamen anlaşılır olmayabilir. React'in kısa bir açıklamasını ve burada bulabileceğiniz çok detaylı teknik açıklamasına kadar size yol gösteren mükemmel bir blog gönderisine sahibiz.

Bir Web Sayfasının Yolculuğu | Sunucudan Tarayıcınıza

Sunucu Tarafı Oluşturma'nın ne olduğunu anlamak için, öncelikle aşağıdaki şemada açıklanmış olan bir web sayfasının ekranınızda nasıl göründüğüne dair bir genel bakış elde etmek önemlidir:

ssr-react-web sayfası-sunucu-tarayıcı
  1. Bir web sitesinin URL'sini yazdığınızda veya web sitesinin bağlantısını tıkladığınızda, tarayıcınız URL ile tanımlanan uygun sunucuya bazı dosyalar için bir istek gönderir.
  2. Sunucu, diğerleri arasında HTML ve JavaScript dosyaları gibi bazı dosyaları tarayıcınıza gönderir.
  3. Tarayıcınız bu dosyaları indirir ve 'işler' veya işler ve istediğiniz web sayfasını görebilir ve onunla etkileşim kurabilirsiniz.

Bu, bir web sayfasının yolculuğunun çok büyük bir basitleştirilmesidir, ancak bu görevi gerçekleştirmek için farklı alt adımları ve farklı yolları (Sunucu Tarafı Oluşturma dahil) açıklamak için yeterince iyi bir önsözdür.

'Normal' Bir İstemci Tarafı Oluşturma Web Sayfasının Yolculuğu

Bir önceki bölümde bahsedilen sürecin daha derinlerine inerek, bir web sitesini kullanıcı ekranlarında görüntülemek için uzun zamandan beri kullanılan İstemci Tarafı Oluşturma veya CSR olarak bilinen bir tekniğimiz var. Bu, aşağıdaki şemada açıklanmıştır:

ssr-with-react-csr-web sayfası işleme
  1. Bir web sitesinin URL'sini yazarken veya web sitesinin bağlantısını tıkladığınızda, tarayıcınız URL ile tanımlanan uygun sunucuya bazı dosyalar için bir istek gönderir.
  2. Sunucu, resim dosyaları, CSS dosyaları ve JavaScript dosyaları gibi diğer varlıklara referansları içeren HTML dosyasını gönderir.
  3. Tarayıcı, sunucuya yeniden bir istek gönderir ve HTML dosyasında referans verilen CSS ve JavaScript dosyaları da dahil olmak üzere tüm dosyaları indirir.
    1. Bu, kullanıcılar zayıf bir bağlantıya sahipse ve JavaScript dosyasının boyutu büyükse, bir web sitesinin yükleme süresinin artmasına katkıda bulunan bir faktör olabilir.
  4. Bu dosyalar tarayıcı tarafından indirildikten sonra, tarayıcı çerçeveyi veya kitaplığı çalıştırır (örneğin React) ve web sayfasını etkileşimli hale getirmekten sorumlu olan JavaScript dosyalarını ayrıştırır.
    1. Hız optimizasyonu açısından, bu nokta istemci makineye bağlıdır ve istemci düşük güçlü bir donanımsa, bu önemli ölçüde zaman alabilir.
    2. Bu adımlar gerçekleştirilirken kullanıcı hala yükleme ekranını görüyor
  5. Web sayfası nihayet tamamen yüklenir ve kullanıcı web sayfasını görebilir ve onunla etkileşim kurabilir.

Yukarıda bahsedilen adımlardan da anlaşılacağı gibi, bir kullanıcının bakış açısından, web sitesini ancak son adımda, gerekli tüm dosyalar istemci makine tarafından indirildikten ve oluşturulduktan sonra görebilir ve etkileşime girebilirler.

Çerçeveyi yürütme ve JavaScript dosyalarını ayrıştırmada istemci makinenin performansına bağlı olduğundan, bu çok uzun zaman alabilir.

Sunucu Tarafı Oluşturma Web Sayfasının Yolculuğu

Tek satırda açıklamak gerekirse, Sunucu Tarafı Oluşturma veya SSR, istemci tarafı JavaScript çerçeve web sitesini alıp CSR'de olduğu gibi istemci yerine sunucuda statik HTML ve CSS'ye dönüştürme işlemidir.

Aşağıda, bir web sayfasının React ile Sunucu Tarafı Oluşturma ile yaptığı yolculuğun resimli bir temsili verilmiştir:

ssr-with-react-ssr-web sayfası-rendering-with-react
  1. Bir web sitesinin URL'sini yazarken veya web sitesinin bağlantısını tıkladığınızda, tarayıcınız URL ile tanımlanan uygun sunucuya bazı dosyalar için bir istek gönderir.
  2. Sunucu, CSR'deki gibi yalnızca vanilya HTML dosyalarını göndermek yerine, tepki-dom/sunucudan içe aktarılan renderToString işlevini kullanarak uygulamayı dizeye dönüştürür
    1. Bu daha sonra index.html dosyasına enjekte edilir ve tarayıcıya gönderilir.
    2. Bu, SSR'nin can alıcı noktasının yattığı yerdir, çünkü bu, istemci makinesinin değil, sunucunun sayfayı oluşturduğu yerdir.
  3. Tarayıcı, görünümün tarayıcıda doldurulmasıyla sonuçlanan bu HTML dosyasını işler.
    1. Ancak bu henüz etkileşimli değildir, ancak kullanıcı web sayfasının son görünümünü görebilir.
  4. Tarayıcı, sunucuya yeniden bir istek gönderir ve JavaScript dosyaları da dahil olmak üzere HTML dosyasında referans verilen tüm dosyaları indirir.
  5. Tüm komut dosyaları indirildikten sonra, React bileşeni tekrar istemcide oluşturulur. Ancak bu sefer, üzerine yazmak yerine mevcut görünümü nemlendirir.
    1. Bir görünümü 'nemlendirmek', işlenen DOM (Belge Nesne Modeli) öğelerine herhangi bir olay işleyicisi eklediği, ancak işlenen DOM öğelerini olduğu gibi tuttuğu anlamına gelir. Bu şekilde, DOM öğelerinin durumu korunur ve gerçekleşen görünümün sıfırlanması olmaz.
  6. Web sayfası nihayet tamamen yüklenir ve kullanıcı artık 3. adımdan itibaren görebildikleri sayfayla etkileşime girebilir.

Bu nedenle, kullanıcının bakış açısından en büyük görsel değişikliklerden biri, web sayfasının oldukça hızlı bir şekilde 'görünür' hale gelmesidir, çünkü tarayıcının bakış açısından bakıldığında HTML oluşturma o kadar kaynak yoğun değildir.

Bu, doğal olarak sayfanın SSR olmayan bir uygulamadan daha hızlı yüklenmesini sağlamaz, ancak kullanıcılara JavaScript dosyaları indirilirken ve arka planda ayrıştırılırken web sayfasının görünümünü verir ve ardından web sayfası etkileşimli hale gelir. Bu, TTI, yani Etkileşim Süresi (bu, kullanıcının web sayfasını talep ettiği andan itibaren web sayfasının tamamen etkileşimli hale gelmesi için geçen süredir) web sayfasının görünür olması için gereken süreden biraz daha fazla olduğu anlamına gelir. tarayıcıda.

Bu nedenle, bir SSR senaryosunda, daha hızlı ilk oluşturma süresi için HTML ve CSS'nizin kullanıcılar için anlamlı olması gerekir ve yüklenmesi ertelendiği için JavaScript, HTML ve CSS için geliştirme olabilir.

SSR'nin React ile çalışması hakkında yaygın bir yanılgı , kullanıcının herhangi bir yeni veri talep etmesi gibi her değişiklikten sonra sunucunun tüm adımları tekrar tamamlaması ve yeni UI ile HTML dosyasını tarayıcıya göndermesidir, ancak durum böyle değildir. . Sayfada yalnızca kısmi bir güncelleme yapılır. Oluşturma sunucu tarafından yapılsa da, nihai çıktı, daha önce açıklandığı gibi 'hidratlanarak' DOM'a eklenir.

ssr-ile-tepki-ssr-artıları-eksileri

Sunucu Tarafı Oluşturma | Ne Zaman ve Ne Zaman Kullanılmamalı

  • Güçlü bir SEO'ya ihtiyacınız varsa, arama motorlarının taraması daha kolay olduğu için SSR'ye gidin.
  • Bloglar, haber siteleri, statik web siteleri ve metin ağırlıklı web siteleri gibi içerik odaklı ve etkileşim odaklı olmayan web siteleri için, SSR bir nimet olabilir, çünkü web sitenizin can alıcı noktasını, yani içeriğin hızla parlamasını sağlar.
  • Tarayıcıya gönderilecek dosyaları oluşturmak ve oluşturmak sunucu tarafında zaman ve çaba gerektirir. Bu nedenle, düşük bir sunucu ve işlem bütçeniz varsa, sunucunuza çok sayıda istek gönderileceğinden SSR uygulamamanız daha iyi olur.
    • Ancak Firebase gibi sağlayıcılarla, bulut işlevleriyle dinamik olarak içerik üretebiliriz ve sunucu bunu CDN önbelleğinde saklayabilir.
    • Bunun yapacağı şey, bir dahaki sefere kullanıcı istediğinde, dosyaların oluşturulmasının sunucu tarafından tekrar yapılmamasıdır. Bunun yerine, yalnızca yerel bir CDN ucundan sunulur ve daha az sunucu kaynağı kullanırken bir kullanıcının bakış açısından yükleme sürelerini iyileştirir.

React SSR için Nasıl İyidir?

React, sanal bir DOM (Belge Nesne Modeli) kavramını içerdiğinden SSR'yi uygulamak için mükemmel bir seçimdir.

Bu, geliştiricilerin React uygulamasının sanal bir sürümünü oluşturmasını ve sunucunun kendisinde bulundurmasını sağlar.

Bu, daha önce tartışıldığı gibi renderToString işlevini kullanarak onu bir HTML'ye dönüştürmeyi kolaylaştırır, bunu tarayıcıya gönderin, böylece tarayıcı oldukça hızlı bir şekilde işleyebilir ve istemci makinede sanal bir sürüm oluşturabilir.

Dolayısıyla, bu sanal sürümün sunucudan gönderdiğimiz HTML ile eşleştiği gerçeğine bakıldığında, React onu yeniden oluşturmayacak, böylece Etkileşim Süresini (TTI) azaltarak 'daha hızlı' bir web sayfası yüklenecek.

SSR, Tüm Gün, Her Gün!

Her şey için herkese uyan tek bir çözüm olmasını isterdik, ancak özellikle yeni teknolojiler söz konusu olduğunda durum bundan çok uzak. SSR'nin tonlarca faydası olmasına rağmen, daha önce tartışıldığı gibi SSR'nin iyi bir seçim olmayabileceği bazı durumlar vardır; son derece etkileşimli siteler bunun öncüsüdür.

İşte burada Creole Studios devreye giriyor. Teknoloji dünyasında ortaya çıkan hemen hemen her yeni teknolojiye her zaman ayak uyduran bir dizi teknoloji uzmanımız var. İster bir SSR ister CSR uygulaması olsun, iş ihtiyaçlarınızı anlayacak ve size özelleştirilmiş çözümler sunacağız ve emin olun, biz sizin için ağır işleri yaparken hiçbir şey için endişelenmenize gerek kalmayacak. Bizimle iletişime geçin ve fikirlerinizi kafanızdan bir uygulamaya dönüştürün!