SSR vs. SSG vs. CSR trong nextjs là gì the

Trong Next.js, SSR (Server-Side Rendering), SSG (Static Site Generation), và CSR (Client-Side Rendering) là ba phương pháp khác nhau để render nội dung trên trang web. Dưới đây là mô tả chi tiết về từng phương pháp:

1. Server-Side Rendering (SSR)
   Khái niệm: Trong SSR, mỗi yêu cầu đến trang web sẽ được xử lý trên máy chủ và trả về HTML đã được render sẵn. Điều này có nghĩa là nội dung của trang được tạo ra tại thời điểm yêu cầu và gửi đến trình duyệt.
   Khi nào sử dụng: SSR rất hữu ích khi bạn cần dữ liệu luôn mới (như trang tin tức, thời tiết, hoặc dữ liệu người dùng cụ thể) vì nó đảm bảo rằng nội dung là mới nhất mỗi lần người dùng truy cập trang.
   Cách sử dụng: Trong Next.js, bạn có thể sử dụng hàm getServerSideProps để fetch dữ liệu mỗi khi trang được yêu cầu.
   jsx
   Copy code
   export async function getServerSideProps(context) {
   const res = await fetch(https://api.example.com/data);
   const data = await res.json();

   return { props: { data } };
   }

2. Static Site Generation (SSG)
   Khái niệm: SSG là phương pháp mà các trang web được tạo ra trước (build time) và được lưu trữ dưới dạng HTML tĩnh. Điều này có nghĩa là nội dung sẽ không thay đổi cho đến khi bạn xây dựng lại ứng dụng.

Khi nào sử dụng: SSG rất tốt cho các trang có nội dung ít thay đổi, như blog, trang thông tin sản phẩm, hay các trang giới thiệu công ty.

Cách sử dụng: Trong Next.js, bạn có thể sử dụng hàm getStaticProps để fetch dữ liệu tại build time.

jsx
Copy code
export async function getStaticProps() {
const res = await fetch(https://api.example.com/data);
const data = await res.json();

return { props: { data } };

}
Dynamically Generated Pages: Nếu bạn cần tạo nhiều trang động với SSG, bạn có thể sử dụng getStaticPaths để xác định các đường dẫn sẽ được tạo ra.

jsx
Copy code
export async function getStaticPaths() {
const res = await fetch(https://api.example.com/posts);
const posts = await res.json();

const paths = posts.map(post => ({
    params: { id: post.id.toString() },
}));

return { paths, fallback: false };

}

1. Client-Side Rendering (CSR) Khái niệm: Trong CSR, nội dung được render trên trình duyệt của người dùng, sau khi tải xuống JavaScript từ máy chủ. Khi trang được tải, JavaScript sẽ thực hiện các yêu cầu API và render nội dung trên trình duyệt. Khi nào sử dụng: CSR thích hợp cho các ứng dụng tương tác cao mà không yêu cầu SEO tốt, hoặc khi bạn muốn tải dữ liệu sau khi trang đã được tải. Cách sử dụng: Bạn có thể sử dụng React hooks như useEffect để fetch dữ liệu khi component được mount. jsx Copy code import { useEffect, useState } from 'react';

function Component() {
const [data, setData] = useState(null);

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

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

}
Tóm lại:
SSR: Render trên server mỗi lần yêu cầu. Tốt cho nội dung cần được cập nhật thường xuyên.
SSG: Render trước tại build time. Tốt cho nội dung ít thay đổi.
CSR: Render trên trình duyệt sau khi tải trang. Tốt cho các ứng dụng tương tác cao.
Chọn phương pháp nào phụ thuộc vào yêu cầu cụ thể của ứng dụng của bạn và cách bạn muốn quản lý dữ liệu và SEO.