Next.js Sitelerinin Hızını Arttırmak

Kapak resmi

Hız Ölçümü nedir ?

Web sitesinin hızını değerlendirirken, temel bazı metriklere odaklanıyoruz. Bunlar arasında server response süresi, render süresi ve user interaction süresi bulunuyor. Biraz bunlar nedir ve nasıl indirgeyebiliriz gibi konulara değinmek istiyorum.

Sitenin hızını ölçerken bu verileri doğru ölçmek için Google PageSpeed Insights ve Vercel Speed Insights (ikiside free) gibi güvenilir araçlar bize belli ölçekler sağlayarak sayfa performansı sorunlarını teşhis etmemizde yardımcı oluyor. Bunları kullanmakta fayda var

Server Response Hızını Artırma: Next.js’in render yöntemlerinden yararlanarak server response hızını artırmak için şunları yapabiliriz

• 1 — Sayfanın tamamını pre-render etmek (build-time): Sayfanın CDN’den sunulabilmesini sağlar. Dinamik içeriği bulunmayan sayfaların (Policy pages, landing page vs gibi) pre-render yapılması, render edilmiş sayfanın direk sunulmasını sağlar.
• 2 — Kısmi pre-render (partial pre-render): Sayfanın statik kısımlarını CDN’den sunarken dinamik kısımları stream ediyor. Yani kullanıcı sayfaya giriyor ve sayfanın belli kısımları sonradan yükleniyor. Vercel’in dashboard’ında sanırım çalışma şekli böyle.
• 3 — Son çare : Sayfa yüklenene kadar loading ekranı göstermek 🤮 . Next.js’de sayfa component’leri için Suspense kullanabiliyoruz.
• 4 — Fetch isteklerini cache’lemek: SSR component’lerde fetch ile api’den veri çekme işlemi yapıyorsak bu işlemi her istekte yapmamak için cache’leyebiliyoruz şöyle kod örneğini bırakıyorum ⤵

revalidate: 120 örneği

Burada yazan revalidate özelliği saniye cinsinden kaç saniyede bir verinin yenileceğini belirttiğimiz özellik oluyor. Yani, 120 saniyede bir veriyi yeniden çekmek için istek atacak ama o süre içinde gelen istekler için cache’de tuttuğu veriyi vericek. Çok güzel özellik değil mi ? 🧐

Daha da iyisi var. Bu yöntemde bellir bir süre vermiyorsunuz projenizde cache’lenecek istekleri tag’liyorsunuz.(Yani bir isim veriyorsunuz gibi düşünün eğer React-query kullandıysanız benzer bir mantık onda da vardı.) Tag’ledikten sonra gerektiği zaman revalidate edilecek tag’i belirtmeniz yeterli, taa ki yeniden revalidate edecek kod çalışana kadar cache’deki veri kullanılacak. Kod örneği daha iyi anlamanızı sağlar ⤵

tags:[‘user-posts’] örneği

Bu örnekte ‘user-posts’ adında bir tag verdik bu isteğe daha sonra cache’deki verilerin güncellenmesini istiyorsak (yeni bir post eklendiğinde mesela) şöyle bir işlem yapıyoruz ⤵

revalidateTag(‘user-posts’) örneği

Ve bloğun sonuna geldik 😅