Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.

Oluşturma, React kodunu HTML'ye dönüştürme işlemidir. Seçtiğiniz işleme yöntemi, üzerinde çalıştığınız verilere ve performansı ne kadar önemsediğinize bağlıdır.

Next.js'de oluşturma çok yönlüdür. Sayfaları istemci tarafı veya sunucu tarafı, statik veya artımlı olarak oluşturabilirsiniz.

Bu yöntemlerin nasıl çalıştığına ve her birinin nasıl performans gösterdiğine bir göz atın.

Sunucu Tarafı Oluşturma

Sunucu tarafı oluşturma (SSR) ile, bir kullanıcı bir web sayfasını ziyaret ettiğinde, tarayıcı o sayfa için sunucuya bir istek gönderir. Sunucu, gerekirse veritabanından gerekli verileri alır ve sayfa içeriğiyle birlikte tarayıcıya gönderir. Tarayıcı daha sonra bunu kullanıcıya görüntüler.

Tarayıcı, kullanıcının tıkladığı her bağlantı için bu isteği yapar, bu da sunucunun isteği her seferinde işlediği anlamına gelir.

Bu, web sitesinin performansını düşürebilir. Ancak, sunucu tarafında işleme, dinamik veri tüketen sayfalar için mükemmeldir.

instagram viewer

Bir kullanıcı her istediğinde sayfayı yeniden oluşturmak için getServerSideProps'u kullanın.

ihracatvarsayılanişlevEv({ veri }) {
geri dönmek (
<ana>
 // Kullanmakveri
</main>
 );
}
ihracatzaman uyumsuzişlevgetServerSideProps() {
// Harici api'den veri çek
sabit res = beklemek getir('https://.../data')
sabit veri = beklemek res.json()
// Sayfa bileşenine donanım olarak aktarılacak
geri dönmek { sahne: { veri } }
}

getServerSideProps yalnızca sunucuda çalışır ve şu şekilde çalışır:

  • Bir kullanıcı sayfaya doğrudan eriştiğinde, istek anında çalışır ve sayfa, döndürdüğü aksesuarlarla önceden oluşturulur.
  • Bir kullanıcı bir Sonraki bağlantısı aracılığıyla sayfaya eriştiğinde, tarayıcı onu çalıştıran sunucuya bir istek gönderir.

Yeni sürümde, bir sayfada veya düzende dinamik veri getirmeyi kullanarak sunucu tarafı işlemeyi etkinleştirebilirsiniz.

Dinamik veri getirme işlemleri, önbellek seçeneğini "depolama yok" olarak ayarlayarak özellikle önbelleğe almayı devre dışı bırakan fetch() istekleridir.

gidip getirmek('https://...', { önbellek: 'mağazasız' });

Alternatif olarak, yeniden doğrulamayı 0 olarak ayarlayın:

gidip getirmek('https://...', { sonraki: { yeniden doğrulama: 0 } });

Bu özellik şu anda beta aşamasındadır, bu yüzden bunu aklınızda bulundurun. Dinamik veri getirme hakkında daha fazla bilgiyi şurada bulabilirsiniz: Next.js 13 beta dokümanları.

İstemci Tarafında İşleme

Verileri sık sık güncellemeniz gerektiğinde veya sayfanızı önceden oluşturmak istemediğinizde istemci tarafı oluşturmayı (CSR) kullanmalısınız. CSR'yi sayfa düzeyinde veya bileşen düzeyinde uygulayabilirsiniz. Sayfa düzeyinde, Next.js, çalışma zamanında verileri getirir ve bileşen düzeyinde bittiğinde, bağlamada verileri getirir. Bu nedenle, CSR yavaş performansa katkıda bulunabilir.

Kullan useEffect() kancası istemcide sayfaları şu şekilde işlemek için:

içe aktarmak { useState, useEffect } itibaren 'tepki'
işlevEv() {
sabit [veri, setData] = useState(hükümsüz)
sabit [isLoading, setLoading] = useState(YANLIŞ)
useEffect(() => {
 yüklemeyi ayarla(doğru)


gidip getirmek('/api/get-data')
 .then((res) => res.json())
 .then((veri) => {
 setData (veri)
 yüklemeyi ayarla(YANLIŞ)
 })
 }, [])


eğer (isLoading) dönerse <P>Yükleniyor...</P>
 eğer (!data) dönerse <P>Veri yok</P>
geri dönmek (
<div>
 // Kullanmakveri
</div>
 )
}

SWR kancasını da kullanabilirsiniz. Verileri önbelleğe alır ve eskimesi durumunda yeniden doğrular.

içe aktarmak kullanımSWR itibaren 'swr'
sabit alıcı = (...args) => fetch(...args).then((res) => res.json())
işlevEv() {
sabit { veri, hata } = useSWR('/api/veri', alıcı)
 eğer (hata) dönerse <div>Yükleme başarısız</div>
 eğer (!data) dönerse <div>Yükleniyor...</div>
geri dönmek (
<div>
 // Kullanmakveri
</div>
 )
}

Next.js 13'te, dosyanın en üstüne "use client" yönergesini ekleyerek bir istemci bileşeni kullanmanız gerekir.

"kullanmakmüşteri";
ihracatvarsayılan () => {
geri dönmek (
<div>
// İstemci bileşeni
</div>
 );
};

SSR ve CSR arasındaki fark, verilerin SSR'de sunucudaki her sayfa isteğinde getirilmesi, CSR'de istemci tarafında verilerin getirilmesidir.

Statik Site Oluşturma

Statik site oluşturma (SSG) ile, sayfa veri getiriyor yapım süresi boyunca bir kez. Statik olarak oluşturulan sayfalar çok hızlıdır ve tüm sayfalar önceden oluşturulduğundan iyi performans gösterir. Bu nedenle SSG, satış sayfaları veya bloglar gibi statik içerik kullanan sayfalar için mükemmeldir.

Next.js'de, statik olarak oluşturmak istediğiniz sayfada getStaticProps işlevini dışa aktarmanız gerekir.

ihracatvarsayılanişlevEv({ veri }) {
geri dönmek (
<ana>
 // Kullanmakveri
</main>
 );
}
ihracatzaman uyumsuzişlevgetStaticProps() {
// Derleme sırasında harici API'den veri çek
sabit res = beklemek getir('https://.../data') 
sabit veri = beklemek res.json()
// Sayfa bileşenine donanım olarak aktarılacak
geri dönmek { sahne: { veri } }
}

Veritabanını getStaticProps içinde de sorgulayabilirsiniz.

ihracatzaman uyumsuzişlevgetStaticProps() {
 // Aramaişlevilegidip getirmekveriitibarenveri tabanı
sabit veri = beklemek getDataFromDB()
geri dönmek { sahne: { veri } }
}

Next.js 13'te, statik işleme varsayılandır ve önbelleğe alma seçeneğini kapalı olarak ayarlamadığınız sürece içerik getirilir ve önbelleğe alınır.

zaman uyumsuzişlevveri almak() {
sabit res = beklemek getir('https://.../data');
geri dönmek res.json();
}
ihracatvarsayılanzaman uyumsuzişlevEv() {
sabit veri = beklemek getData();
geri dönmek (
<ana>
 // Kullanmakveri
</main>
 );
}

Hakkında daha fazla öğren Next.js 13'te statik oluşturma dokümanlardan.

Artımlı-Statik Üretim

SSG'yi kullanmak istediğiniz ancak aynı zamanda içeriği düzenli olarak güncellemek istediğiniz zamanlar vardır. Artımlı statik oluşturmanın (ISG) yardımcı olduğu yer burasıdır.

ISG, statik sayfaları oluşturduktan sonra belirlediğiniz zaman aralığından sonra oluşturmanıza veya güncellemenize olanak tanır. Bu şekilde, tüm siteyi yalnızca ihtiyacı olan sayfaları yeniden oluşturmanız gerekmez.

ISG, kullanıcılara güncel içerik sunma avantajıyla birlikte SSG'nin avantajlarını korur. ISG, sitenizdeki değişen verileri tüketen sayfalar için mükemmeldir. Örneğin, şunları yapabilirsiniz: blog gönderilerini oluşturmak için ISR'yi kullanın böylece gönderileri düzenlediğinizde veya yenilerini eklediğinizde blog güncel kalır.

ISR'yi kullanmak için, bir sayfadaki getStaticProps işlevine revalidate pervanesini ekleyin.

ihracatzaman uyumsuzişlevgetStaticProps() {
sabit res = beklemek getir('https://.../data')
sabit veri = beklemek res.json()
geri dönmek {
 aksesuarlar: {
 veri,
 },
 yeniden doğrulama: 60
 }
}

Burada Next.js, 60 saniye sonra bir istek geldiğinde sayfayı yeniden oluşturmaya çalışacaktır. Bir sonraki istek, güncellenen sayfayla bir yanıtla sonuçlanacaktır.

Next.js 13'te, fetch'te revalidate'i şu şekilde kullanın:

gidip getirmek('https://.../data', { sonraki: { yeniden doğrulama: 60 } });

Zaman aralığını verilerinizle en iyi şekilde çalışacak şekilde ayarlayabilirsiniz.

Oluşturma Yöntemi Nasıl Seçilir?

Şimdiye kadar Next.js'deki dört işleme yöntemini öğrendiniz — CSR, SSR, SSG ve ISG. Bu yöntemlerin her biri farklı durumlar için uygundur. CSR, güçlü SEO'nun önemli olmadığı, taze verilere ihtiyaç duyan sayfalar için kullanışlıdır. SSR, dinamik verileri tüketen sayfalar için de harikadır, ancak daha SEO dostudur.

SSG, verileri çoğunlukla statik olan sayfalar için uygundur, ISG ise aralıklarla güncellemek istediğiniz verileri içeren sayfalar için en iyisidir. Veriler önceden getirildiği ve önbelleğe alabileceğiniz için SSG ve ISG, performans ve SEO açısından harikadır.