Next.js 15 ve React Compiler ile web performansında yeni dönem

Bir web sitesinin hızlı olması, sunucunun hızlı olmasıyla ilgili değil. Kullanıcının cihazına ne kadar JavaScript indirdiğiniz ve tarayıcının o kodu çalıştırmak için ne kadar beklettiğiyle ilgili. Next.js'in App Router mimarisi bu iki maliyeti de doğrudan hedefliyor.

Server Components: varsayılan olarak sıfır JavaScript

App Router'da yazdığınız her bileşen, aksini söylemediğiniz sürece sunucuda çalışır ve tarayıcıya yalnızca sonucu gider. Bir kurumsal sitenin sayfalarının büyük bölümü — başlıklar, metinler, listeler, footer — hiçbir etkileşim içermez. Bunların istemciye JavaScript göndermesi için hiçbir sebep yok.

Pratikte kural şu: "use client" direktifini bileşen ağacının olabildiğince aşağısına koyun. Bütün sayfayı istemci bileşeni yapmak yerine, sadece animasyonlu veya durumlu olan küçük parçayı ayırın. Tek bir yanlış konumlandırılmış direktif, altındaki bütün ağacı istemciye taşır.

React Compiler: elle memoization'ın sonu

React ekosisteminde yıllardır useMemo, useCallback ve React.memo ile gereksiz render'ları elle engelliyorduk. Bu kod hem okunmayı zorlaştırıyor hem de çoğu zaman yanlış bağımlılık dizisiyle yazıldığı için ya işe yaramıyor ya da hataya yol açıyordu.

React Compiler bu işi derleme aşamasında kendisi yapıyor. Bileşenlerinizi sade yazıyorsunuz, derleyici hangi değerlerin yeniden hesaplanması gerektiğini kendi çıkarıyor. Sonuç: daha az kod, daha az hata, aynı performans.

En hızlı JavaScript, hiç göndermediğiniz JavaScript'tir.

Gerçekten fark yaratan üç ayar

• 01next/image ile görsellerin genişlik ve yükseklik değerlerini vermek — hem doğru boyutta dosya iner hem de sayfa yüklenirken içerik zıplamaz.
• 02next/font ile fontları kendi sunucunuzdan servis etmek. Harici font isteği hem bir DNS turu hem de gizlilik yükü demek.
• 03Üçüncü parti betikleri (analitik, sohbet widget'ı, harita) gerçekten gerekli olana kadar yüklememek. Çoğu sitede toplam JavaScript'in yarısından fazlası buradan gelir.

Ölçmeden iyileştirme olmaz

Her projeyi yayına almadan önce Lighthouse ve gerçek cihaz testinden geçiriyorum. Geliştirici makinesinde her site hızlıdır; asıl soru üç yaşındaki bir Android telefonda mobil veriyle ne olduğu. Bir sayfanın gerçekten hızlı olup olmadığına oradaki sayı karar verir.