Data fetching was greatly simplified in NextJs 13. We now have one uniform way of fetching data.
Let's look at the code discussed in NextJs 13 data fetching – a basic GET example:
// app/page.js
const api = 'https://jsonplaceholder.typicode.com/posts'
const loadDataFromServer = async ()=> {
const response = await fetch(api)
return response.json()
}
export default async () => {
const articles = await loadDataFromServer()
return (
/* loop through articles and show them */
)
}
There are 3 ways we can fetch data in NextJs 13:
- cached data
- dynamic data
- revalidate
The way you switch between them is by passing the cache
and revalidate
flags to the fetch
function.
Let's see the different fetching types one by one:
NextJs 13 fetch with Cached Data
This is the default way. You will get it if you don't pass any param to the fetch function:
fetch('https://api.example.com')
Or if we want to explicitly add it we can set the force-cache
value for the cache
parameter:
fetch('https://api.example.com', { cache: 'force-cache' })
With cache data, NextJs will only do the actual HTTP request once, at the build time. The next time we are loading the page NextJs will reply with the initial data and will not do again the request.
Use this type of fetching for data that does not change often. For example data from a contact page.
NextJs 13 fetch with Dynamic Data
When we want to run a new request for each page load we can use the no-store
value for the cache
parameter.
fetch('https://api.example.com', { cache: 'no-store' })
Use this for data that needs to be updated in real-time, at each page load. For example the number of available seats for an event.
NextJs 13 fetch with Revalidating Data
We can achieve a mix between Dynamic Data and Cached Data if we use the revalidate
flag:
fetch('https://api.example.com', { next: { revalidate: 10 } });
Use this for the case when we have data that changes, but now very often. For example, you may want to refresh the comments on a blog each 15 min.
Added this table to summarize all of this:
Parameter | When to use it | |
---|---|---|
cached data | { cache: 'force-cache' } or no value |
data that does not change eq: contact data |
dynamic data | {cache: 'no-store'} |
data that needs to be realtime eq: number of seats for an event |
revalidate data | {next: {revalidate:10}} |
data that changes, but now very often blog comments |
What about getServerSideProps, getStaticProps, SSR or CSR in NextJs 13?
Before NextJs 13, we were using special functions like getServerSideProps
for real-time data, or getStaticProps
for cached data. These functions were removed in NextJs 13 and replaced with the above fetching formats.
I've put together this table to show a somehow relative comparison between the two:
Before NextJs 13 | After NextJs 13 |
---|---|
getStaticProps() |
use fetch with Cached Data |
getServerSideProps() |
use fetch with Dynamic Data |
getStaticProps() with revalidate |
fetching with Revalidating Data |
Keep in mind that the recommended way of fetching data is using NextJs server components, and if we want to add loading sates to our pages we can use the loading.js file or React Suspense.
You can find the official documentation here.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.