Next.js, rota önceden getirme özelliğiyle gezinmeleri nasıl hızlandırıyor ve bunu nasıl özelleştiriyor?
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.
<Link>
bileşeni
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:
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
basın.
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
Ağ sekmesini tıklayın.
Önbelleği devre dışı bırak onay kutusunu seçin.
Sayfayı tekrar yükleyin.
index.js
öğesini yüklediğinizde, Ağ sekmesinde margherita.js
ürününün de indirildiği gösterilir:
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:
Ö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:
İ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:
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.