Next.js và SSG, SSR, CSR: Hiểu rõ các phương pháp render trong Next.js

Static Site Generation (SSG) là phương pháp tạo các trang web tĩnh ngay tại thời điểm build

1. Next.js là gì?

Next.js là một framework mạnh mẽ dành cho React, giúp phát triển ứng dụng web nhanh chóng và hiệu quả. Được phát triển bởi Vercel, Next.js cung cấp nhiều tính năng nổi bật như server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR), và client-side rendering (CSR), giúp cải thiện hiệu suất và trải nghiệm người dùng.

2. Các phương pháp render trong Next.js

2.1 Static Site Generation (SSG)

SSG là gì?

Static Site Generation (SSG) là phương pháp tạo các trang web tĩnh ngay tại thời điểm build. Các trang được tạo sẵn và lưu trữ dưới dạng HTML tĩnh, giúp giảm tải cho server và cải thiện tốc độ tải trang.

Khi nào sử dụng SSG?

Nội dung không thay đổi thường xuyên (blog, tài liệu, trang sản phẩm cố định).
Cần tốc độ tải trang nhanh để cải thiện SEO.

Ví dụ sử dụng SSG trong Next.js App Router:

import { getData } from '@/lib/api';

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

export const revalidate = 60; // Cập nhật dữ liệu mỗi 60 giây

Cập nhật nội dung trong SSG với ISR

Nếu cần cập nhật nội dung mà không cần build lại toàn bộ ứng dụng, bạn có thể sử dụng Incremental Static Regeneration (ISR) bằng cách thêm thuộc tính revalidate.

Revalidate theo thời gian

export const revalidate = 60; // Cập nhật mỗi 60 giây

Revalidate theo đường dẫn cụ thể (revalidatePath)

Nếu bạn muốn cập nhật một trang cụ thể mà không chờ đến lần revalidate tiếp theo, có thể sử dụng API revalidatePath trong Next.js:

import { revalidatePath } from 'next/cache';

export async function POST(req) {
  await revalidatePath('/blog'); // Cập nhật lại trang /blog
  return Response.json({ revalidated: true });
}

Revalidate theo tag (revalidateTag)

Khi dữ liệu liên quan đến nhiều trang khác nhau, bạn có thể sử dụng revalidateTag để cập nhật tất cả các trang có tag liên quan:

import { revalidateTag } from 'next/cache';

export async function POST(req) {
  await revalidateTag('blog_posts'); // Cập nhật tất cả các trang có tag 'blog_posts'
  return Response.json({ revalidated: true });
}

Trong getData, bạn có thể gán tag như sau:

export async function getData() {
  const res = await fetch('https://api.example.com/data', { next: { tags: ['blog_posts'] } });
  return res.json();
}

2.2 Server-Side Rendering (SSR)

SSR là gì?

Server-Side Rendering (SSR) là quá trình render trang web trên server mỗi khi có request từ người dùng. Kết quả trả về là một trang HTML hoàn chỉnh.

Khi nào sử dụng SSR?

Nội dung thay đổi liên tục (tin tức, dữ liệu người dùng, dashboard).
Cần cập nhật dữ liệu theo từng request.

Ví dụ sử dụng SSR trong Next.js App Router:

import { getData } from '@/lib/api';

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

2.3 Client-Side Rendering (CSR)

CSR là gì?

Client-Side Rendering (CSR) là quá trình render trang web trực tiếp trên trình duyệt của người dùng. Khi người dùng truy cập, trang HTML ban đầu chỉ chứa một phần nhỏ, sau đó React sẽ lấy dữ liệu và cập nhật giao diện.

Khi nào sử dụng CSR?

Các ứng dụng web có nhiều tương tác (dashboard, ứng dụng SaaS, chat real-time).
Khi không yêu cầu SEO cao.

Ví dụ sử dụng CSR trong Next.js:

'use client';

import { useEffect, useState } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data ? data.title : 'Loading...'}</div>;
}

3. So sánh SSG, SSR và CSR

Phương pháp	Tốc độ tải trang	SEO	Khi nào nên dùng?
SSG	Nhanh nhất	Tốt	Nội dung tĩnh, blog, tài liệu
SSR	Trung bình	Tốt	Nội dung thay đổi theo từng request
CSR	Chậm hơn	Kém	Ứng dụng tương tác cao, không quan trọng SEO

4. Kết luận

Việc lựa chọn giữa SSG, SSR hay CSR trong Next.js phụ thuộc vào nhu cầu cụ thể của dự án. Nếu muốn tối ưu SEO và hiệu suất, SSG là lựa chọn hàng đầu. Nếu cần cập nhật dữ liệu theo từng request, SSR là lựa chọn hợp lý. Trong khi đó, CSR phù hợp với các ứng dụng có nhiều tương tác. Ngoài ra, có thể kết hợp Incremental Static Regeneration (ISR) để cập nhật nội dung động mà không cần build lại toàn bộ ứng dụng.

Bên cạnh đó, với Next.js 14, bạn có thể sử dụng revalidatePath hoặc revalidateTag để cập nhật nội dung một cách linh hoạt mà không cần chờ revalidate theo thời gian cố định. Kết hợp các phương pháp này một cách linh hoạt sẽ giúp bạn xây dựng ứng dụng hiệu quả nhất.

Ngontumathuat