Advanced data filter and pretty URL for static websites

[Nik96i]

Hi, I'm using NuxtJS + Strapi and I have a big problem with the filtering page. I have a shop page and thousands of products. all of my website's data lives in Strapi. now, I want to create a shop page with a lot of filters for products, like color, size, price, brand, etc. my filters are so many like 20 or 30 filters + pagination and sorting. I'm using pretty URLs and everything is ok without filters.

• my first problem is I can't add all these filters to URL like this:
  website.com/shop/red/big/someBrand/someQuality/someX/someY/ website.com/shop/page/2/red/big/someBrand/someQuality/someX/someY/
  the URL gets very long after adding 20 filters. what should I do?

• the second problem is with Nuxt. if I use "asyncData" and don't use URL params for filtering, I have to write two blocks of code for getting products, because I don't have access to asyncData after loading content. and if I don't use it the data doesn't load in "nuxt generate" and it's not good for search engines especially.

if I remove filters from URL and use asyncData with pagination in URL parameters like this:

website.com/shop/ website.com/shop/page2/

everything is fine. but when the user filters the content I should remove the pagination parameters from the URL and there will be no URL for that filter. it's like everything is Ajax calls.

I want to implement a shop page with a lot of filterers, pagination, and sorting. and every filter parameter can have a specific URL. I want to use pretty URLs and pre-render content so all bots can access them. how can I achieve that? I mean best practice for that. please explain technically. thanks.