Daftar Isi

• Pengertian Server-Side Rendering (SSR)
• Keuntungan Menggunakan SSR
• Memulai dengan Next.js
• Menerapkan SSR dengan Next.js
• Kesimpulan

Pengertian Server-Side Rendering (SSR)

Server-Side Rendering (SSR) adalah teknik di mana halaman web dirender di server dan dikirimkan ke klien sebagai HTML. Ini berbeda dengan Client-Side Rendering (CSR), di mana konten dihasilkan di sisi klien menggunakan JavaScript. SSR dapat meningkatkan performa dan SEO situs web karena konten sudah tersedia saat halaman dimuat.

Keuntungan Menggunakan SSR

1. Peningkatan SEO

Dengan SSR, mesin pencari dapat merayapi dan mengindeks konten dengan lebih baik karena HTML sudah tersedia saat halaman dimuat.

2. Waktu Muat yang Lebih Cepat

Halaman yang dirender di server dapat dimuat lebih cepat, terutama untuk pengguna dengan koneksi internet yang lambat.

3. Pengalaman Pengguna yang Lebih Baik

Pengguna mendapatkan pengalaman yang lebih baik karena konten ditampilkan lebih cepat dan lebih responsif.

Memulai dengan Next.js

Next.js adalah framework React yang memungkinkan pengembang untuk membangun aplikasi web dengan mudah. Untuk memulai, Anda perlu menginstal Next.js dan membuat proyek baru.

npx create-next-app@latest nama-proyek

Setelah proyek dibuat, Anda dapat menjalankannya dengan perintah:

cd nama-proyek
npm run dev

Menerapkan SSR dengan Next.js

Untuk menerapkan SSR dalam Next.js, Anda perlu menggunakan fungsi getServerSideProps di dalam komponen halaman Anda. Fungsi ini akan dijalankan di server setiap kali halaman diminta.

Contoh Implementasi SSR

Berikut adalah contoh sederhana tentang bagaimana menerapkan SSR:

import React from 'react';

export async function getServerSideProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();

    return {
        props: { data }, // akan diteruskan ke komponen halaman sebagai props
    };
}

const Page = ({ data }) => {
    return (
        

            
Data dari API
            
{JSON.stringify(data, null, 2)}

    );

};
export default Page;
Kesimpulan
Menerapkan Server-Side Rendering (SSR) dengan Next.js dapat memberikan banyak keuntungan, terutama dalam hal SEO dan pengalaman pengguna. Dengan menggunakan fungsi getServerSideProps, Anda dapat dengan mudah mengambil data dari server dan merendernya di halaman Anda. Ini adalah langkah yang sangat baik untuk meningkatkan performa aplikasi web Anda.