newsletter

Frontend Snacks: Next.js 13 getStaticProps is gone and my new FREE Course ✨

Hey friend,

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

​😍 Love the idea​
​👍 Liked it, not bad​
​👎 No, don't do it​

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) ⚡️.

Please keep in mind that all the exciting changes of Next.js 13, including this one, are experimental. Therefore, we will compare it to Next.js 12.

In this example, let's fetch pokemon.

But first, what is Incremental Static Regeneration (ISR) 🤔?

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.

Incremental Static Regeneration (ISR) in Next.js 13⚡️

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.

Spot the difference

  • say goodbye 👋 to getStaticProps
  • Say hello to a modified fetch function where you can add an additional property as 2nd parameter { next: { revalidate: 10 } }
  • You can invoke fetch inside the Page directly and no longer need a special function getStaticProps

Latest Frontend Gossip/News 🤫

​JavaScript Rising Stars: Take a look at this as you will get a complete overview of the JavaScript landscape in 2022: trends about frontend, full-stack and Node.js frameworks, React and Vue.js ecosystems, build tools, state management and more.

​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.

​ChatGpt is getting very popular, and I am releasing a Youtube video where we will build an app with ChatGpt. You don't want to miss out on that one. Keep an eye out on my Youtube channel.​

Frontend Developers Toolbox 🧰

  • ​Trace.cafe: It will allow you to trace your performance
  • ​State of JS: This survey is quite popular, and you can see the emerging tech in Frontend
  • ​JavaScript Playground - RunJS: Offline JavaScript playground Write code with instant feedback and access to Node.js and browser APIs.

Have a lovely day!