Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.
Rendering adalah proses mengubah kode React menjadi HTML. Metode rendering yang Anda pilih bergantung pada data yang Anda kerjakan dan seberapa besar Anda peduli dengan performa.
Di Next.js, rendering sangat fleksibel. Anda dapat merender halaman sisi klien atau sisi server, secara statis atau bertahap.
Lihatlah bagaimana metode ini bekerja dan bagaimana kinerja masing-masing.
Rendering Sisi Server
Dengan rendering sisi server (SSR), saat pengguna mengunjungi halaman web, browser mengirimkan permintaan ke server untuk halaman tersebut. Server mengambil data yang diperlukan dari database, jika diperlukan, dan mengirimkannya bersama dengan konten halaman ke browser. Browser kemudian menampilkannya kepada pengguna.
Browser membuat permintaan ini untuk setiap tautan yang diklik pengguna yang berarti server memproses permintaan tersebut setiap saat.
Ini dapat mengurangi kinerja situs web. Namun, perenderan sisi server sangat cocok untuk halaman yang menggunakan data dinamis.
Gunakan getServerSideProps untuk membuat ulang halaman setiap kali pengguna memintanya.
eksporbawaanfungsiRumah({data}) {
kembali (
<utama>
// Menggunakandata
</main>
);
}eksporasinkronfungsigetServerSideProps() {
// Ambil data dari api eksternal
const res = menunggu ambil('https://.../data')
const data = menunggu res.json()
// Akan diteruskan ke komponen halaman sebagai props
kembali { Atribut: { data } }
}
getServerSideProps hanya berjalan di server dan begini cara kerjanya:
- Ketika seorang pengguna mengakses halaman secara langsung, itu berjalan pada waktu permintaan dan halaman itu dirender sebelumnya dengan alat peraga yang dikembalikannya.
- Saat pengguna mengakses halaman melalui tautan Berikutnya, browser mengirimkan permintaan ke server yang menjalankannya.
Di versi baru, Anda dapat ikut serta dalam perenderan sisi server menggunakan pengambilan data dinamis di halaman atau tata letak.
Pengambilan data dinamis adalah permintaan fetch() yang secara khusus menyisih dari caching dengan menyetel opsi cache ke "no-store".
mengambil('https://...', { cache: 'tanpa toko' });
Atau, setel validasi ulang ke 0:
mengambil('https://...', { selanjutnya: { validasi ulang: 0 } });
Fitur ini saat ini dalam versi beta jadi ingatlah itu. Anda dapat membaca selengkapnya tentang pengambilan data dinamis di Next.js 13 dokumen beta.
Rendering Sisi Klien
Anda harus menggunakan perenderan sisi klien (CSR) saat Anda harus sering memperbarui data atau saat Anda tidak ingin merender halaman Anda terlebih dahulu. Anda dapat menerapkan CSR di tingkat halaman atau tingkat komponen. Di tingkat halaman, Next.js mengambil data pada waktu proses dan ketika dilakukan di tingkat komponen, ia mengambil data saat dipasang. Karena itu, CSR dapat berkontribusi pada kinerja yang lambat.
Menggunakan useEffect() pengait untuk merender halaman pada klien seperti ini:
impor { useState, useEffect } dari 'reaksi'
fungsiRumah() {
const [data, setData] = useState(batal)
const [isLoading, setLoading] = useState(PALSU)gunakanEfek(() => {
setLoading(BENAR)mengambil('/api/get-data')
.maka((res) => res.json())
.maka((data) => {
setData (data)
setLoading(PALSU)
})
}, [])jika (isLoading) kembali <P>Memuat...</P>
jika (!data) kembali <P>Tidak ada data</P>
kembali (
<div>
// Menggunakandata
</div>
)
}
Anda juga dapat menggunakan pengait SWR. Itu menyimpan data dan memvalidasi ulang jika sudah basi.
impor gunakan SWR dari 'swr'
const pengambil = (...args) => ambil(...args).lalu((res) => res.json())
fungsiRumah() {
const { data, kesalahan } = useSWR('/api/data', pengambil)
jika (kesalahan) kembali <div>Gagal untuk memuat</div>
jika (!data) kembali <div>Memuat...</div>
kembali (
<div>
// Menggunakandata
</div>
)
}
Di Next.js 13, Anda perlu menggunakan komponen klien dengan menambahkan arahan "use client" di bagian atas file.
"menggunakanklien";
eksporbawaan () => {
kembali (
<div>
// Komponen klien
</div>
);
};
Perbedaan antara SSR dan CSR adalah bahwa data diambil pada setiap permintaan halaman di server di SSR sedangkan data diambil di sisi klien di CSR.
Generasi Situs Statis
Dengan pembuatan situs statis (SSG), halaman mengambil data sekali selama waktu pembuatan. Halaman yang dihasilkan secara statis sangat cepat dan bekerja dengan baik karena semua halaman dibuat sebelumnya. Oleh karena itu, SSG sangat cocok untuk halaman yang menggunakan konten statis seperti halaman penjualan atau blog.
Di Next.js, Anda harus mengekspor fungsi getStaticProps di halaman yang ingin Anda render secara statis.
eksporbawaanfungsiRumah({data}) {
kembali (
<utama>
// Menggunakandata
</main>
);
}eksporasinkronfungsigetStaticProps() {
// Ambil data dari API eksternal saat membangun
const res = menunggu ambil('https://.../data')
const data = menunggu res.json()
// Akan diteruskan ke komponen halaman sebagai props
kembali { Atribut: { data } }
}
Anda juga dapat meminta database di dalam getStaticProps.
eksporasinkronfungsigetStaticProps() {
// Panggilanfungsikemengambildatadaribasis data
const data = menunggu getDataFromDB()
kembali { Atribut: { data } }
}
Di Next.js 13, perenderan statis adalah default, dan konten diambil dan di-cache kecuali Anda menyetel opsi caching ke nonaktif.
asinkronfungsigetData() {
const res = menunggu ambil('https://.../data');
kembali res.json();
}
eksporbawaanasinkronfungsiRumah() {
const data = menunggu getData();
kembali (
<utama>
// Menggunakandata
</main>
);
}
Belajar lebih tentang rendering statis di Next.js 13 dari dokumen.
Generasi Inkremental-Statis
Ada kalanya ingin menggunakan SSG tapi juga ingin update konten secara rutin. Di sinilah inkremental static generation (ISG) membantu.
ISG memungkinkan Anda membuat atau memperbarui halaman statis setelah Anda membuatnya setelah interval waktu yang Anda tentukan. Dengan cara ini, Anda tidak perlu membangun kembali seluruh situs hanya halaman yang membutuhkannya.
ISG mempertahankan manfaat SSG dengan manfaat tambahan dalam menyajikan konten terkini kepada pengguna. ISG sempurna untuk halaman-halaman di situs Anda yang menggunakan data yang terus berubah. Misalnya, Anda bisa gunakan ISR untuk membuat posting blog sedemikian rupa sehingga blog tetap diperbarui saat Anda mengedit posting atau menambahkan yang baru.
Untuk menggunakan ISR, tambahkan prop revalidate ke fungsi getStaticProps di halaman.
eksporasinkronfungsigetStaticProps() {
const res = menunggu ambil('https://.../data')
const data = menunggu res.json()
kembali {
Atribut: {
data,
},
validasi ulang: 60
}
}
Di sini, Next.js akan mencoba membangun kembali halaman ketika permintaan masuk setelah 60 detik. Permintaan berikutnya akan menghasilkan respons dengan halaman yang diperbarui.
Di Next.js 13, gunakan validasi ulang dalam pengambilan seperti ini:
mengambil('https://.../data', { selanjutnya: { validasi ulang: 60 } });
Anda dapat menyetel interval waktu ke apa pun yang paling sesuai dengan data Anda.
Cara Memilih Metode Rendering
Sejauh ini Anda telah mempelajari empat metode rendering di Next.js — CSR, SSR, SSG, dan ISG. Masing-masing metode ini sesuai untuk situasi yang berbeda. CSR berguna untuk halaman yang membutuhkan data segar, di mana SEO yang kuat tidak menjadi perhatian. SSR juga bagus untuk halaman yang menggunakan data dinamis, tetapi lebih SEO-friendly.
SSG cocok untuk halaman yang sebagian besar datanya statis, sedangkan ISG paling cocok untuk halaman yang berisi data yang ingin Anda perbarui secara berkala. SSG dan ISG sangat bagus dalam hal kinerja dan SEO karena data sudah diambil sebelumnya dan Anda dapat menyimpannya dalam cache.
