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?
Thanks! NextJs doesn't have a built-in de-duping yet. The current deduplication in NextJs is all React in action :) There will be the `unstable_cache` from `next/cache` in future which is similar to what React does but for now we only have React memoization.
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) => {...})?
Thanks! That's a good question. If your arguments are not primitives, you have to make sure you’re passing the same object reference. See this example in the docs → react.dev/reference/react/cache#memoized-function-still-runs
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
*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 ?
@@hamedbahram Thanks, I handled that error in custom error boundary (i got confused because i was using SWR library's error object). But now, I'm experiencing a weird problem with API route handlers, my API route gets data from external API (locally hosted using mockoon tool), I'm using *{ next: { revalidate: 60} }* to get fresh data after 60 seconds & also *'force-dynamic'* to prevent it from becoming static during build. External API returns errors like 404, 429, 503 but API route handler responds with cached data & never returns a error, even other errors caught in catch block are ignored. Any suggestions ?
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.
GET route handlers are static by default, so if you're not using any request related information such as headers, cookies, etc. it would be cached. If you want to revalidate the cached data on intervals you can use the `export const revalidate = 20` to revalidate every 20 seconds.
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.
Not really! Html, css, JS/TS plus a framework like React/NextJs can get you in, but definitely learn TypeScript, and up your knowledge of different databases before attempting to learn a new language.
You are my new hero! best vibes from Nicaragua!
Thank you! Welcome onboard...
Great explanation Hamed! Definitely an important topic to understand. You made it very clear using good examples! Thanks!
Glad it was helpful!
Thank you for the valuable tutorials ❤
My pleasure 😊
thank you so much
You're welcome!
awesome ! thanks!
My pleasure!
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?
Thanks! NextJs doesn't have a built-in de-duping yet. The current deduplication in NextJs is all React in action :) There will be the `unstable_cache` from `next/cache` in future which is similar to what React does but for now we only have React memoization.
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) => {...})?
Thanks! That's a good question. If your arguments are not primitives, you have to make sure you’re passing the same object reference. See this example in the docs → react.dev/reference/react/cache#memoized-function-still-runs
Thank u Hamed
My pleasure!
Sir can you please share your next js notes it would be super helpful.
The notes are part of the NextJs course material.
Thanks Sir.
My pleasure!
This is better than docs
Appreciate that!
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
Thanks! I'm working on auth related videos, I'll have that in mind.
Great
Appreciate it!
*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 ?
You can catch the in the nearest error boundary or the `catch` function on the Promise you're passing to the `use` function.
@@hamedbahram Thanks, I handled that error in custom error boundary (i got confused because i was using SWR library's error object). But now, I'm experiencing a weird problem with API route handlers, my API route gets data from external API (locally hosted using mockoon tool), I'm using *{ next: { revalidate: 60} }* to get fresh data after 60 seconds & also *'force-dynamic'* to prevent it from becoming static during build. External API returns errors like 404, 429, 503 but API route handler responds with cached data & never returns a error, even other errors caught in catch block are ignored. Any suggestions ?
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.
GET route handlers are static by default, so if you're not using any request related information such as headers, cookies, etc. it would be cached. If you want to revalidate the cached data on intervals you can use the `export const revalidate = 20` to revalidate every 20 seconds.
I found a bug !!!!! There's a hole in your shirt 👚 👚
😅 yeah that's how the sleeves are on my hoody.
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.
Not really! Html, css, JS/TS plus a framework like React/NextJs can get you in, but definitely learn TypeScript, and up your knowledge of different databases before attempting to learn a new language.