Loading Skeleton for Search & Pagination in NextJs 13 Movie App
Vložit
- čas přidán 29. 07. 2024
- In this video, we'll use Suspense to add a loading skeleton to our movie app during search and pagination. We'll also learn about the Router cache and how to invalidate it to show our pending UI.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code
🔗 github.com/HamedBahram/next-p...
Chapters
0:00 Intro
1:26 Project setup
2:30 Extract movies into a component
4:40 Add Suspense
7:10 Invalidate the Router cache
14:30 Add key to page component
16:15 Add loading skeleton
17:30 Add the Await component
21:46 Outro - Věda a technologie
Thanks a lot Hamed, I struggled with that and gave up after hours of searching and reading the doc.
Your way of explaining complex concepts is the best I've ever seen, in every tutorial I found you answering all the questions that are in my head 👍.
Glad to hear that! Appreciate your comment.
wow it's really to help full i spend hour's and hours but you give solution within 10 minutes thank's a lot , you make video on real problems of work issue that's really very helpful to us
You're welcome. I'm glad to hear that.
What a perfect tutorial. Amazing. I wish i knew your channel earlier
Glad it was helpful! Welcome to the channel.
Very helpful, thanks Hamed.
My pleasure!
Love your videos! Learned a lot from your section on router caching. Would be amazing if you could make one video summarizing all of the Caching behavior in Next.js 13.4+ as I believe that is the single biggest headache in the new Next.js
Great suggestion! Glad you found it helpful.
Great video, thanks a lot!
Glad you liked it!
very well tutorial, thanks a lot ❤
You're welcome 😊
Amazing Bro 🔥🔥
Thanks 🔥
Thank you so much for the information thats really useful. Can i ask a question here, since we are "disabling" client cache in browser by adding key, it will not affect the server cache right if we send request with native fetch api and cache set to "force-cache" ?
You're welcome! That's right it won't effect the fetch deduplication, and it won't disable the client cache entirely either, it just re-renders the component with the key prop.
Thank you so much Hamed, that was really hard to discover it to me :D !@@hamedbahram
That might me an interesting and unnecessary thing but , is there any chance like to deploy next project to vercel with the server cache we got in local ? :D@@hamedbahram
Hey, really informative. One question though, lets say i have 3 api calls on my page component. I want one call to be revalidated after every 45 seconds and want to pass the result of this call to 2 other calls on this page. For these 2 calls i want to disable caching and as i am using next.js extended fetch api. I set cache:no-store. Now if i switch between pages, i see my data is stale. I will try setting key attribute, but if i set key attribute does caching works for my first api call?
Interesting scenario here 🤔 I'd have to see the code for this to know how you're implementing all these requests. Use the key and let me know how it goes.
Key attribute doesn't seem to work
@@hey............. If you turn the whole page or all your fetch requests to dynamic, does it solve the problem?
Await method is cool !can we promise.all 2 different promises and await both of them in await function ?
Yes, definitely
Nice Video!! This is an optimistic situation, but how to handle error if the server action data fetching return something error?
What this video for handing errors → czcams.com/video/uAh6ZOytUDk/video.html
So this is great, but when the images come in, you can see there is a fraction of second of gray background before the images appear, but the text is instant. Is there a way to avoid that so the image and text appear at the same time? I guess what I mean is like how Unsplash shows a blur image while loading.
Yes the `Image` component allows you to show a blurred placeholder before the actual image loads. You can read more here → nextjs.org/docs/app/api-reference/components/image#placeholder
@@hamedbahram Hey, thanks for all the hard work you put into this channel, I learned a lot from you. I have another question, instead of passing in a random key, what if we pass in the search param as key so that repeated searches will hit the cache. I am just thinking out loud and haven't tried to implement it. What do you think? BTW the way you solved it in the first place really showed your knowledge of how things work behind the scene, I would never thought of a workaround like that. Very impressive.
@@liu-river Glad to hear you've learned from my channel. That's an interesting idea 🤔try it out and let me know how it goes.
@@hamedbahram I watched your video again just to consolidate what is happening here. I used the Await helper which is super cool BTW to use in conjunction with Suspense. My theory worked. My app is a filter rather than a search but the logic is the same right, so on searchParams thats already been visited, no waiting, cache hit and page render straightaway. On the other hand searchParams that have not been cached, loading UI kicks in. It's so smooth. I passed key={searchParams.sort as string} to my top div rather than UUID. Thanks again Hamed!
When disable js in browser, display skeleton loading page, how when disable js , show skeleton and data or display data only when disable js
I'm not sure if I understand the question!
isn't this solution going to introduce hydration errors?
Why would that be?
Its working in Devlopment mode but when prodcution fallback is not showing
Not sure why you're experiencing that. It works on my end => next-pagination-one.vercel.app/
is the problem with nginx?
@@deepanshuverma3536 Not sure!
Suspense fallback is not showing
Suspense fallback only shows the first time.
merci ke enghad khobi mishe rajebe kar ba headlessUi ham video besazi
Merc, hatman!