Next.js, rota önceden getirme özelliğiyle gezinmeleri nasıl hızlandırır ve nasıl özelleştirir?
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
görüntüleyebilirsiniz. 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
.
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 işaretleyin.
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.
ziyaret edin.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.