Rendering, React kodunu HTML’ye dönüştürme işlemidir. Seçtiğiniz işleme yöntemi, üzerinde çalıştığınız verilere ve performansa ne kadar önem verdiğinize bağlıdır.
Next.js’de işleme çok yönlüdür. Sayfaları istemci tarafında veya sunucu tarafında, statik veya aşamalı 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şturmada (SSR), 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ği ile 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, sunucunun isteği her seferinde işlediği anlamına gelir.
Bu, web sitesinin performansını azaltabilir. Ancak, sunucu tarafı oluşturma, dinamik veri tüketen sayfalar için mükemmeldir.
Bir kullanıcı her istediğinde sayfayı yeniden oluşturmak için getServerSideProps kullanın.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}
export async function getServerSideProps() {
// Fetch data from external api
const res = await fetch(‘https://…/data’)
const data = await res.json()
// Will be passed to the page component as props
return { props: { data } }
}
getServerSideProps yalnızca sunucuda çalışır ve şu şekilde çalışır:
- Bir kullanıcı doğrudan sayfaya eriştiğinde, istek zamanı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 getirmeleri kullanarak sunucu tarafı oluşturmayı seçebilirsiniz.
Dinamik veri getirmeleri, önbellek seçeneğini “depolama yok” olarak ayarlayarak özellikle önbelleğe almayı devre dışı bırakan fetch() istekleridir.
fetch(‘https://…’, { cache: ‘no-store’ });
Alternatif olarak, yeniden doğrulamayı 0 olarak ayarlayın:
fetch(‘https://…’, { next: { revalidate: 0 } });
Bu özellik şu anda beta aşamasındadır, bu yüzden bunu aklınızda bulundurun. Next.js 13 beta belgelerinde dinamik veri getirme hakkında daha fazla bilgi edinebilirsiniz .
İstemci Tarafı Oluşturma
Verileri sık sık güncellemeniz gerektiğinde veya sayfanızı önceden oluşturmak istemiyorsanız, 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 verileri çalışma zamanında getirir ve bileşen düzeyinde yapıldığında mount üzerindeki verileri getirir. Bu nedenle, KSS performansın yavaşlamasına katkıda bulunabilir.
İstemcide sayfaları şu şekilde oluşturmak için useEffect() kancasını kullanın:
import { useState, useEffect } from ‘react’
function Home() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fetch(‘/api/get-data’)
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])
if (isLoading) return <p>Loading…</p>
if (!data) return <p>No data</p>
return (
<div>
// Use data
</div>
)
}
SWR kancasını da kullanabilirsiniz. Verileri önbelleğe alır ve eskimesi durumunda yeniden doğrular.
import useSWR from ‘swr’
const fetcher = (…args) => fetch(…args).then((res) => res.json())
function Home() {
const { data, error } = useSWR(‘/api/data’, fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading…</div>
return (
<div>
// Use data
</div>
)
}
Next.js 13’te, dosyanın en üstüne “istemciyi kullan” yönergesini ekleyerek bir istemci bileşeni kullanmanız gerekir.
“use client”;
export default () => {
return (
<div>
// Client component
</div>
);
};
SSR ve CSR arasındaki fark, verilerin CSR’de istemci tarafında getirilirken, verilerin SSR’deki sunucudaki her sayfa isteğinde alınmasıdır.
Statik Site Oluşturma
Statik site oluşturma (SSG) ile sayfa, derleme süresi boyunca verileri bir kez alır. 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 sayfadaki getStaticProps işlevini dışa aktarmalısınız.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}
export async function getStaticProps() {
// Fetch data from external API at build time
const res = await fetch(‘https://…/data’)
const data = await res.json()
// Will be passed to the page component as props
return { props: { data } }
}
Ayrıca getStaticProps içindeki veritabanını da sorgulayabilirsiniz.
export async function getStaticProps() {
// Call function to fetch data from database
const data = await getDataFromDB()
return { props: { data } }
}
Next.js 13’te statik oluşturma varsayılandır ve önbelleğe alma seçeneğini kapalı olarak ayarlamadığınız sürece içerik alınır ve önbelleğe alınır.
async function getData() {
const res = await fetch(‘https://…/data’);
return res.json();
}
export default async function Home() {
const data = await getData();
return (
<main>
// Use data
</main>
);
}
Dokümanlardan Next.js 13’te statik oluşturma hakkında daha fazla bilgi edinin .
Artımlı-Statik Üretim
SSG’yi kullanmak isteyip de 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, belirttiğiniz zaman aralığından sonra oluşturduktan sonra statik sayfaları oluşturmanıza veya güncellemenize olanak tanır. Bu şekilde, sitenin tamamını yalnızca buna ihtiyaç duyan sayfaları yeniden oluşturmanız gerekmez.
ISG, kullanıcılara güncel içerik sunmanın ek avantajıyla birlikte SSG’nin avantajlarını korur. ISG, sitenizde değişen verileri tüketen sayfalar için mükemmeldir. Örneğin, blog gönderilerini , gönderileri düzenlediğinizde veya yenilerini eklediğinizde blogun güncel kalmasını sağlayacak şekilde oluşturmak için ISR’yi kullanabilirsiniz .
ISR’yi kullanmak için, bir sayfadaki getStaticProps işlevine revalidate prop’u ekleyin.
export async function getStaticProps() {
const res = await fetch(‘https://…/data’)
const data = await res.json()
return {
props: {
data,
},
revalidate: 60
}
}
Burada Next.js, 60 saniye sonra bir istek geldiğinde sayfayı yeniden oluşturmaya çalışacaktır. Bir sonraki istek, güncellenmiş sayfayla bir yanıtla sonuçlanacaktır.
Next.js 13’te, getirme işleminde şu şekilde yeniden doğrulama kullanın:
fetch(‘https://…/data’, { next: { revalidate: 60 } });
Zaman aralığını, verilerinizle en iyi şekilde çalışana 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ığı, yeni verilere ihtiyaç duyan sayfalar için kullanışlıdır. SSR, dinamik veri 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. SSG ve ISG, veriler önceden getirildiği ve önbelleğe alınabildiği için performans ve SEO açısından mükemmeldir.