Next.js'de yönlendirme önceden getirme

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

Meltem Melda
Milica Mihajlija
X GitHub Ana sayfa

Neler öğreneceksiniz?

Bu gönderide, Next.js'de 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ştirileceğini öğreneceksiniz.

Next.js'de yönlendirmeyi manuel olarak ayarlamanıza gerek yoktur. Next.js, ./pages/ dizini içinde dosya ve klasör oluşturmanıza olanak tanıyan dosya sistemi tabanlı yönlendirme özelliğini kullanır:

Şu üç dosya içeren sayfa dizininin ekran görüntüsü: index.js, margherita.js ve ananas-pizza.js.

Farklı sayfalara bağlantı vermek için, eski iyi <a> öğesine benzer şekilde <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 sayfaya giden bağlantıyı izlediğinizde 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, bir bağlantıyı izlediğinizde arkasındaki bileşenin getirilme olasılığı yüksektir. Bu, yeni sayfalara daha hızlı gitmeyi sağlayarak uygulama duyarlılığını iyileştirir.

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

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öster'e, ardından Tam Ekran'a tam ekran basın.

  1. Geliştirici Araçları'nı açmak için "Control+Shift+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 öğesini yüklediğinizde, Ağ sekmesinde margherita.js ürününün de indirildiği gösterilir:

margherita.js&#39;nin vurgulandığı Geliştirici Araçları Ağ sekmesi.

Otomatik önceden getirme nasıl çalışır?

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'sini kullanır. Ayrıca, ağ bağlantısı yavaş olduğunda veya kullanıcılar Save-Data özelliğini açtığında önceden getirme özelliğini devre dışı bırakır. Next.js, bu kontrollere dayanarak sonraki gezinmeler için bileşenleri indirmek üzere <link rel="preload"> etiketlerini dinamik olarak ekler.

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

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

Gereksiz içerikleri indirmemek amacıyla <Link> hizmetindeki prefetch özelliğini false değerine 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 prefetch değeri false değerine ayarlanmış olarak <Link> ile pineapple-pizza.js değeri arasında bir değer vardır:

Ağ etkinliğini incelemek için ilk örnekteki adımları uygulayın. index.js aracını yüklediğinizde Geliştirici Araçları Ağı sekmesinde margherita.js adlı araç indirilmişken pineapple-pizza.js indirilmemiştir:

margherita.js&#39;nin vurgulandığı Geliştirici Araçları Ağ sekmesi.

Özel yönlendirmeyle önceden getirme

<Link> bileşeni, çoğu kullanım durumu için uygundur ancak yönlendirme yapmak için kendi bileşeninizi de oluşturabilirsiniz. Next.js, next/router içinde kullanılabilen yönlendirici API ile bu işlemi sizin için kolaylaştırır. Yeni bir rotaya gitmeden önce 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 önceden getirme ekleyebilirsiniz. Önceden getirmeyi yönlendirme kodunuza uygulamak için useRouter adresindeki prefetch yöntemini kullanın.

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

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

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

Bağlantıyı tıkladığınızda yönlendirme handleClick üzerinden tamamlanır. Bir mesaj konsola kaydedilir ve push yöntemi, href özelliğ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> - margherita.js ve pineapple-pizza.js değerleri bulunur. prefetch özelliği, /margherita web sitesinde true ve /pineapple-pizza sitesinde false olarak ayarlandı.

<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 uygulamasının indirildiği, pineapple-pizza.js uygulamasının indirilmediği gösterilir:

margherita.js&#39;nin vurgulandığı Geliştirici Araçları Ağ sekmesi.

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

Geliştirici Araçları Konsolu&#39;nda &#39;Next.js ile eğlenceli vakit geçirme&#39; iletisi görüntüleniyor.

Sonuç

<Link> kullanıldığında Next.js, bağlantı verilen sayfayı oluşturmak için gereken JavaScript'i otomatik olarak önceden getirerek 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. Nadiren ziyaret edilen sayfalar için önceden getirme işlevini devre dışı bırakarak içeriği gereksiz yere indirmekten kaçının.