Next.js'de yönlendirme önceden getirme

Next.js, rota önceden getirme özelliğiyle gezinmeleri nasıl hızlandırır ve nasıl özelleştirir?

Milica Mihajlija

Neler öğreneceksiniz?

Bu gönderide, Next.js'de yönlendirmenin işleyiş şeklini, 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, yalnızca dosya ve klasör oluşturmanızı sağlayan dosya sistemi tabanlı yönlendirme kullanır ./pages/ dizininde:

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

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

Gezinme için <Link> bileşenini kullandığınızda, Next.js sizin için hazır. 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 sayfa yüklediğinizde, arkasındaki bileşen zaten getirildiğini gösterir. Bu şekilde yeni sayfalarda daha hızlı gezinmeyi sağlayarak uygulamanın duyarlılığını artırır.

Aşağıdaki örnek uygulamada, index.js sayfası margherita.js için bir <Link>:

margherita.js öğesinin ö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 .

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

2. Ağ sekmesini tıklayın.

3. Önbelleği devre dışı bırak onay kutusunu seçin.

4. Sayfayı tekrar yükleyin.

index.js uygulamasını yüklediğinizde Ağ sekmesinde margherita.js değeri şu şekilde gösterilir: indirilenler:

Otomatik önceden getirmenin işleyiş şekli

Next.js, yalnızca görüntü alanında görünen bağlantıları önceden getirir ve Intersection Observer API inceleyeceğiz. Ağ bağlantısı yavaş olduğunda da önceden getirme özelliğini devre dışı bırakır veya kullanıcılar Save-Data açıldı. Next.js, bu kontrollere dayanarak<link rel="preload"> yardımcı olur.

Next.js yalnızca JavaScript'i getirir; uygulamaz. Bu şekilde siz ziyaret edene kadar, önceden getirilen sayfanın isteyebileceği ek içerikleri indirmek. bağlantıyı tıklayın.

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

Gereksiz içeriğin indirilmesini önlemek için nadiren <Link> ürününde prefetch özelliğini false olarak ayarlayarak ziyaret edilen sayfaların sayısı:

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

Bu ikinci örnek uygulamada, index.js sayfası, her bir <Link> prefetch ile pineapple-pizza.js, false olarak ayarlandı:

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

Özel yönlendirme ile önceden getirme

<Link> bileşeni çoğu kullanım alanı için uygundur, ancak kendiniz de kendi bileşeninizi yürütmeniz gerekir. Next.js, Yönlendirici API'sini next/router adresinde bulabilirsiniz. Yeni bir sayfaya gitmeden önce bir şey yapmak (örneğin, bir form göndermek) istiyorsanız özel yönlendirme kodunuzda tanımlayabilirsiniz.

Yönlendirme için özel bileşenler kullandığınızda bunlara önceden getirme de ekleyebilirsiniz. Yönlendirme kodunuzda önceden getirmeyi uygulamak için şuradan prefetch yöntemini kullanın: useRouter.

Bu örnek uygulamada components/MyLink.js uygulamasına göz atın:

Önceden getirme işlemi useEffect kancası. Öğe <MyLink> üzerindeki prefetch özelliği, true <MyLink> oluşturulduğunda href özelliği önceden getirilir:

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

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

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

Bu örnek uygulamada, index.js sayfasında <MyLink> - margherita.js ve pineapple-pizza.js. prefetch özelliği, /margherita adresinde true olarak ayarlandı ve /pineapple-pizza tarihinde false adlı alıcıya.

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

index.js uygulamasını yüklediğinizde Ağ sekmesinde margherita.js değeri şu şekilde gösterilir: indirilmedi ve pineapple-pizza.js değil:

İki bağlantıdan birini tıkladığınızda, Konsol günlüğe "Next.js ile eğlenceli vakit geçiriyor" ifadesini kaydeder. ve yeni rotaya geçiş yapar:

Sonuç

<Link> kullandığınızda Next.js, bağlantılı sayfayı oluşturarak yeni sayfalara daha hızlı gitmeyi sağlar. Şu durumda: kullanıyorsanız, özel yönlendirme URL'sini uygulamak için Next.js yönlendirici API'sini yapmanızı öneririz. İçeriği gereksiz yere indirmekten kaçınmak için önceden getirme özelliğini kullanabilirsiniz.