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 kinerja.
Di Next.js, rendering sangat serbaguna. Anda dapat merender halaman sisi klien atau sisi server, secara statis atau bertahap.
Lihatlah bagaimana metode ini bekerja dan bagaimana kinerjanya masing-masing.
Rendering Sisi Server
Dengan server-side rendering (SSR), ketika 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 setiap saat.
Hal ini dapat menurunkan kinerja website. Namun, rendering sisi server sangat cocok untuk halaman yang menggunakan data dinamis.
Gunakan getServerSideProps untuk membangun kembali halaman setiap kali pengguna memintanya.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}export async function getServerSideProps() {
const res = await fetch('https:
const data = await res.json()
return { props: { data } }
}
getServerSideProps hanya berjalan di server dan begini cara kerjanya:
- Ketika pengguna mengakses halaman secara langsung, itu berjalan pada waktu permintaan dan halaman 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 rendering sisi server menggunakan pengambilan data dinamis di halaman atau tata letak.
Pengambilan data dinamis adalah permintaan fetch() yang secara khusus memilih keluar dari caching dengan menyetel opsi cache ke “no-store”.
fetch('https://...', { cache: 'no-store' });
Atau, atur validasi ulang ke 0:
fetch('https://...', { next: { revalidate: 0 } });
Fitur ini saat ini dalam versi beta, jadi ingatlah itu. Anda dapat membaca lebih lanjut tentang pengambilan data dinamis di Next.js 13 beta docs.
Rendering Sisi Klien
Anda harus menggunakan rendering sisi klien (CSR) saat Anda perlu sering memperbarui data atau saat Anda tidak ingin melakukan pra-render halaman Anda. Anda dapat menerapkan CSR di tingkat halaman atau tingkat komponen. Pada tingkat halaman, Next.js mengambil data pada saat dijalankan dan ketika dilakukan pada tingkat komponen, ia mengambil data saat dipasang. Karena itu, CSR dapat berkontribusi pada lambatnya kinerja.
Menggunakan useEffect() kait untuk merender halaman pada klien seperti ini:
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>
)
}
Anda juga dapat menggunakan pengait SWR. Ini menyimpan data dan memvalidasi ulang jika sudah basi.
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>
)
}
Di Next.js 13, Anda perlu menggunakan komponen klien dengan menambahkan arahan “gunakan klien” di bagian atas file.
"use client";
export default () => {
return (
<div>
</div>
);
};
Perbedaan antara SSR dan CSR adalah bahwa data diambil pada setiap permintaan halaman di server di SSR sementara data diambil di sisi klien di CSR.
Pembuatan Situs Statis
Dengan pembuatan situs statis (SSG), halaman mengambil data sekali selama waktu pembuatan. Halaman yang dihasilkan statis sangat cepat dan berkinerja 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.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}export async function getStaticProps() {
const res = await fetch('https:
const data = await res.json()
return { props: { data } }
}
Anda juga dapat menanyakan database di dalam getStaticProps.
export async function getStaticProps() {
// Call function to fetch data from database
const data = await getDataFromDB()
return { props: { data } }
}
Di Next.js 13, rendering statis adalah default, dan konten diambil dan di-cache kecuali Anda menonaktifkan opsi caching.
async function getData() {
const res = await fetch('https:
return res.json();
}
export default async function Home() {
const data = await getData();
return (
<main>
// Use data
</main>
);
}
Belajar lebih tentang rendering statis di Next.js 13 dari dokumen.
Generasi Statis Inkremental
Ada kalanya ingin menggunakan SSG tapi juga ingin mengupdate konten secara berkala. Di sinilah generasi statis tambahan (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 terbaru kepada pengguna. ISG sangat cocok untuk halaman di situs Anda yang menggunakan data yang berubah. Misalnya, Anda bisa gunakan ISR untuk merender posting blog sehingga blog tetap diperbarui saat Anda mengedit posting atau menambahkan yang baru.
Untuk menggunakan ISR, tambahkan prop validasi ulang ke fungsi getStaticProps pada halaman.
export async function getStaticProps() {
const res = await fetch('https:
const data = await res.json()return {
props: {
data,
},
revalidate: 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:
fetch('https://.../data', { next: { revalidate: 60 } });
Anda dapat mengatur interval waktu ke apa pun yang paling sesuai dengan data Anda.
Cara Memilih Metode Rendering
Sejauh ini Anda telah mempelajari tentang 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 baru, di mana SEO yang kuat tidak menjadi perhatian. SSR juga bagus untuk halaman yang menggunakan data dinamis, tetapi lebih ramah SEO.
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 di cache.
