Data Fetching in Next.js

Before diving into this topic I will highly recommend to go through the different types of components and different ways of rendering done in next.js discussed in [this post.] (https://dev.to/anisriva/rendering-in-nextjs-4de1)

1. Client-Side Rendering (CSR)

• Data Fetching: Data is fetched on the client side, typically inside useEffect or a custom hook.

• Method: Fetching is done directly within the component using the browser’s fetch API or a client-side data-fetching library like SWR or React Query.

• Execution: Fetching happens after the page loads and relies on JavaScript for rendering and interactivity.

• Caching: Dependent on the browser’s caching mechanism and any HTTP headers returned by the server. Client-side caching can also be managed through libraries (e.g., SWR).

• Use Case: Good for highly interactive, dynamic pages (e.g., dashboards) where SEO is not a priority, or where data is personalized and user-specific.

Example:

import { useEffect, useState } from 'react';

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

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

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

2. Server-Side Rendering (SSR)

• Data Fetching: Data is fetched on the server for each request, using getServerSideProps.

• Method: getServerSideProps executes on every request, retrieving data and passing it to the component as props.

• Execution: Runs on the server at request time, generating fresh HTML for each request.

• Caching: You can configure server or CDN caching, but by default, it generates new HTML for every request.

• Use Case: Ideal for frequently updated or user-specific data, where the latest data is essential on every load (e.g., personalized dashboards or live data feeds).

Example:

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

  return { props: { data } };
}

function SSRPage({ data }) {
  return <div>{data.content}</div>;
}

3. Static Site Generation (SSG)

• Data Fetching: Data is fetched once at build time using getStaticProps.

• Method: getStaticProps retrieves data at build time, generating a static HTML file that is cached until the next build.

• Execution: Runs only during the build process, making the page content static.

• Caching: Content is fully cacheable by CDNs and does not change until the site is rebuilt.

• Use Case: Ideal for static or rarely changing content (e.g., blog posts, product pages) where load speed and SEO are a priority.

Example:

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

  return { props: { data } };
}

function SSGPage({ data }) {
  return <div>{data.content}</div>;
}

4. Incremental Static Regeneration (ISR) (SSG with Regular Updates)

• Data Fetching: Data is fetched at build time but can be refreshed at regular intervals using the revalidate option in getStaticProps.

• Method: getStaticProps fetches data and uses the revalidate field to specify an interval for regeneration.

• Execution: Initially generated at build time, but after the specified interval, the page will be regenerated in the background on the next request.

• Caching: Cached globally on CDNs with periodic regeneration based on the revalidate interval.

• Use Case: Ideal for semi-static content that needs occasional updates (e.g., product listings, news articles) without needing to rebuild the entire site.

Example with ISR:

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

  return {
    props: { data },
    revalidate: 60, // Regenerates every 60 seconds
  };
}

function ISRPage({ data }) {
  return <div>{data.content}</div>;
}

Summary Table