Optimize data fetching with the new `cache` function in NextJs

In this video, we'll use React's new `cache` function to optimize our NextJs app by caching data fetches and expensive computations and pre-loading data prior to rendering the component.

👉🏼 The Ultimate NextJs 14 Course

👉🏼 Project source code (Github)

👉🏼 React documentation

👉🏼 Work with me

Chapters
0:00 Intro
3:20 Convention
5:15 Caveats
7:45 Example usecases
12:20 When to use cache
15:25 Project code setup
16:50 Caching db queries
19:25 Preloading data
24:54 Recap

[rogerscript]

You are my new hero! best vibes from Nicaragua!

[sergheic]

Great explanation Hamed! Definitely an important topic to understand. You made it very clear using good examples! Thanks!

[sumitsahu]

Thank you for the valuable tutorials ❤

[SamKing-ie]

Hi Hamed, thorough explanation again. Im wondering what would be the difference here between this new cache feature from react and Next.js's built in de-duping? They both eliminate redundant API calls in the same render pass?

[gvgdocu]

Hi Hamed, thanks for the great info, I love the channel!

Question for you: Let's say I have quite a few inputs to a cached function. Passing an object into a cached function causes cache misses unless you are passing the same object reference. Passing all parameters individually seems like it could be an anti-pattern or at the very least get pretty ugly. Do you have any tips on how to avoid something like cache((param1, param2, param3, param4, ...etc) => {...})?

[prashlovessamosa]

Sir can you please share your next js notes it would be super helpful.

[BeastK]

*Respected Sir, *
I have a doubt, what can be done if external API used is currently down, how can we shift in maintenance mode or something like that ?

[BeastK]

I have a very unique question regarding caching, I want to cache api route. Such that I don't want every user initiating new request.

For ex. api1 has revalidate 20sec,
If user1 fetches at 07:00:00 from api1 he gets new data, similarly when user2 fetches api1 at 07:00:01 he should get cached data.

[codechange]

It is a good video. Something learn good. Sir, can you please make video on next js frountend and node js backend authentication using next js middleware and protect route base on roles admin user and sub admin

[hellokevin_]

Hey man, do I need to know a programming language other than Javascript for landing my first role? I'm based in the middle east, I'm sure you know how much of a mess it is lol.

[LehmannMr]

I found a bug There's a hole in your shirt 👚 👚