Server-Side Rendering (SSR) di Next.js adalah metode rendering di mana halaman web di render di server untuk setiap request dari user, bukan di sisi client (browser). Ketika user melakukan request page, maka di sisi server akan melakukan data fetching yang diperlukan dan membangun file HTML yang nanti nya akan di kirim ke client untuk ditampilkan di client.
Pada NextJS, untuk menggunakan SSR, dapat menggunakan function getServerSideProps untuk melakukan fetch data di server. Berikut contoh penggunaan nya:
export default function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}SSR bisa dipakai dalam beberapa keadaan, diantaranya :
SSR memungkinan semua content pada page sudah ter-fetch dan ter-render sepenuhnya di server-side sebelum dikirim ke client side sebagai HTML. Hal ini berdampak baik untuk SEO dikarenakan semua content bisa di crawl dengan cepat oleh Search Engine karna tidak perlu melakukan fetch lagi setelah page muncul di client. Selain itu, First Contentful Paint ( FCP ) dan Largest Contentful Paint ( LCP ) juga ter-optimize dengan alasan yang sama. FCP dan LCP merupakan bagian dari Core Web Vitals yang menjadi faktor peringkat pencarian Search Engine. Semakin baik score Core Web Vitals, semakin baik peringkat hasil pencariannya.
Dengan melakukan fetch data di server-side, request menjadi tidak ter-expose di client. Sehingga data atau request sensitive tidak dapat dilihat oleh peretas.
Reference : https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props