Frontend Kapsam
HTML Rendering Nerede Yapılmalı ? Tarayıcı (CSR) veya Sunucu (SSR)
Web Uygulaması geliştirirken nihai DOM oluşturan JS çalıştırılma işlemi hangi ortamda yapılmalı ? Tarayıcı üzerinde mi Client Side Rendering kullanılarak mı yoksa Sunucu üzerinde mi Server Side Rendering yöntemiyle mi?
Bu konu çok önemli Neden ? Çünkü araştırdığını konular, seçeceğiniz teknolojiler veya sonrasında alacağınız kararlar bu konunun iyi anlaşılmasına bağlı. Rendering işleminin kimin sorumluluğu olması gerektiğini karar verdikten sonra buna göre teknolojiler ve kütüphaneler kullanacaksınız.
Client Side Rendering → Ember, Angular, React, Vue, Svelte Webpack ile bundle edildikten sonra JS kodları tarayıcıya aktarılarak tarayıcı üzerinde işletilir. Görselleştirme (D3.js vb..), Chart (Rechart vb..)ve Etkileşimli UI bileşenleri aynı şekilde tarayıcı üzerinde ele alınır.
Server Side Rendering, Pre-Rendering, Static Rendering : Burda JS tarayıcıda DOM oluşturulmakta etkisinin olmadığı rendering bütün olarak ele alınmıştır. Static Site Generator → Gatsby, Jekyll, Hugo veya sunucuda çalışarak dinamik sayfa üretimi yapacak olan Next, Nuxt, Nest ve Sapper gibi kütüphaneler seçilebilir. Not: Bu server-side /static rendering kendi içerisinde ayrımını hangi web sayfası türleri için hangi teknolojiler seçilebileceğini ayrı bir yazıda anlatıyor olacağım.
Gelelim şimdi Tarayıcı veya Sunucu ayrımını nasıl yapacağımıza Aşağıdaki sorulara verdiğiniz cevaplar doğrultusunda terazinin hangi tarafı ağır ise buna göre CSR / SSR seçmeniz gerekir.
Not : Burada uyguladığım yöntem benim kendi deneyimlerimle çıkarımların sonucu kendimce yaptığım bir yöntemdir. Baktığınızda bazı mevcut web uygulamaları bu yapıya uymuyor olabilir..
1. KONUYU ÖRNEKLER İLE DEĞERLENDİRELİM
Konuyu biraz örnekler ile değerlendirelim. Bunun öncesinde söyle bir yöntem geliştirelim
- CSR için eksi değerler verelim , SSR için artı değerler verelim . Bunları toplayınca değer negatif ise ClientSide , pozitif ise ServerSide teknolojileri tercih edin.
- A → Davranış Odaklı (-1) , İçerik Odaklı (+1)
- B → İçerik Oluşturma ve Güncelleme(-1) , İçerik Sunmak (+1)
- C → Etkileşim Fazla (-1), Etkileşim Az (+1)
- D → Kişiye/Gruba Özel (-1), Herkese Açık (+1)
- E → SEO/ Arama Önemli Değil (-1) , SEO / Arama Önemli(+1)
A. Desktop Kullandığınız Araçların Web Aktarılmış Versiyonları
Doc, Excel, Sunum, Paint(Boyama), Draw(Çizim), Map(Harita), Chart vb.. araçlar sizin içerik(metin, resim, müzik, video vb..) üretmenizi ve bunları güncellemenizi sağlayan araçlar çok fazla kullanıcı etkileşimi ihtiyacı olan araçlar üretmek için.düşünürsek
- A → -1 , B → -1, C → -1, D → -1, E → -1 topladığımızda -5 → CSR (Client Side Rendering) teknolojilerini seçmek mantıklıdır.
B. Doküman İçerik Sayfaları
Gazete, Blog , Wikipedia, Uygulamaların Landing Sayfaları, Help sayfaları vb..statik içerik sayfaları için düşünelim.
- A → +1 , B → +1, C → +1(okuma), D → +1, E → +1 topladığımızda +5 → SSR (Server Side Rendering) teknolojilerini seçmek mantıklıdır.
C. Sosyal Medyalar
Facebook, Twitter, Instagram vb sosyal medyayı incelersek işler biraz karışık çünkü hem veri üretme , hem de tüketme bir arada olan uygulamalar bunlar. Bu durumda 2 tarafada değer vermek gerekiyor
- A → -1 & +1 , B →-1 & +1, C → -1 , D → -1, E → -1 topladığımızda -3 → CSR (Client Side Rendering) teknolojilerini seçmek mantıklıdır. Bunun yanında Facebook sayfalarını üretirken (BigPipe ServerSide kullanıyor o ayrı)
D. Multimedia İçerik Sayfaları
Netflix, Amazon Prime, Spotify multimedia içerik
- A → -1 & +1 , B →+1, C → -1 , D → +1, E → +1 topladığımızda +2 → SSR (Server Side Rendering) teknolojilerini seçmek mantıklıdır.
D. E-Ticaret Siteleri
Amazon, Hepsiburada, Trendyol, N11, vb… eticaret siteleri
- A → +1 , B →+1, C → -1 & +1 , D → +1, E → +1 topladığımızda +4 → SSR (Server Side Rendering) teknolojilerini seçmek mantıklıdır.
E. Form ve Girdi Ekranları Olan Web Uygulamaları
Bankacılık , Sigortacılık veya Online Hizmet Merkezi gibi veri girdisi olan ekranların olduğu uygulamalar.
- A →- 1 , B →-1, C → -1 , D → -1, E → — 1 topladığımızda +5 → CSR (Client Side Rendering) teknolojilerini seçmek mantıklıdır.
Bu örnekleri kendinizde düşünerek arttırabilirsiniz. Ben sadece basit bir soru/cevap ile teknoloji öneri yöntemi kurdum. Bunu kullanmak size kalmış 😃
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
