DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Ankita Kulkarni
Ankita Kulkarni

Posted on • Originally published at kulkarniankita9.Medium on

Data Fetching Techniques in Next.js with Visuals โœจ

computer web development

Next.js is a popular JS framework and is incredibly powerful. It is one of my favourite frameworks as it does a great job of making its APIs simple and easy to understand. It has become the production framework for React and rightly so.

visualization works every time

We often tend to visualize things ๐Ÿ”ฎ and concepts to understand them better. If you want to master Next.js, it provides many techniques to fetch data in a manner that is right for your use case. You need to know how and when to fetch it, thatโ€™s all. ๐ŸŒธ

There are many powerful ๐Ÿ’ช ways to fetch data. Here are a few of them:

_Different data fetching techniques in Next.js_

Now that we know what they are called, letโ€™s review how you can fetch data in Next.js in the form of visuals:

Static-site Generation (SSG) ๐Ÿ’ฏ

_How Static-site Generation (SSG) works_

SSG is great for static sites. If you have a lot of static content on your site, SSG is the right fit. ๐Ÿ’ฏ

Without API calls i.e. No external data: ๐Ÿ™…โ€โ™€๏ธ

It is pre-rendered by default since the data is available to us statically. We are not invoking any APIs here so Next.js will store it at build time. For example, the About page, static navigation data, headers, etc.

With API calls i.e. external data ๐Ÿ‘Œ

SSG pre-generates i.e. downloads all the static content at build time before you deploy your site and then serves it directly which means it wonโ€™t make live API calls for every user but instead fetch from the build. The same HTML will be used for every request, making it lightning fastโšก๏ธ.

Whenever you can, use SSG as it will help a lot with performance.

Incremental Static Regeneration (ISR) โšก๏ธ

_How Incremental static regeneration (ISR) works_

This method is one of my favourite ๐Ÿ’œ way of fetching data. It gives you the best of both worldsโ€Šโ€”โ€ŠSSG + SSR. You can opt-in to re-generate a specific page or pages at a specific interval. Let's say you set the interval to be 60 seconds โฐand the first user that visits gets stale data but the user after will get fresh data. ๐Ÿ„โ€โ™€๏ธ

For example, let's say you run a coffee โ˜•๏ธ store and one of your products gets popular. Now you want to get the latest data about that store but that data wonโ€™t get updated every minute. With ISR, you can say I want that store with store id 456232 to get re-generated every 5 minutes ๐Ÿ•ฐ. This way you still reap ๐Ÿ‘†the benefits of pre-generating the data at build time but also take advantage of fresh data.

Example: Old Twitter tweets, not many users will visit old tweets so it is okay for old tweets to have stale data although, with ISR, you can get fresh data for the following request. ๐Ÿ™‚

Server-side Rendering (SSR) ๐Ÿชด

_How Server-side Rendering (SSR) works_

In SSR, HTML is generated for every request on the server. You want to use SSR for a news feed where we always want the latest most relevant news but also want to pre-render data as that is good for SEO. ๐Ÿค–

SSR only runs on the server and not on the browser. ๐Ÿค 

Client-side Rendering (CSR) ๐Ÿ‘ฉโ€๐Ÿ’ป

_How Client-side Rendering (CSR) works_

This is the traditional way of rendering content to the client ๐Ÿ‘Œ. With CSR, we donโ€™t need to pre-render data and instead fetch data at runtime in a useEffect. The browser is responsible for rendering content to the client. This can impact performance as the data is not cached. ๐Ÿ˜ฐ


I hope you found this post useful ๐Ÿ™Œ. If you did, comment ๐Ÿ’ฌ on how you are planning to use Next.js or are using it already. If you would like to learn more about Next.js, I have a course on 2 platforms: Udemy andZero to Mastery.

Top comments (2)

Collapse
ajitzero profile image
Ajit Panigrahi

I got totally got baited by the title ๐Ÿ˜‚ I thought this was an article for making not showing visualizations. Nice work!

Collapse
kulkarniankita9 profile image
Ankita Kulkarni Author

thank you, visuals are the best way to connect the dots and make things stick!

๐ŸŒš Browsing with dark mode makes you a better developer.

It's a scientific fact.