Loading Skeleton for Search & Pagination in NextJs 13 Movie App

Рет қаралды 12,590

Күн бұрын

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

Пікірлер: 46

@AdilChehabiChkilel 11 ай бұрын

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

@hamedbahram 11 ай бұрын

Glad to hear that! Appreciate your comment.

@user-ji9mk2gd6i 9 ай бұрын

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

@hamedbahram 9 ай бұрын

You're welcome. I'm glad to hear that.

@amir25370 7 ай бұрын

What a perfect tutorial. Amazing. I wish i knew your channel earlier

@hamedbahram 7 ай бұрын

Glad it was helpful! Welcome to the channel.

@ts3798 2 ай бұрын

Very helpful, thanks Hamed.

@hamedbahram 2 ай бұрын

My pleasure!

@nomadmack 11 ай бұрын

Great video, thanks a lot!

@hamedbahram 11 ай бұрын

Glad you liked it!

@NOTHING-en2ue 11 ай бұрын

very well tutorial, thanks a lot ❤

@hamedbahram 11 ай бұрын

You're welcome 😊

@germain1984 11 ай бұрын

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

@hamedbahram 11 ай бұрын

Great suggestion! Glad you found it helpful.

@eliuddyn 11 ай бұрын

Amazing Bro 🔥🔥

@hamedbahram 11 ай бұрын

Thanks 🔥

@ekimdev7622 9 ай бұрын

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" ?

@hamedbahram 9 ай бұрын

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.

@ekimdev7622 9 ай бұрын

Thank you so much Hamed, that was really hard to discover it to me :D !@@hamedbahram

@ekimdev7622 9 ай бұрын

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............. 11 ай бұрын

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?

@hamedbahram 11 ай бұрын

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.

@hey............. 11 ай бұрын

Key attribute doesn't seem to work

@hamedbahram 11 ай бұрын

@@hey............. If you turn the whole page or all your fetch requests to dynamic, does it solve the problem?

@zhiven7484 7 ай бұрын

Nice Video!! This is an optimistic situation, but how to handle error if the server action data fetching return something error?

@hamedbahram 7 ай бұрын

What this video for handing errors → kzfaq.info/get/bejne/q6eYab2A3tq5dJ8.html

@liu-river 9 ай бұрын

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.

@hamedbahram 9 ай бұрын

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

@liu-river 8 ай бұрын

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

@hamedbahram 8 ай бұрын

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

@liu-river 8 ай бұрын

@@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!

@ekimdev7622 9 ай бұрын

Await method is cool !can we promise.all 2 different promises and await both of them in await function ?

@hamedbahram 9 ай бұрын

Yes, definitely