Dynamic Widgets routing and clean SEO URLS

[zergormagn]

Is there an example of handling dynamic widgets (for facets we don't know at coding time) to generate SEO friendly URLS? After lengthy research I have came across a multitude of examples adding a brand and 1 level category to statically generated URLS.
Is there an approach that would also work for all dynamic parameters that would for instance upgrade the readability of the way qs.stringify() generates the URL string?

[Haroenv]

Do you have a code sample of what parameters you don't know in advance and how you want to mutate them? You can use stateMapping to lower the levels of nesting to make the url simpler, or use createURL of the router to put certain parts of the url in a different spot than the query parameter or use a different serialising method

[zergormagn]

I have various refinementlists such as color/screen_size/weight/ etc that are rendered with dynamicwidgets. I would want them in the URL in a more readable format then what is currently generated with stateMapping.simple() for example:
query=monitor
Screen_Size=14"
Color=Black
currently generates the following URL:

products%5Bquery%5D=monitor&products%5BrefinementList%5D%5B_Screen_Size%5D%5B0%5D=14"&products%5BrefinementList%5D%5B_Color%5D%5B0%5D=Black

vs
q=monitor&Screen_Size=14"&Color=Black

I don't have a codesandbox yet as all the examples I've seen basically recreate what the two functions you mentioned do but for a set amount of parameters, I would prefer to influence the simple() method to work in a more human/seo readable fashion.

The refinementlists are not known at coding time, they change dynamically depending on the hits displayed.

[Haroenv]

Do you only have refinementLists and query or are there other items available as well?

[zergormagn]

I have a few static widgets like instock, category, price (that are not refinementlist). But the dynamic are all refinementLists yes.

[zergormagn]

maybe the static widgets need to be done like in the current examples and the dynamic refinementlists with something like simple() to generate a URL more like this:
q=monitor&category=display&inStock=yes&dynamic=Screen_Size:14"~Color:Black~Aspect_Ratio:16-9

[Haroenv]

In that case you can use a stateMapping like this: https://codesandbox.io/s/reverent-goldwasser-qvx384?file=/src/app.js

const search = instantsearch({
  indexName: 'instant_search',
  searchClient,
  routing: {
    router: instantsearch.routers.history({
      createURL({ qsModule, routeState, location }) {
        const { protocol, hostname, port = '', pathname, hash } = location;
        const queryString = qsModule.stringify(routeState, {
          // CHANGED: cleaner repetition
          arrayFormat: 'repeat',
        });
        const portWithPrefix = port === '' ? '' : `:${port}`;

        // IE <= 11 has no proper `location.origin` so we cannot rely on it.
        if (!queryString) {
          return `${protocol}//${hostname}${portWithPrefix}${pathname}${hash}`;
        }

        return `${protocol}//${hostname}${portWithPrefix}${pathname}?${queryString}${hash}`;
      },
      parseURL({ qsModule, location }) {
        // `qs` by default converts arrays with more than 20 items to an object.
        // We want to avoid this because the data structure manipulated can therefore vary.
        // Setting the limit to `100` seems a good number because the engine's default is 100
        // (it can go up to 1000 but it is very unlikely to select more than 100 items in the UI).
        //
        // Using an `arrayLimit` of `n` allows `n + 1` items.
        //
        // See:
        //   - https://github.com/ljharb/qs#parsing-arrays
        //   - https://www.algolia.com/doc/api-reference/api-parameters/maxValuesPerFacet/
        return qsModule.parse(location.search.slice(1), { arrayLimit: 99 });
      },
    }),
    stateMapping: {
      stateToRoute(uiState) {
        const indexUiState = uiState.instant_search;
        const {
          query,
          toggle,
          refinementList,
          configure: _ignored,
        } = indexUiState;
        return {
          query,
          free_shipping: toggle && toggle.free_shipping,
          ...refinementList,
        };
      },
      routeToState(routeState) {
        const { query, free_shipping, ...refinementList } = routeState;
        return {
          instant_search: {
            query,
            toggle: {
              free_shipping: free_shipping === 'true',
            },
            // turn refinementList values to array if only a single item is selected
            refinementList: Object.fromEntries(
              Object.entries(refinementList).map(([attribute, refinements]) => [
                attribute,
                Array.isArray(refinements) ? refinements : [refinements],
              ])
            ),
          },
        };
      },
    },
  },
});