Next.js performansı: görseller, kod ve önbellek
Next.js, görsel optimizasyonu ve kod bölümleme gibi araçlar sunar. Sayfanın hızı yine de görsellerin boyutuna, gönderilen JavaScript'e, veri isteklerine ve önbellek kararlarına bağlıdır. Değişiklik yapmadan önce üretim sürümünü gerçek cihazlarda ölçün.
Görsel Optimizasyonu
Next.js Image bileşeni, uygun boyutta görsel sunmaya ve ekran dışında kalan görsellerin yüklenmesini ertelemeye yardımcı olur. Tarayıcı destekliyorsa WebP kullanılabilir; AVIF için images.formats ayarını yapılandırmanız gerekir. Görselin sayfada kaplayacağı alanı sizes ile belirtin.
Kod Bölümleme
Hemen gerekmeyen etkileşimli bileşenler için dinamik yüklemeyi değerlendirin. next/dynamic ile ssr: false seçeneği yalnızca istemci bileşenlerinde kullanılabilir. Sunucu tarafında gösterilmesi gereken içeriği sırf bu amaçla istemciye taşımayın.
Önbellek Stratejileri
Birden fazla katmanda doğru önbelleğe alma uygulayın:
- CDN önbelleği: Paylaşılabilir statik dosyalar ve uygun sayfa yanıtları için.
- Sunucudaki veri önbelleği: Aynı veriyi yeniden okumayı azaltmak için. Kullanıcıya özel veriyi ortak bir kayıt gibi saklamayın.
- İstemcideki veri önbelleği: SWR veya React Query, tarayıcıdaki isteklerin yeniden kullanılması ve arayüzün güncellenmesi için kullanılabilir. Bunlar sunucudaki API yanıtını kendiliğinden önbelleğe almaz.
- Statik sayfa üretimi: Sık değişmeyen içerikler için. Güncelleme gerektiğinde içeriğin ne zaman yeniden oluşturulacağını belirleyin.
Bir verinin değişmesi, farklı katmanlardaki bütün kopyalarının aynı anda yenilendiği anlamına gelmez. Veri önbelleği, üretilmiş sayfa ve tarayıcı görünümünü ayrı kontrol edin. Next.js sürümü ve yapılandırması varsayılan davranışları değiştirebilir; kullandığınız sürümün belgelerini ve üretim yanıtlarını birlikte inceleyin.
Server Components ile Performans
Sunucu bileşenlerinin kodu tarayıcıya gönderilmez. Veri okuma ve statik görünümü sunucuda tutmak JavaScript yükünü azaltabilir. İlk yanıtın süresini ayrıca ölçün; yavaş veri istekleri sayfanın açılmasını geciktirebilir.
Sonuç
Her değişiklikten sonra sayfa yüklenmesini ve etkileşimleri yeniden ölçün. Yerel geliştirme sunucusunun sonuçlarını üretim sürümüyle karıştırmayın; mobil cihaz ve yavaş bağlantı koşullarını da kontrol edin.
