TL;DR 📝

If you're in a hurry and don't have time to read the blog, I have built a Next.js app ready for you to experience the different Next.js data fetching strategies. If you need the source code as well, do find it here and also here are some shortcut links:

• Check out how I used getServerSideProps in my app.
• Check out how I used getStaticProps in my app.
• Check out how I used ISR in my app.
• Check out how I used CSR in my app.

A short story 📖

When I first explored Next.js while building my portfolio, I was very confused about the data fetching strategies of Next.js. But as the time approached, in my current company, I was assigned the task to migrate React.js to Next.js. I was ready to accept this challenge and explore Next.js more deeply this time. I used the different data fetching strategies provided by Next.js depending on the dynamic data and SEO requirements of the page.

Here, in this blog, I'll try my best to explain these strategies. Let's start guys!

Prerequisite ✅

I will hope and assume that the readers of this blog have a good knowledge of Javascript and React.js 🙂

1. Server-side Rendering

Server-side rendering in Next.js is achieved by exporting getServerSideProps function from the page. When we export the getServerSideProps function from a page, the following processes take place:

• Data is fetched from the API/Database inside getServerSideProps.
• getServerSideProps returns the fetched data which is received as props to the page.
• The page gets populated with the data and finally returned to the client as HTML.

All the above steps are performed on the server and not on the client(browser) which means getServerSideProps runs on the server.

When to use getServerSideProps?

getServerSideProps can be used when we have highly dynamic content on the page which gets updated every second or minute. For example, LinkedIn feed posts, stock market charts, etc. This is also helpful in situations when we have dynamic <meta> open-graph tags. For example, user-specific posts on LinkedIn, Twitter, etc.

Check out how I used getServerSideProps in my app.

2. Static-site Generation

Static-site generation in Next.js is achieved by exporting getStaticProps function from the page. When we export the getStaticProps function from a page, the following processes take place:

• Data is fetched from the API/Database inside getStaticProps.
• getStaticProps returns the fetched data which is received as props to the page.
• The page gets populated with the data and is ready to be served.

All the above steps are performed during the build time on the server-side (when we execute next build). This makes the page super-fast and helps in SEO. We can think of it as something like an HTML page hardcoded with all the data.

When to use getStaticProps?

• When data required to render the page is available at the build time ahead of a user's request.
• When we have page content that gets updated very rarely. For example, blog posts.

Check out how I used getStaticProps in my app.

3. Incremental Static Regeneration

Incremental Static Regeneration in Next.js is achieved by exporting the getStaticProps function from the page but with the props revalidate. The revalidate prop takes a number denoting the number of seconds after which it should trigger a re-build of the page when a request comes in. In this way, getStaticProps can be used on a per-page basis without rebuilding the entire site. When we export the getStaticProps with revalidate prop from a page:

• Any request made after the initial request and before the revalidation seconds are cached.
• After the revalidation seconds, Next.js still shows the cached page.
• Meanwhile, Next.js has already triggered a regeneration of the page in the background.
• Once the new page generates successfully, Next.js invalidates the cached page and shows the new page.

When to use ISR?

• When we have a less dynamic page content that gets updated a day or in a week. For example, maybe some product page or a dynamic blog page.

Check out how I used ISR in my app.

4. Client-side Rendering

Client-side Rendering in Next.js is achieved by simply using useEffect hook. When we don't need to pre-render a page for SEO or have a page whose data updates frequently, we can go with client-side rendering. Unlike server-side rendering using getServerSideProps, we can use client-side rendering inside components to fetch data. An important point to note is that CSR reduces the performance of the app in terms of loading speed as the data is not cached by Next.js.

Check out how I used CSR in my app.

Wrapping up

Hope I was able to make understand the different Next.js data fetching strategies😊. If you also think so, then do give a reaction and share it with others. Read more about Next.js data fetching strategies from here. Want to add something here? Do write it in the comments 👇