NextJS Render Teknikleri

Bilenler bilir web’i sevdiğim gibi rendering tekniklerini çok severim. Hatta bu tekniklerle ilgili geçen sene FolksDev’in düzenlediği yazılımcı günlerinde NextJS: Render Teknikleri sunumunu anlatmıştım.

Bugün de Twitter’da delba’nın paylaştığı rendering tweeti oldukça hoşuma gitti ve edindiğim notları sizinle paylaşmak istedim.

Not: Tweet’te client/server component ayrımına çokça yer vermiş ancak ben basit tutmak adına ikisini de rendered HTML olarak kabul ettim. Dilerseniz yazıyı okuduktan sonra youtube videosuna göz atabilirsiniz.

SPA’lerin Çalışma Mantığı

CRA (Create React App) veya vite ile oluşturduğumuz React uygulamaların çalışma mantığı gibi düşünebiliriz.

1. Kullanıcı amazon.com gibi bir siteye gider.
2. Cloudflare’den boş bir index.html döner. (İçinde meta etiketleri ve <script> içeriği vardır.)
3. Chrome <script> etiketini farkeder ve react kodları (bundle) için bir istek atar.
4. React kodları Cloudflare’den indirilir ve ayrıştırılır.
5. Ürünlerin listelenmesi için React kodunda fetch() isteği ile veriler çekilmeye başlanır.
6. Data (REST API) sunucusundan JSON döner ve React kodu bu JSON’ı HTML etiketleriyle birlikte işleyerek render eder.

PHP + jQuery Çalışma Mantığı

ASP MVC kullananların da bootstrap ile birlikte kullandığı yöntem gibi düşünebiliriz.

1. Kullanıcı amazon.com/index.php ‘ye gider
2. Sunucu isteği alır ve arkada mysql ile DB’den ürün listesi çeker
3. Gelen ürünleri PHP kodunda for döngüsünde dönerek <li> elemanlarına render edilir.
4. HTML kodu client’a döner. Kullanıcı ürün listesini görür.
5. Chrome, HTML içinde <script> etiketlerinde bulunan jQuery kodu içeriği için Cloudflare’e istek atar.
6. Cloudflare’de bulunan jQuery.js kodu indirilip, addEventListener gibi metotlar ilgili butonlara bağlanır.
7. Kullanıcı artık etkileşimli bir şekilde sayfada işlem yapabilir hale gelir.

NextJS Dynamic Rendering

SPA’ler verimsiz olduğu için buna geçtik.

1. Kullanıcı amazon.com’a gider
2. Sunucu isteği alır ve arkada prisma ORM ve PostgreSQL ile DB’den ürün listesi çeker
3. Gelen ürünleri React kodunda .map() ile dönerek <li> elemanlarına render edilir.
4. Render sonucu oluşan HTML client’a döner.
5. Kullanıcı ürün listesini görüntüler.
6. Chrome, <script> etiketlerinde bulunan React kodu içeriği için Cloudflare’e istek atar.
7. Cloudflare’deki React kodu içeriği indirilir ve çalıştırılır.
8. Halihazırdaki ürün listesindeki HTML kodları, indirilen React kodu ile hydrate edilir. (Böylece butonlara vs event’ler bağlanarak sayfa çalışır hale gelir)

NextJS Static Rendering

Sunucu yormamak için HTML dosyasını datasıyla birlikte saklıyoruz.

Not: iki aşamada gerçekleşiyor: build ve client isteği

Build Aşaması

Bu aşamada yazılımcı kodu derleyip, içerisinde hazır ürün verileri olan HTML dosyalarını oluşturuyor.

1. Yazılımcı yarn build komutunu çalıştırır.
2. Build aşamasında getStaticProps() metodunda yer alan fetch işlemleri gerçekleştirilir.
3. Gelen data render edilerek, statik HTML ürün sayfaları oluşturulur.
4. Daha sonra bu ürün sayfaları Cloudflare’e deploy edilir.
5. Deploy sonrası kullanıcı amazon.com/matkap.html ‘a gider ve istek gönderilir.

Deploy Sonrası Client İsteği

Bu aşamada kod artık sunucuya atılır ve client’ın istek atması beklenir

1. Kullanıcı amazon.com/matkap.html sayfasına gider.
2. Sayfa Cloudflare’den getirilir ve ürün görüntülenir.
3. <script> etiketi ile sayfadaki etkileşim için Reactjs bundle dosyası isteği atılır ve Cloudflare’den indirilir.
4. Gelen bundle dosyası ile sayfa hydrate edilerek etkileşimli hale gelir.

Sonuç olarak

Kullanıcı tarafından en hızlı görüntülenecek içeriği sunan yapı belki de en son konuştuğumuz static rendering yapısıdır.

Ancak unutulmamalı ki her tekniğin kendine göre artı ve eksileri vardır ve uygulama geliştirilirken ekip know-how’ı ve mevcut teknolojilere göre değerlendirme yapılmalıdır.

Eğer bu yazıdan keyif aldıysanız ve bu gibi daha fazla içerik görmek istiyorsanız aşağıdaki alkış bölümünden en içten dileklerinizi gönderebilirsiniz. Bir sonraki yazıda görüşmek üzere…