Server Side Rendering di NextJS

• Pertama, apa itu Server Side Rendering

Server Side Rendering atau biasa di sebut SSR adalah teknik untuk merender Single Page Application atau biasa disebut SPA yang akan dirender di sisi server lalu semua hasil render tersebut dikirimkan ke sisi klien. Jika di ilustrasikan cara kerja server side rendering akan seperti gambar berikut

1. Browser menerima response dari server sekaligus element hasil render dari server.
2. Browser kemudian mendownload file-file yang diload(css, js, dll). Pada saat ini element sudah terender.
3. Selanjutnya Browser akan mengeksekusi react. Pada saat ini element sudah terender juga.
4. Terakhir, semua element tersebut sudah bisa berinteraksi dengan user.

• Kedua, siapkan project NextJS

Buka command promt (CMD) kalian, lalu jalankan perintah

npx create-next-app <nama-project>

setelah itu tunggu sampai project selesai

lalu masuk ke dalam project kalian, di sini saya menggunakan Visual Studio Code, buka file index.js, lalu kalian akan mendapatkan halaman seperti ini,

Jangan lupa untuk menjalankan project next kalian, dengan menggunakan perintah berikut ini di CMD kalian

cd <nama-project>
yarn dev ---atau--- npm run dev

Setelah itu buka localhost/3000 atau link yang tertera pada cmd kalian di web browser kalian masing-masing, dan kalian akan melihat halaman ini:

Selamat, project kalian sudah berhasil di siapkan.

• Selanjutnya, koding.

Sekarang kita masuk ke bagian kodingnya, pertama saya tidak akan membahas bagaimana cara kita ngoding NextJS, kalian bisa melihat tutorial tersebut di dokumentasi yang lainnya, saya akan langsung membahas, bagaimana caranya kita dapat mengimplementasikan SSR (Server Side Rendering) di project kita.

Pertama kita buat 1 folder baru (nama bebas) di dalam folder pages, saya akan menamai folder ini dengan nama belajarSSR, lalu buat file index.js, file index.js disini bertujuan sebagai pondasi dasar saja, untuk saat ini kita tidak akan nyebur di file index.js, lalu buat file dengan nama file [id].js, susunan file di dalam folder seperti dibawah ini:

Selanjutnya, masuk ke dalam file [id].js tersebut, dan mulai mempersiapkan koding di dalam file tersebut, pada saat ini saya menggunakan hooks, sehingga isi file saya menjadi seperti ini,

Selanjutnya kita akan masukan komponen yang membuat halaman website kita menjadi Server Side Rendering, yaitu dengan menambahkan kode di bawah ini, di bagian paling bawah file [id].js,

export async function getServerSideProps(context) {
  // Fetch data from external API
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/?q=${context.params.id}`
  );
  const data = await res.json();
  console.log(data);

  // Pass data to the page via props
  return { props: { datas: data } };
}

disini getServerSideProps adalah fungsi dari NextJS yang membuat halaman localhost/3000/belajarSSR/[id].js menjadi SSR, di fungsi ini juga saya sudah menyisipkan context.params.id yang membuat parameter yang berada di URL dapat di dapatkan nantinya menggunakan context.params.id, kalian juga dapat melihat data yang sudah terfetch di cmd kalian, perhatikan disini data yang terfetch akan tampil di command promt (CMD) kalian, dan BUKAN di console web browser kalian, hal ini berarti, data yang kalian fetch di proses di dalam server (localhost) dan bukan di client side (web browser)

disini saya menggunakan https://jsonplaceholder.typicode.com/posts/?q=sunt%20aut untuk data dummynya, setelah itu hal yang terakhir adalah menampilkan data tersebut ke dalam halaman website kita, caranya sangat mudah, yang pertama data yang sudah terfetch akan di lempar ke fungsi (yang berada di atas) menggunakan props, jadi kita harus menangkap props yang di lempar di dalam fungsi utama kita dengan cara seperti di bawah ini:

export default function detailBelajar({ datas }) {
  React.useEffect(() => {
    console.log(datas);
  }, []);
  return <div></div>;
}

perhatikan di sini, saya menambahkan {datas} pada bagian paling atas, dan saya mencoba menampilkan props yang di lempar menggunakan useEffect dari React, yang sekarang, anda bisa lihat log data berada di dalam console web browser anda, ini berarti data kita sudah dapat di tampilkan di web browser setiap user, saya akan memasukan data tersebut ke dalam state dengan nama listdata dan akan mencoba menampilkannya langsung di dalam web browser, kodenya dapat kalian lihat seperti di bawah ini:

export default function detailBelajar({ datas }) {
  React.useEffect(() => {
    console.log(datas);
  }, []);
  const [listdata, setLD] = React.useState(datas);
  return (
    <div>
      {listdata.map((item) => {
        return (
          <>
            <div key={item.id}>
              <h3>{item.title}</h3>
              <h5>{item.body}</h5>
              <hr></hr>
            </div>
          </>
        );
      })}
    </div>
  );
}

kode diatas berisi tentang kita menyimpan data props yang di lempar dari getServerSideProps kedalam useState, yang akhirnya kita coba tampilkan array data tersebut ke dalam website kita, dan pada saat kita melihat website kita, akan tampil seperti ini

Dan selamat, kita sudah selesai membuat website NextJS menggunakan mode Server Side Rendering, jika kalian mencoba untuk mendeploy website kalian dengan vercel atau media serverless yang lainnya, kalian akan melihat pada saat link website tersebut kalian copy dan paste ke (contoh) Whatsapp, maka Whatsapp akan menampilkan title dan deskripsi dari website kalian, hal ini tidak akan terjadi jika website kalian dalam mode Client Side Rendering.

Berikut adalah full kode yang di perlukan:

import React from "react";


export default function detailBelajar({ datas }) {
  React.useEffect(() => {
    console.log(datas);
  }, []);
  const [listdata, setLD] = React.useState(datas);
  return (
    <div>
      {listdata.map((item) => {
        return (
          <>
            <div key={item.id}>
              <h3>{item.title}</h3>
              <h5>{item.body}</h5>
              <hr></hr>
            </div>
          </>
        );
      })}
    </div>
  );
}


export async function getServerSideProps(context) {
  // Fetch data from external API
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/?q=${context.params.id}`
  );
  const data = await res.json();
  console.log(data);
  // Pass data to the page via props
  return { props: { datas: data } };
}

Sekian dari saya, semoga dokumentasi saya ini dapat membantu kita semua untuk dapat terus belajar hal hal yang baru, salam!