Next.js'de yönlendirme önceden getirme

Next.js, rota ön yükleme özelliğiyle gezinmeyi nasıl hızlandırır ve bu özelliği nasıl özelleştirebilirsiniz?

Milica Mihajlija

Neler öğreneceksiniz?

Bu yayında, Next.js'deki yönlendirmenin nasıl çalıştığını, hız için nasıl optimize edildiğini ve ihtiyaçlarınıza en uygun şekilde nasıl özelleştireceğinizi öğreneceksiniz.

<Link> bileşeni

Next.js'de yönlendirmeyi manuel olarak ayarlamanız gerekmez. Next.js, dosya sistemine dayalı yönlendirme kullanır. Bu sayede, ./pages/ dizininde dosya ve klasör oluşturabilirsiniz:

Farklı sayfalara bağlantı vermek için eski <a> öğesini kullandığınız gibi <Link> bileşenini kullanın:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Gezinme için <Link> bileşenini kullandığınızda Next.js sizin için biraz daha fazlasını yapar. Normalde bir sayfa, bağlantısını izlediğinizde indirilir ancak Next.js, sayfayı oluşturmak için gereken JavaScript'i otomatik olarak önceden getirir.

Birkaç bağlantı içeren bir sayfayı yüklediğinizde, bir bağlantıyı takip ettiğinizde bağlantının arkasındaki bileşenin zaten getirilmiş olması muhtemeldir. Bu, yeni sayfalarda daha hızlı gezinmeyi sağlayarak uygulamaların yanıt verme süresini iyileştirir.

Aşağıdaki örnek uygulamada index.js sayfası, <Link> ile margherita.js sayfasına bağlantı verir:

margherita.js öğesinin önceden getirilip getirilmediğini doğrulamak için Chrome Geliştirici Araçları'nı kullanın: 1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.

1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.

2. Ağ sekmesini tıklayın.

3. Önbelleği devre dışı bırak onay kutusunu işaretleyin.

4. Sayfayı tekrar yükleyin.

index.js'ü yüklediğinizde Ağ sekmesinde margherita.js'ın da indirildiği gösterilir:

Otomatik önceden getirmenin işleyiş şekli

Next.js, yalnızca görüntü alanında görünen bağlantıları önceden getirir ve bunları algılamak için Intersection Observer API'yi kullanır. Ayrıca, ağ bağlantısı yavaş olduğunda veya kullanıcılar Save-Data seçeneğini etkinleştirdiğinde ön getirme devre dışı bırakılır. Next.js, bu kontrollere dayanarak sonraki gezinmeler için bileşenleri indirmek üzere <link rel="preload"> etiketlerini dinamik olarak ekler.

Next.js, JavaScript'i yalnızca getirir, çalıştırmaz. Bu şekilde, siz bağlantıyı ziyaret edene kadar önceden getirilen sayfanın isteyebileceği ek içerikler indirilmez.

Gereksiz ön getirme işlemlerinden kaçının

Gereksiz içeriklerin indirilmesini önlemek için <Link> üzerindeki prefetch mülkünü false olarak ayarlayarak nadiren ziyaret edilen sayfalar için ön getirmeyi devre dışı bırakabilirsiniz:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

Bu ikinci örnek uygulamada, index.js sayfasında prefetch false olarak ayarlanmışken <Link> ile pineapple-pizza.js arasında bir bağlantı vardır:

Ağ etkinliğini incelemek için ilk örnekteki adımları uygulayın. index.js dosyasını yüklediğinizde DevTools Ağ sekmesinde margherita.js dosyasının indirildiği ancak pineapple-pizza.js dosyasının indirilmediği gösterilir:

Özel yönlendirmeyle ön getirme

<Link> bileşeni çoğu kullanım alanı için uygundur ancak yönlendirme yapmak için kendi bileşeninizi de oluşturabilirsiniz. Next.js, next/router sürümündeki yönlendirici API ile bunu sizin için kolaylaştırır. Yeni bir rotaya gitmeden önce bir işlem yapmak (ör. form göndermek) istiyorsanız bunu özel yönlendirme kodunuzda tanımlayabilirsiniz.

Yönlendirme için özel bileşenler kullandığınızda bunlara da ön getirme ekleyebilirsiniz. Yönlendirme kodunuza ön getirme özelliğini uygulamak için useRouter kaynağındaki prefetch yöntemini kullanın.

Bu örnek uygulamadaki components/MyLink.js öğesine göz atın:

Önceden getirme işlemi, useEffect kancası içinde yapılır. <MyLink> öğesindeki prefetch özelliği true değerine ayarlanırsa <MyLink> oluşturulduğunda href özelliğinde belirtilen rota önceden getirilir:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Bağlantıyı tıkladığınızda yönlendirme handleClick'te yapılır. Bir mesaj konsola kaydedilir ve push yöntemi, href içinde belirtilen yeni rotaya gider:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

Bu örnek uygulamada index.js sayfasında <MyLink> ile margherita.js arasında bir pineapple-pizza.js vardır. prefetch özelliği /margherita tarihinde true, /pineapple-pizza tarihinde ise false olarak ayarlanmıştır.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

index.js dosyasını yüklediğinizde Ağ sekmesinde margherita.js dosyasının indirildiği, pineapple-pizza.js dosyasının ise indirilmediği gösterilir:

Bağlantıların birini tıkladığınızda Konsol, "Next.js ile eğleniyoruz" ifadesini günlüğe kaydeder ve yeni rotaya gider:

Sonuç

<Link> kullandığınızda Next.js, bağlantılı sayfayı oluşturmak için gereken JavaScript'i otomatik olarak önceden getirir. Böylece, yeni sayfalara daha hızlı bir şekilde gidilir. Özel yönlendirme kullanıyorsanız önceden getirme işlemini kendiniz uygulamak için Next.js yönlendirici API'sini kullanabilirsiniz. Nadiren ziyaret edilen sayfalar için ön getirmeyi devre dışı bırakarak gereksiz yere içerik indirmekten kaçının.