I hope you have kicked off 2023 with a bang. 💪 I have a good feeling about this year!
I plan to write a FREE Email Course ✨ on React Server Components, but I want your feedback. Would you be interested? Please select one of the links below
Anyway, moving on to our weekly snack,
Let's review a snack where we will be using Next.js 13's Incremental Static Regeneration (ISR) ⚡️.
In this example, let's fetch pokemon.
This method is one of my favourite 💜 ways of fetching data. You can opt-in to re-generate a specific page or pages at a specific interval. Let's say you set the interval to 60 seconds ⏰ and the first user that visits gets stale data, but the user after will get new 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 new data.
In Next.js 12, we use a function called getStaticProps to fetch pokemon. On the left-hand side, you will see we use getStaticProps and revalidate prop, meaning every 10 seconds, new pokemon will be fetched. So the first user that comes at the 11th second will still get stale data, although it will send a request to the server for fresh data; hence the 12th user will get fresh data.
On the right, you will see how we can do the same in Next.js 13.
tRpc is getting a lot of love, and I think it might be a strong competitor to GraphQL as it eliminates the need for GraphQL.
Have a lovely day!