Truy vấn Dữ liệu từ API trong Next.js: Sử dụng getStaticProps và getServerSideProps

Trong quá trình phát triển ứng dụng Next.js, việc truy vấn dữ liệu từ API là một phần quan trọng để hiển thị nội dung động. Bài viết này sẽ hướng dẫn cách sử dụng getStaticProps để truy vấn dữ liệu tĩnh trong quá trình xây dựng và cách sử dụng getServerSideProps để truy vấn dữ liệu từ API mỗi khi có yêu cầu.

Sử dụng getStaticProps

getStaticProps là một phương thức hỗ trợ trong Next.js cho việc truy vấn dữ liệu tĩnh trong quá trình xây dựng. Nó cho phép bạn tạo trang tĩnh với dữ liệu được truy vấn và được render trước khi ứng dụng được triển khai. Dưới đây là một ví dụ cơ bản về cách sử dụng getStaticProps:

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

  return {
    props: {
      data,
    },
  };
}

Trong ví dụ trên, chúng ta sử dụng fetch để truy vấn dữ liệu từ API và trả về dữ liệu như một props.

Sử dụng getServerSideProps

getServerSideProps là một phương thức khác trong Next.js cho phép bạn truy vấn dữ liệu từ API mỗi khi trang được yêu cầu. Điều này đảm bảo rằng nội dung luôn được cập nhật và động. Dưới đây là ví dụ về cách sử dụng getServerSideProps:

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

  return {
    props: {
      data,
    },
  };
}

Phương thức getServerSideProps sẽ truy vấn dữ liệu từ API mỗi khi có yêu cầu đến trang.

Kết Luận

Trong phần này, bạn đã tìm hiểu cách truy vấn dữ liệu từ API một cách hiệu quả trong ứng dụng Next.js của bạn. Bằng cách sử dụng getStaticProps và getServerSideProps, bạn có thể hiển thị nội dung tĩnh và động một cách linh hoạt trong ứng dụng của mình.