Ali's Blog

Data Fetching Cheatsheet (Nextjs)

Data Fetching Cheatsheet (Nextjs)

When to use What?

Ali Hussein's photo
Ali Hussein
·

4 min read

When you want to fetch data in your Nextjs app and you are not sure when to use what. It depends mainly on where you want to render your app and on some other use cases.

Here is a cheat sheet I pulled from the doc.

TLDR;

  • Client-side (from the browser)
    • send a fetch request
  • Server-side (from the server)
    • fetch data on a request time
    • fetch data on build time
    • fetch data after build

CSR: Client-Side Render

When you choose to render your pages on the browser (CSR) then you can achieve that by sending a request to your API.

  • When to use:
    • Your page doesn't require SEO indexing.
    • You don't need to pre-render your data, or when the content of your pages needs to update frequently.
    • Page depends on user inputs
  • Data is fetched at runtime.
  • Page is rendered in the browser at runtime.
  • Pros:
    • Personalized pages
  • Cons:
    • It is not as fast as other techniques
    • SEO
  • Implementation with fetch(…)
// components/Profile.jsx OR pages/Profile.jsx
function Profile() {
  const [data, setData] = useState(null)

  useEffect(() => {
    setLoading(true)
    fetch('url...')
      .then((res) => res.json())
  }, [])
  return (
    // do what you want with data
  )
}

SSR: Server-Side Rendering

Pages are built on the server before sending it to the browser.

  • When to use:
    • Only if you need to render a page whose data must be fetched at request time.
  • Data is fetched at request time.
  • Page rendered on the server at run time.
  • Pros:
    • Personalized content
    • SEO
  • Cons:
    • It not as fast as other techniques SSG or ISG
  • Implementation with getServerSideProps
// pages/Page.jsx
function Page({ data }) {
  return (
        // do what you want with data
    )
}
//--------------------------------------Server-Side Code
export async function getServerSideProps() {
  const posts = await fetch('https://.../posts').then(r=> r.jons())

  return { props: { data } }
}

export default Page

SSG: Static Side Generation

If you are not satisfied with SSR speed, can use getStaticSideProps

  • When to use:
    • The data page is not user-specific, such as landing pages, blogs, or documentation pages.
    • The page must be pre-rendered (for SEO)
  • Data is fetched at build time.
  • Pros:
    • It is the fastest one! 👍🏻
  • Cons:
    • Personalized content
    • Dynamic content
  • Implementation with getStaticSideProps
// pages/Blog.jsx
function Blog({ posts }) {
  return (
        // do what you want with data
    )
}
//--------------------------------------Server-Side Code
export async function getStaticProps() {
  const posts = await fetch('https://.../posts').then(r=> r.jons())
  return {
    props: {
      posts,
    },
  }
}
export default Blog

ISR: Incremental Static Regeneration

It is as same as SSG but it is used for scaling or dynamic content.

  • When to use:
    • You are using SSG but you want to scale to a lot of pages.
  • Data is fetched at or after build time.
  • Page is rendered on the server at runtime.
  • Pros:
    • It is less fast than SSG when pages haven’t been built yet.
    • Dynamic content
  • Cons:
    • personalized content
  • Implementation with getStaticSideProps + getStaticPaths
// pages/Blog.ts
function Blog({ posts }) {
  return (
    <ul>...</ul>
  )
}
//--------------------------------------Server-Side Code
export async function getStaticProps() {
  const posts = await fetch('https://.../posts').then(r=> r.jons())
  return {
    props: {
      posts,
    },
    revalidate: 10, // In seconds
  }
}

export async function getStaticPaths() {
  const posts = await fetch('https://.../posts').then(r => r.json)

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

  // Nextjs will pre-render only these paths at build time.
  // { fallback: blocking } will server-render pages
  // on-demand if the path doesn't exist.
  return { paths, fallback: 'blocking' }
}

export default Blog
Next.jsReactSSR