Next.js Discord

Discord Forum

SSR - handling dynamic filtering

Unanswered
Honey bee posted this in #help-forum
Open in Discord
Honey beeOP
For SEO, I'm creating a page during build time. The page contains a list of composers.
users may want to filter the shown composers by different parameters (like year, or style, etc...).
But since the page is created during build time, I'm not sure if this is possible.
Can someone recommend an approach?

22 Replies

Japanese jack mackerel
yes it can you just need a filter/sort/search function added in
American Crow
you build all the possible variants (or at least the ones you want to have statically build) using the return of generateStaticParams. So you'd end up building pages like domain.com/composers/year/2011 domain.com/composers/year/2012 , domain.com/composers/style/opera . You could also mix those e.g. domain.com/composers/2011/opera. Last example would be a catch all route while the other examples would be just catch one level deep
If you provide your goal url structure it would be easier to give an example
@Honey bee This is a non-answer.
Japanese jack mackerel
Seemed like a good one to me 🙂 in your specific case then if you didn't get what I mean is to create a catch all dynamic route and add a getStaticParame to generate all the various options you want built. Then done.
@Japanese jack mackerel Seemed like a good one to me 🙂 in your specific case then if you didn't get what I mean is to create a catch all dynamic route and add a getStaticParame to generate all the various options you want built. Then done.
Honey beeOP
On a client page, I can fetch the data, and apply a filter to it immediatly, and whenever a user filters with some text for example, I can make the list filter immediately.
But with a server component, the data is prerendered, I cant put it through a dynamic filter
@Japanese jack mackerel What are you trying to do with the button?
Honey beeOP
Lets say I have a list of 1000 composers.
During build time, a page gets all composers, and places them on one page.

In an ideal world, I have a search input field, where the user starts typing a composer's name, and it shows only the composers with letters that fit.
However, this requires dynamically filtering the composers as the user types.
And I dont see how that can happen with a component rendered during build time, thats where my issue is. I don't know what the correct approach is.
@Japanese jack mackerel how come you are doing it that way anyway? why not make it dynamic for searching?
Honey beeOP
Is there any way I can do that while still benefitting from a prerendered page? (that is, fast serving and SEO seeing that I have a page with these composers)
thats what i do in this situation
unless im missing something
Honey beeOP
Is that a pages-routes specific approach?
Japanese jack mackerel
works on Pages or App dir routing
i would look into it and see if that works for you
Honey beeOP
I was not aware of this approach. Thank you very much. I only looked in app-dir docs previously, didn't know if some of these approaches are interchangeable between routes approaches.
Japanese jack mackerel
No worries! It's crazy the stuff you can do now. Hope this helped!
also, just a bonus/side tip.. if you create a search api for your site, you can get google to use that for doing SEO/SERP/etc.. its literally the back door into google.. at least i think.
Honey beeOP
Interesting, is this what you mean? https://developers.google.com/custom-search/v1/overview "Custom JSON Search API"?