Next.js'de yönlendirme önceden getirme

Next.js'in rota önceden getirme ile gezinmeleri nasıl hızlandırdığı ve bu özelliği nasıl özelleştirebileceğiniz.

Milica Mihajlija

Bu yayında, Next.js'te 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ştirebileceğinizi öğreneceksiniz.

<Link> bileşeni

Next.js'te yönlendirmeyi manuel olarak ayarlamanız gerekmez. Next.js, dosya sistemi tabanlı yönlendirme kullanır. Bu sayede, ./pages/ dizininde dosya ve klasör oluşturmanız yeterlidir:

Farklı sayfalara bağlantı vermek için <Link> bileşenini, eski <a> öğesini kullanır gibi 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 fazla işlem yapar. Normalde bir sayfaya yönlendiren bağlantıyı tıkladığınızda sayfa 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, bağlantıyı tıkladığınızda bağlantının arkasındaki bileşen zaten getirilmiş olur. Bu özellik, yeni sayfalara geçişi hızlandırarak uygulamanın yanıt verme hızını artırır.

Örnek uygulamada, index.js sayfası margherita.js ile <Link> bağlantısı veriyor:

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

1. Chrome Geliştirici Araçları'nı açı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 öğesini yüklediğinizde Ağ sekmesinde margherita.js öğesinin de indirildiği gösterilir:

Otomatik önceden getirme özelliğinin işleyiş şekli

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

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

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

Gereksiz içeriklerin indirilmesini önlemek için prefetch özelliğini <Link> üzerinde false olarak ayarlayarak nadiren ziyaret edilen sayfalar için önceden getirme özelliğini devre dışı bırakabilirsiniz:

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

Bu ikinci örnek uygulamada, index.js sayfasında <Link> ile pineapple-pizza.js arasında prefetch değeri false olarak ayarlanmış bir <Link> var:

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

Özel yönlendirmeyle önceden getirme

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

Yönlendirme için özel bileşenler kullandığınızda bu bileşenlere önceden getirme de ekleyebilirsiniz. Yönlendirme kodunuzda önceden getirme özelliğini uygulamak için prefetch yöntemini kullanın.useRouter

Bu örnek uygulamadaki components/MyLink.js bölümüne göz atın:

Önceden getirme işlemi, useEffect kancası içinde yapılır. Bir <MyLink> üzerindeki prefetch özelliği true olarak ayarlanmışsa <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 içinde yapılır. Konsola bir mesaj 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 ve pineapple-pizza.js bağlantısı 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 öğesini yüklediğinizde Ağ sekmesinde margherita.js öğesinin indirildiği, pineapple-pizza.js öğesinin ise indirilmediği gösterilir:

Bağlantılardan birini tıkladığınızda Console, "Having fun with Next.js." (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. Bu da yeni sayfalara gitmeyi hızlandırır. Özel yönlendirme kullanıyorsanız önceden getirme işlemini kendiniz uygulamak için Next.js yönlendirici API'sini kullanabilirsiniz. Nadir ziyaret edilen sayfalar için önceden getirme özelliğini devre dışı bırakarak gereksiz içerik indirmeyi önleyin.