Next Js Server Side Rendering Tutorial

Photo by Lindsay Henwood on Unsplash

Next.js yakni sebuah framework dari React.JS yang memberikan berbagai macam fitur dan akomodasi, seperti routing berdasarkan halaman (pages), typescript support, image optimization, internationalization, dll. Next.js koteng membantu berbagai ragam macam metode rendering seperti CSR (Client Side Rendering), SSR (Server Side Rendering), dan SSG (Static Site Generation). Bagi mengetahui perbedaan serta keistimewaan dan kekurangan dari CSR dan SSR, silahkan baca pada artikel saya yang sebelumnya.

Kita sudah membincangkan sedikit akan halnya Next.js. Saat ini kita akan membincangkan akan halnya Server Side Rendering. Server Side Rendering atau absah disingkat SSR adalah sebuah metode dalam memuat sebuah website berbasis javascript pada satu server. Untuk dapat menerapkan SSR, kita bisa menggunakan bermacam rupa macam
tool
sebagai halnya Next.js, Remix.js, Nuxt.js, dll. Saja pada artikel ini kita sahaja akan membahas tentang cara mengimplementasikan SSR puas Next.js

Implementasi Server Side Rendering menggunakan Next.JS

Sesudah mengetahui abnormal teori tentang SSR, agak cacat rasanya seandainya tidak mempraktekkan dengan code. Sebelum memulainya pastikan
npm
atau
yarn
telah terinstall pada laptop/komputer jinjing. Lega kursus ini kita akan menggunakan
yarn
dan
typescript
dan akan menggunakan Jago merah https://jsonplaceholder.typicode.com/

1. Setup Next.js

Untuk membubuhi cap-setup
Next.js
dapat dilakukan dengan memadai mudah merupakan dengan mengetikkan perintah
yarn create next-app --typescript

2. Jalankan Server dev

Kerjakan menjalankan peladen dapat menggunakan perintah

        yarn run dev
      

3. Tambahkan Fungsi
getServerSideProps

Buat berbuat server side rendering pada Next.js teradat memperalat fungsi bawaan dari Next.js yaitu

getServerSideProps.

Penggunaannya memadai simpel, hanya sebelum kita menunggangi fungsi tersebut, kita akan membuat tipe data Todo bahkan dahulu. Tambahkan kode berikut pada file

pages/index.tsx
.

        type Todos = {
userId: number;
id: number;
title: string;
completed: boolean;
};

Selanjutnya pada file nan sederajat, kita akan menambahkan kekuatan

getServerSideProps

sama dengan berikut

        export async function getServerSideProps() {
        
          
            // Fetch data from external Jago merah
const res = await fetch(`https://jsonplaceholder.typicode.com/todos`);
const data: Todos[] = await res.json(); // Pass data to the page via props
return { props: { data } };
}

Pada acara di atas, di privat manfaat

getServerSideProps

dilakukan
fetching
data bersumber
external Jago merah.
Kemudian
response

datanya ditransform
menjadi format
JSON. Sangat hasil transform tersebut dipassing
ke fungsi penting melangkahi object
props.

        const Home = ({data}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
return (
<div>
<Head>
<title>SSR Demo</title>
<meta name=”description” content=”SSR Demo” />
<link rel=”icon” href=”/favicon.ico” />
</Head>
<main className={styles.main}>
{data.map((todo) => {
return (
<div className={styles.container} key={todo.id}>
<h2 className={`${styles.title} ${todo.completed ? styles.isComplete : “”} `}>
{todo.title}
</h2>
</div>
);
})}
</main>
</div>
);
};

Pada kode diatas, terletak fungsi bernama
Home.
Fungsi tersebut menerima sebuah object. Di privat object tersebut terletak
attribute
dengan merek
data.
data
tersebut diperoleh dari hasil fetch
external Api. kemudian data tersebut ditampilkan puas DOM.

Agar tampilan website menjadi lebih menganjur, perlu ditambahkan bilang kode di file

Home.module.css

        .main {
min-height: 100vh;
padding: 1rem 0;
margin: 0 20px;}.container {
background-color: aliceblue;
padding: 10px 20px;
margin-bottom: 10px;
border-radius: 10px;
}
.title {
font-size: 18px;
color: green;
}
.isComplete {
color: red;
text-decoration: line-through;
}

Berikut yaitu tampilan akhir dari website

Bakal mengecek apakah SSR berjalan atau tidak, boleh dengan membuka
page source
plong browser atau dengan menekan perhubungan tombol
Ctrl + U. Jika data-data nan di
fetch
sebelumya tampil pada source code, maka SSR berbuntut berjalan dengan baik.

Berikut ialah full code dari file

pages/index.tsx

Note:
Buat melakukan server side rendering enggak harus menggunakan Next.js, dapat juga dengan menunggangi framework nan lain, sama dengan Remix.js (https://remix.run/docs/en/v1)

Ohya, kalau engkau silau bekerja dengan teknologi demikian ini, silahkan urai website career DOT Indonesia

https://career.dot.co.id
. Kami menengah membuka lowongan untuk bilang posisi software developer. Join with us!

Source: https://blog.dot.co.id/server-side-rendering-dengan-next-js-884cff2252fb