Adding Search Feature in Server Components | NextJs 13

In this video, we'll look at adding a search feature to our movie app built using server components in NextJs 13. We'll use client components to add interactivity and hooks to debounce the user input.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code → checkout the `search` branch
🔗 github.com/HamedBahram/next-p...
👉🏼 MongoDB Atlas Search
🔗 www.mongodb.com/docs/atlas/at...
👉🏼 The `use-debounce` package
🔗 www.npmjs.com/package/use-deb...
Chapters
0:00 Intro
3:00 Adding the search input
7:36 Debouncing user input
11:30 Refactoring the getMovies function
12:15 MongoDB full-text search
14:30 Refactoring our links
16:30 Debugging
21:38 Outro

[@Kai-cz7wf]

Am really glad I clicked this video, at first I thought i have to state management for all this stuff but you make it really simple and awesome and exactly same what I want to make. Thnx a lot

[@hamedbahram]

Glad it was helpful!

[@Kai-cz7wf]

@@hamedbahram there is a problem i found, I also have some button on the page redirecting to another page but they all came back ('/movies") whenever I click them, Is there any solution??

[@MranZupljanin]

what a hidden gem of a channel, ur explanations are magnificent.. great job

[@hamedbahram]

Thanks! glad you think so!

[@ogbillity]

Excellent tutorial. Thank you so much.

[@hamedbahram]

Glad it was helpful Peter!

[@eshw23]

Dude I cant believe youtube didnt recommend your channel to me wow glad I found it, was looking for more basic technical videos on concepts we need to master instead of 5 hour long project tutorials. These helps me work on my own projects

[@hamedbahram]

Glad to hear that! Welcome to the channel. I appreciate your comment.

[@heysahilsingh]

Same feeling ❤

[@benjimosso]

Man, you are amazing! Thank you so much!!

[@hamedbahram]

You're welcome! Glad it helped.

[@darawan_omar]

I don't know what to say or describe you. You are always the best ❤❤

[@hamedbahram]

Thank you so much 😀

[@mariocesena2277]

Awesome tutorial! 👌🏼👌🏼

[@hamedbahram]

Thank you 🙌

[@user-ck8vg9bd6v]

thank you brother for that video

[@hamedbahram]

My pleasure!

[@bhuvicodes]

What a great tutorial ❤

[@hamedbahram]

Glad you think so!

[@eliuddyn]

Amazing Tutorial 🔥🔥

[@hamedbahram]

Thanks 🔥

[@juanferrer5885]

Awesome tutorial. A tutorial of testing in App router would be great

[@hamedbahram]

Thank you! Great suggestion by the way.

[@mousaahmed6689]

absolutely magnificent

[@hamedbahram]

Appreciate it!

[@jordanrodrigues1824]

Superb!

[@hamedbahram]

Thank you! Cheers!

[@peteronyegbule7207]

you saved me from 4 days of no success thank you so much

[@hamedbahram]

Glad I could help

[@rishuscript]

Underrated channel 😢 Lots of love to your channel ❤

[@hamedbahram]

Thank you! I appreciate that!

[@mohammadmalek5042]

Thank you ❤

[@hamedbahram]

Welcome!

[@mamunahmed8113]

Big fan from Bangladesh❤❤❤

[@hamedbahram]

Welcome to the channel!

[@oluwafemifaleye6845]

Thank you so much

[@hamedbahram]

Anytime!

[@FGA-47]

Thanks alot

[@hamedbahram]

Happy to help!

[@movietime8403]

Thank you :), it was really useful you saved me from the bugs which i have been working on 2 days.

[@hamedbahram]

Glad it helped!

[@zaidsameer]

Thanks for the great tutorials you provided, What If I have more than one param each passing the params values to a parent (server component) page and i want to delete one of the params?

[@hamedbahram]

I'm not sure if I understand the question correctly. We are setting two different params here, one for the search term, and the other for the page number from different components.

[@aymenbachiri-yh2hd]

Thanks

[@hamedbahram]

Welcome!

[@pamcls]

Amazing content, as always. You're the man!!!👏 Now, I have a problem with this approach, dunno, if you can help: Since you know Prismic, I'll expose the real scenario: I have a dynamic Page server component (let's say: [page]) and I have multiple slices in it. One of them it's an `ArticleCategory` slice (server component) that fetches a list of articles of a specific category and in that slice, as child component, I have a client component that handles the searchTerm. All fine and using the same example you're showing in the video, however, I get a 500 error when accessing a page with that slice because I am using generateStaticParams on that `Page` component to get all the documents from Prismic. The error is known: "Static to Dynamic Error" and there's a fix for regular scenarios, advised by nextjs, just turn your page into dynamic (If I remove the `generateStaticParams`) it works but that defeats the whole purpose of having static regeneration. I know this is farfetched but maybe you've a solution for this 🙏😅 Thanks in advance for your help

[@hamedbahram]

Thank you! I've had a similar problem before with the static generation and deleting the `.next` folder and restarting the dev server or rebuilding the project solves the problem most of the time. But beyond that I'm not sure what specifically might cause this error in your implementation.

[@user-yq3if2mi5h]

Hello Hamed! Could you please show us how to make multi category filter system in addition to pagination and search using server components with URL? Thank you in advance!

[@hamedbahram]

That's a good idea, I'll have that in mind. Thanks.

[@adeniyitaofik3832]

Hello what if you have other query in the url alreay how do you remove just the search from the url query params without affecting others

[@hamedbahram]

Good question, you'd have to get all query parameter and only rewrite the `search`

[@0xtz_]

Amazing 👏, I'm using a model, I have a form to select a user by searching.... any other ideas to implement this without setting the url ? Please

[@hamedbahram]

You can use server actions as well, if you look at the infinite scrolling video where I use a server action to fetch data from the server but also from the client. Other than that you can use the good old client side fetching.

[@0xtz_]

@@hamedbahram thanks man

[@hamedbahram]

@@0xtz_ Anytime!

[@StephenRayner]

Do a video on event driven architecture in NextJS 13 with Inngest 🎉

[@hamedbahram]

Thanks for the suggestion, I like that!

[@christophercaldwell6641]

What would you suggest if you wanted to show a loading skeleton of movies while the search was running? It looks instant, but what if you added an artificial 2-3 second delay on getMovies? Do you know how to go about showing the static content of movies while the server waits for the movies to load?

[@christophercaldwell6641]

I just saw your other video where you make a loading skeleton lol. Watching it now! Oops.

[@hamedbahram]

There you go :)

[@christophercaldwell6641]

@@hamedbahram Great video thank you. Have you used partial prerendering? Adding the key did not solve the stale issue when PPR was enabled. Not your problem, ofc. It works just fine without PPR enabled. Wondering if you have used it at all and did the same thing in the video, just with PPR

[@hamedbahram]

@@christophercaldwell6641 Haven't tried it with this particular example. But I'll have a video on partial pre-rendering soon.

[@christophercaldwell6641]

@@hamedbahram oh okay, cool. I’ve been stuck for a few days, I haven’t been able to find any solution. I tried all of the things you mentioned, router refresh, keys, etc. In my experience when you navigate, the route doesn’t change until the fresh data has been loaded and then it abruptly changes to the new stuff. Another thing of note is that this worked as expected for me in local development, but hosted on Vercel did not. I’d love to see a video on this, it’s frustrating and I’m close to using a client side data fetching pattern to get around it. Not ideal!

[@UWalexs]

for me, useEffect is rendered multiple times and that initial "first render" if block is bypassed and I lose the page query param upon refreshing the page. When config is set to strictMode: "false", then this logic works. Any ideas? 🤔

[@hamedbahram]

It shouldn't be like that, clone and compare my code to see what you're doing differently!

[@ahmadnehal]

In my case, it was due to React's Strict Mode that you can turn off in next.config.js.

[@user-ny9em7sy7f]

Followed your steps,everything working excepts useEffect in searchBar component, on refresh page={number} is deleted

[@hamedbahram]

Compare your code to mine (link in description) and see what you're doing differently.

[@user-ny9em7sy7f]

did it but still the same... @@hamedbahram

[@ahmadnehal]

In my case, it was due to React's Strict Mode that you can turn off in next.config.js.

[@aravind_k28]

Amazing tutorial ❤. But one doubt, even if you use search params as state, it will do server rendering but it won't show any loader right? And also it will take some noticable time to get the results and render them. loader.tsx file also won't help... So which method should we use client or server components? Hoping for a response... Thank you!

[@hamedbahram]

Thank you. You can use either one, I prefer server components, because it eliminates the need to create an API layer, also it's faster as it ships less JS to the browser, it can also benefit from NextJs cache. The loading UI is not ideal as it won't trigger since the route doesn't change.

[@aravind_k28]

@@hamedbahram Thank you!

[@aravind_k28]

@@hamedbahram but user won't see any feedback like loader while the data is being fetched, what can we do in that case? Isnt that a bad ux?

[@hamedbahram]

@@aravind_k28 Agreed! we need a loading inidcator, I'm thinking to pass the promise to await it in a suspense component... I'd have to think about this. Let me know if you could come up with a solition in the mean time.

[@aravind_k28]

@@hamedbahram I tried that approach. It won't work as expected if you change query params. I also tried loading.tsx, no hope. But even if we add loading.tsx or suspense, we will loose SEO, because the crawlers will see loading icon only. Currently I don't know how to achieve the exact balance between SEO and decent UX... 🥲

[@generalwill10]

I’d like to see an example like this but querying an API…anyone know of a good resource that shows that?🧐

[@hamedbahram]

Do you mean querying an API from a client component?

[@generalwill10]

@@hamedbahram I suppose in your example yes. I’m transposing an app I made using an api from Next 13 to Next 13.4 where the App router became stable. I want to add a search bar to my app to query the api and then receive whatever they query back to them.

[@hamedbahram]

@@generalwill10 Ok great! and what part is stopping you?