Phân Biệt Static Site Generation (SSG) và Server-Side Rendering (SSR) trong Next.js: Cách Nhận Biết và Áp Dụng.

Mở đầu:

Giới thiệu: Chào anh em, Đại Dev đây! Trong bài này, mình sẽ hướng dẫn anh em cách phân biệt giữa Static Site Generation (SSG) và Server-Side Rendering (SSR) trong Next.js. Đây là hai phương pháp cực kỳ quan trọng để tối ưu hóa hiệu năng và trải nghiệm người dùng cho website.

Lợi ích của việc hiểu rõ SSG và SSR: Việc nắm vững SSG và SSR giúp anh em lựa chọn phương pháp render phù hợp, từ đó tăng tốc độ tải trang và cải thiện SEO, đồng thời giảm tải cho server. Mỗi phương pháp đều có điểm mạnh riêng và việc áp dụng đúng sẽ giúp dự án của anh em hoạt động trơn tru hơn.

Hãy bắt đầu: Không chần chừ nữa, chúng ta cùng khám phá chi tiết cách nhận biết và áp dụng SSG hay SSR trong Next.js nhé!

Để biết một trang trong Next.js sẽ sử dụng Static Site Generation (SSG) hay Server-Side Rendering (SSR), bạn cần xem xét cách hàm fetch dữ liệu được sử dụng trong trang đó. Dưới đây là cách phân biệt từng loại:

Static Site Generation (SSG)

Trang sử dụng SSG khi bạn dùng getStaticProps. Đây là phương thức fetch dữ liệu và render trang trong quá trình build (tại thời điểm xây dựng ứng dụng). Kết quả được lưu trữ tĩnh và phục vụ khi người dùng truy cập.
Ví dụ về SSG:

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

  return {
    props: {
      data,
    },
  }
}

export default function Page({ data }) {
  return <div>{JSON.stringify(data)}</div>
}

Server-Side Rendering (SSR)

Trang sử dụng SSR khi bạn dùng getServerSideProps. Dữ liệu được fetch và trang được render mỗi lần có request từ người dùng, tức là trang được render runtime trên server.

Ví dụ về SSR:

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

export default function Page({ data }) {
  return <div>{JSON.stringify(data)}</div>
}

Cách Nhận Biết:

SSG (Static Site Generation): Nếu trang sử dụng getStaticProps, thì trang đó sử dụng SSG.
SSR (Server-Side Rendering): Nếu trang sử dụng getServerSideProps, thì trang đó sử dụng SSR.

Ví dụ SSG:

export async function getStaticProps() {
  // Fetch data at build time
  return {
    props: { /* your props */ },
  }
}

Ví dụ SSR:

export async function getServerSideProps(context) {
  // Fetch data on each request
  return {
    props: { /* your props */ },
  }
}

Kết luận:

Tóm tắt: Qua bài viết này, anh em đã hiểu rõ sự khác biệt giữa Static Site Generation (SSG) và Server-Side Rendering (SSR) trong Next.js, cũng như cách áp dụng từng phương pháp để tối ưu hóa website của mình. Đây là những kiến thức cốt lõi giúp anh em xây dựng những trang web mạnh mẽ và hiệu quả hơn.

Ở bài viết tiếp theo, mình sẽ hướng dẫn anh em cách kết hợp SSG và SSR một cách linh hoạt trong các dự án Next.js phức tạp, giúp tối ưu hiệu suất và trải nghiệm người dùng.

Cảm ơn anh em đã theo dõi bài viết. Nếu có bất kỳ câu hỏi nào, đừng ngần ngại để lại bình luận. Hẹn gặp lại anh em trong bài viết tiếp theo nhé! 🚀

Bài viết liên quan: