Filters while maintaining SSG
guys i met an interesting problem, i have a ecommerce site that uses Next13 SSG, but i want to have filters on the all product page. If i use searchParams I get yeeted out of SSG. is it possible to have filters while maintaining SSG?
maybe build param based paths for all possible combinations at build time? is there a better alternative?
23 Replies
Why would searchParams yeet you out of ssg
Rendering: Static and Dynamic
Learn about static and dynamic rendering in Next.js.
oh no
usually any input placed in the search params are supposed to be signifying it being dynamic, so i dont think u can render it statically
but if it is feasible it would save a lot of bandwidth on my CDN
That should be up to the developer though, whether if the search params would be used on the client or on the server on first render.
Shouldn't just be, using search params? Screw you and your bandwidth
The simplest thing would be to lean on a long revalidate for your fetch. The page will be generated at request instead of build time, but if the data is getting cached then it should be faster.
Since you can’t specify search parameters for SSG, a more convoluted approach would be to create a separate route and then do a rewrite. Say you have
listings?category=apparel you can create a separate route /listings/:category which you generate at build time, the. Rewrite /listings?category=X to /listings/X. I haven’t really tried it but it might workyes that's what i thought as well
middleware based rewrite?
@Joshua (Rustular CTO) thoughts?
I'm still a little hung up on how it would be possible for you to SSG these kinds of pages in the first place
Because in my context, for the site I work on, these kinds of pages have content that has to change every time they're loaded
I don't use Next so can't really give any specific feedback there
you can just create a client component where needed and use the useSearchParams hook
make sure to wrap in suspense
you can fetch data statically in a server component and have the sorting/filtering handled by the dynamic client component
That's because i have a webhook that on demand revalidates the data when the data is updates. Here SSG is using ISR
oh gotcha
fetch data on the server and pass it to the client component, then hide and show client components based on filters?
little-sunset-1tl13f
CodeSandbox is an online editor tailored for web applications.
perfect, so the client components are also statically generated at build time then hydrated when requested
any suggestions on implementing pagination to mitigate the initial load time if the initial db call is expensive?
dont know what you mean here exactly
you can pass a page value as a searchParam acessible from the page props and then call the db based off that
If we are going to paginate then there's no point in SSG right?
useInfiniteQuery + ssg adds initial data to it, no?