Next.js'in App Router'ına geçiş yaptığımda en çok yanlış anlaşılan konunun caching olduğunu fark ettim. Varsayılan davranışları olduğu gibi kabul etmek, ya gereksiz yere statik içerik üretmenize ya da her istekte sunucuyu yormanıza neden olabiliyor.
BalkoLüx projesinde ürün listeleme sayfalarını yeniden ele aldığımda ilk yaptığım şey, hangi verinin gerçekten her istekte değişmesi gerektiğini, hangisinin dakikalarca aynı kalabileceğini netleştirmekti. Stok durumu gibi sık değişen veriler için kısa revalidate süreleri, kategori ve marka listeleri gibi nadiren değişen veriler için ise on-demand revalidation kullanmak, sunucu yükünü önemli ölçüde azalttı.
Server component'lerin asıl gücü, veri çekme mantığını istemciye hiç göndermemesinde. Bir ürün detay sayfasında önceden üç farklı client-side fetch ile çözülen veri ihtiyacını tek bir server component içinde paralel Promise.all çağrılarıyla topladığımda, ilk içerikli boyamaya kadar geçen süre gözle görülür şekilde kısaldı.
Streaming ile Suspense sınırlarını doğru yerlere koymak da kritik. Sayfanın kritik olmayan bölümlerini (örneğin yorumlar veya benzer ürünler) ayrı Suspense sınırlarına almak, kullanıcının asıl içerikle daha hızlı etkileşime geçmesini sağlıyor; geri kalan kısımlar arka planda akarken sayfa zaten kullanılabilir durumda oluyor.
Sonuç olarak performans optimizasyonu büyük ölçüde mimari bir karardır, sonradan eklenen bir özellik değil. Doğru sınırları en başta çizmek, sonradan yamalar yapmaktan çok daha az maliyetli.
{ }