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:
![Şu üç dosya içeren sayfalar dizininin ekran görüntüsü: index.js, margherita.js ve ananas-pizza.js.](https://web.dev/static/articles/route-prefetching-in-nextjs/image/screenshot-the-pages-dir-81addfb477754.png?authuser=5&hl=tr)
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
.
- 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 seçin.
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.