Next.js adalah kerangka kerja pengembangan web yang sangat populer berbasis React yang memiliki sejumlah fitur terbaik untuk membangun aplikasi web yang efisien dan cepat. Dalam artikel ini, kita akan membahas penggunaan Static Site Generation (SSG) , Incremental Static Generation (ISG) dan Server-Side Rendering (SSR) dalam aplikasi Next.js menggunakan TypeScript. SSG, ISG adalah teknik yang memungkinkan kita untuk menghasilkan dan menyajikan halaman web statis dengan cepat, sedangkan SSR adalah proses rendering halaman dinamsi yang di render di sisi server setiap kali user melakukan request halaman.
Apa itu SSG dan ISG?
Static Site Generation (SSG)
SSG adalah teknik yang memungkinkan kita untuk menghasilkan halaman web statis selama waktu pembangunan (build time). Ini berarti bahwa saat kita membangun aplikasi Next.js, semua data yang diperlukan untuk halaman-halaman tertentu akan diambil dan di-generate selama proses build, dan halaman-halaman ini akan disajikan secara statis kepada pengguna ketika mereka mengaksesnya. Ini menghasilkan waktu respon yang sangat cepat karena tidak ada perlu menghitung atau mengambil data saat mengakses halaman.
Incremental Static Generation (ISG)
ISG adalah perluasan dari SSG yang memungkinkan kita untuk menghasilkan halaman-halaman statis yang bisa diperbarui secara dinamis saat ada perubahan data. Dengan ISG, kita dapat memilih beberapa bagian dari halaman untuk diperbarui secara berkala tanpa harus menghasilkan ulang seluruh halaman. Ini sangat berguna untuk konten yang sering berubah atau data yang dinamis.
Membuat Halaman dengan SSG dan ISG
Sekarang, kita akan membuat halaman dengan ISG untuk menampilkan konten yang diperbarui secara dinamis. Kita akan membuat halaman yang menampilkan daftar post artikel dari penyedia rest API gratis jsonplaceholder.typecode.com
Langkah 1: Buat file pages/post/index.tsx
Buat sebuah direktori baru di dalam direktori pages dengan nama post, didalam folder post tambahkan dua file yaitu index.tsx dan [id].tsx, file [id].tsx sendiri adalah sebuah dynamic routes yang nanti akan berfungsi untuk mengenerate halaman statis setiap post artikel. dalam index.tsx tambahkan kode berikut:
// pages/post/index.tsx
import Link from "next/link";
import Head from "next/head";
interface Post {
id: number;
title: string;
// Add other properties as needed
}
interface AllPostsProps {
posts: Post[];
}
export async function getStaticProps() {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts: Post[] = await response.json();
return {
props: {
posts,
},
revalidate: 60,
};
}
export default function AllPosts({ posts }: AllPostsProps) {
return (
<div>
<Head>
<title>Posts Article</title>
</Head>
<h1>
Incremental Static Regeneration (ISR) & Rendering: Static Site
Generation (SSG)
</h1>
<p>https://jsonplaceholder.typicode.com/posts</p>
<ul>
{posts.map((post) => (
<li
key={post.id}
style={{
marginBottom: "10px",
marginTop: "10px",
lineHeight: "30px",
fontSize: "20px",
}}
>
<Link href={`/ssg_isr/${post.id}`}>{post.title}</Link>
</li>
))}
</ul>
</div>
);
}file index.tsx ini adalah halaman yang akan menampilkan list post, didalam file index.tsx ada dua fungsi yaitu fungsi allpost yang merupakan export default yang menampilkan seluruh post. fungsi getStaticProps adalah fungsi yang wajib dalam penerapan SSG atau ISG.
Langkah 2: Buat File pages/post/[id].tsx
Kemudian, didalam file [id].tsx tambahkan kode berikut:
import Link from "next/link";
import Head from "next/head";
import { GetStaticPaths, GetStaticProps } from "next";
interface Post {
id: number;
title: string;
body: string;
// Add other properties as needed
}
interface PostDetailProps {
post: Post;
}
export const getStaticPaths: GetStaticPaths = async () => {
// Get a list of all posts from the API
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts: Post[] = await response.json();
// Generate paths for each post
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return {
paths,
fallback: "blocking",
};
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const postId = params?.id; // Use optional chaining to safely access params
// Make a request to the API or database to find the post with the requested ID
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postId}`
);
const post: Post = await response.json();
// Check if the post was found or not
if (!post) {
return {
notFound: true,
};
}
return {
props: {
post,
},
revalidate: 60,
};
};
export default function PostDetail({ post }: PostDetailProps) {
const pageTitle = 'My Page Title';
return (
<div>
<Head>
<title>{pageTitle}</title>
<meta
name="description"
content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>
<meta property="og:title" content="Social Title for Cool Page" />
<meta
property="og:description"
content="And a social description for our cool page"
/>
<meta
property="og:image"
content="https://example.com/images/cool-page.jpg"
/>
</Head>
<h1>{post.title}</h1>
<p>Title: {post.title}</p>
<p>Body: {post.body}</p>
<Link href="/ssg_isr">Back to All Posts</Link>
</div>
);
}Kode diatas adalah tekhnik penerapan SSG dan ISG. SSG dan ISG sendiri adalah dua hal yang hampir sama,perbedaanya adalah dalam penerapan generate file staticnya. Kode diatas kita bisa melihat revalidate: 60 didalam fungsi getstaticprops. Perbedaanya hanya disini yaiut jika kita menggunakan SSG tanpa revalidate, maka halaman statis akan digenerate hanya sekali saat build time, sedangkan dengan metode ISG adalah dimana Nextjs akan mengenerate ulang halaman statis dari data baru yang belum digenerate sebelumnya.
Jalankan projek dengan command : npm run dev
Membuat Halaman dengan Server-Side Rendering (SSR)
Server-Side Rendering (SSR) adalah salah satu teknik yang dapat digunakan dalam Next.js untuk merender halaman web. Ini adalah salah satu pendekatan untuk menghasilkan konten yang lebih dinamis dibandingkan dengan Static Site Generation (SSG) atau Incremental Static Generation (ISG). Dalam SSR, halaman web dihasilkan di sisi server setiap kali permintaan dilakukan oleh pengguna, dan data yang diperlukan untuk halaman tersebut diambil pada saat permintaan tersebut.
Berikut adalah beberapa konsep kunci terkait SSR di Next.js:
- Render di Sisi Server (Server-Side Rendering): Dalam SSR, proses rendering halaman terjadi di sisi server, bukan di sisi klien (browser). Saat pengguna mengakses halaman, server akan merender halaman tersebut dengan data yang dibutuhkan, dan kemudian mengirimkan halaman yang siap ditampilkan kepada pengguna.
- Permintaan HTTP: Setiap kali pengguna mengakses halaman SSR, server menerima permintaan HTTP untuk halaman tersebut. Server kemudian menghasilkan halaman tersebut dengan memproses permintaan dan mengambil data yang diperlukan, seperti data dari database atau API.
- Konten Dinamis: Salah satu keunggulan utama SSR adalah kemampuannya untuk menampilkan konten yang dapat diperbarui secara dinamis pada setiap permintaan. Ini berarti bahwa halaman dapat berisi data yang selalu up-to-date, cocok untuk kasus seperti data pengguna yang login atau data yang sering berubah.
- Kinerja Responsif: Dengan SSR, pengguna akan melihat konten yang dihasilkan dengan cepat karena server merender halaman sebelum mengirimkannya. Ini menghasilkan waktu respon yang lebih cepat dibandingkan dengan pembuatan halaman di sisi klien (Client-Side Rendering atau CSR).
- getServerSideProps: Untuk mengimplementasikan SSR dalam Next.js, Anda dapat menggunakan fungsi
getServerSideProps. Fungsi ini digunakan untuk mengambil data yang diperlukan untuk halaman dan mengembalikannya sebagai prop ke komponen halaman sebelum merendernya.
Sekarang buat sebuah folder dengan user dan buat dua buah file yaitu index.tsx dan [id].tsx. didalam file index.tsx tambahkan kode berikut:
//index.tsx
import Link from 'next/link';
import { GetServerSideProps } from 'next';
interface UserData {
id: number;
name: string;
// Add other properties as needed
}
interface HomeProps {
data: UserData[];
}
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data: UserData[] = await response.json();
return {
props: {
data,
},
};
};
export default function Home({ data }: HomeProps) {
return (
<div>
<h1>Server-Side Rendering (SSR) Example</h1>
<p>https://jsonplaceholder.typicode.com/users</p>
<ul>
{data.map((item) => (
<li key={item.id}>
<Link href={`/ssr/${item.id}`}>
{item.name}
</Link>
</li>
))}
</ul>
</div>
);
}dan juga buatkan kode didalam file [id].tsx yang berfungsi untuk detail user
// [id].tsx
import Link from 'next/link';
import { GetServerSideProps } from 'next';
interface UserData {
id: number;
name: string;
email: string;
// Add other properties as needed
}
interface UserDetailProps {
user: UserData;
}
export const getServerSideProps: GetServerSideProps<UserDetailProps> = async ({ params }) => {
const userId = params?.id; // Use optional chaining to safely access params
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
const user: UserData = await response.json();
return {
props: {
user,
},
};
};
export default function UserDetail({ user }: UserDetailProps) {
return (
<div>
<h1>User Detail</h1>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
<Link href="/ssr">Back to All Users</Link>
</div>
);
}Penting untuk dipahami bahwa SSR cocok untuk situasi di mana konten memerlukan pembaharuan berulang kali, atau ketika konten harus diperoleh secara dinamis berdasarkan permintaan pengguna. Namun, SSR dapat memengaruhi kinerja server, terutama pada lalu lintas tinggi, sehingga perlu dikelola dengan bijak sesuai dengan kebutuhan proyek Anda
