Cách lấy data trong Next js

Static Generation

• Là 1 trong những kỹ thuật Pre-rendering tức page sẽ được sinh ra ngay tại thời điểm build, sau khi hệ thống được build xong các file sẽ được sinh ra ở dạng HTML và được cache lại ở dạng CDN, đây là kỹ thuật được Next js khuyến khích sử dụng nhất, vì khả năng đối ứng rất nhanh của nó.

• Các page luôn được sinh ra trước và không thay đổi dữ liệu nữa nên được gọi là kỹ thuật sinh page tĩnh.

getStaticProps

• Thực hiện get data trong lúc build để cho page có data hiển thị

• Ví dụ tham khảo:

function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts');
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}

export default Blog;

getStaticPaths

• Sử dụng khi page của chúng ta có router động thí dụ như post/1, post/2.

• getStaticPaths sẽ quyết định xem những page nào sẽ được sinh ra. Đường dẫn của các page được sinh ra sẽ nằm trong tập hợp paths được trả về trong hàm getStaticPaths.

• Ví dụ tham khảo:

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts');
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => `/posts/${post.id}`);

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

Server-side Rendering

• 1 kỹ thuật sinh ra page động, khác với Static Generation, Server-side Rendering sinh ra page mỗi lần request, kỹ thuật này được khuyến khích ít sử dụng, chỉ sử dụng khi thật sự cần thiết vì nó sẽ làm chậm tốc độc thực thi của page.

getServerSideProps

• Tương tự như getStaticProps, getServerSideProps được sử dụng để lấy data hiển thị page cho kỹ thuật Server-side Rendering

• Ví dụ tham khảo:

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`);
  const data = await res.json();

  // Pass data to the page via props
  return { props: { data } };
}

export default Page;

Client-side Rendering

• Đối với những page không cần thiết phải render page sẵn cho mục đích SEO chẳng hạn, thí dụ như các page liên quan đến user do tính chất dữ liệu cần động và thay đổi liên tục nên kỹ thuật Client-side Rendering được khuyến khích sử dụng.

• Khi đó, page sẽ được hiển thị ở dạng không có data, sau khi hiển thị xong thì từng phần data sẽ được tải lên trong khi tải có thể hiển thị loading chẳng hạn.

SWR

• 1 trong những kỹ thuật được sử dụng nhiều cho Client-side Rendering là SWR, 1 React hook được team phía sau của Next js tạo ra.

• Ví dụ sử dụng SWR cho Client-side Rendering

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetch);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}