Is there any example using Nuxt SSR and Friendly SEO routes?

[helioepeca]

I've already made the SSR version of my store, but can't figure out how to mix the SSR with friendly SEO routes as described here: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/#seo-friendly-urls

When I try to fix the SEO routes using historyRouter the SSR doesn't works and when i use SSR i can't implement the routes.

[francoischalifour]

Hey @helioepeca!

When I try to fix the SEO routes using historyRouter the SSR doesn't works

Does it throw because window is not defined on the server?

In InstantSearch.js v4.33.0 we brought support for server environments in the history router. The last version of Vue InstantSearch relies on InstantSearch.js v4.32.0 though.

If you use Yarn, you could use resolutions to use v.4.33.0:

{
  "resolutions": {
    "instantsearch.js": "4.33.0"
  }
}

(npm-force-resolutions seems to be the alternative for npm.)

You need to pass getLocation to the history router to return the location provided by Nuxt on the server:

const routing = {
  // ...
  router: history({
    getLocation() {
      if (typeof window === 'undefined') {
        // return location from Nuxt
      }

      return window.location;
    },
  }),
};

(I'm not too familiar with Nuxt, but if their router works both on the browser and on the server, you don't need this conditional branch, just return the Nuxt location.)

[helioepeca]

Hi @francoischalifour thanks for your reply.

Yes, actually my application throws the window is not defined error. I got the 'getLocation' workaround but I haven't understood how I'm supposed to get the location from nuxt, how do you do it, since SSR doesn't have window object?

I'm trying to change something like this (I'm using refinementList):

mywebsite.com/list?department%5B0%5D=Pe%C3%A7as%20VW&section%5B0%5D=Motor

to this:

mywebsite.com/lista/pecas-vw/motor

And using the historyRouter works but not when I refresh the page 😐

[Haroenv]

Do you have a codesandbox of what you implemented currently @helioepeca ?

[helioepeca]

Hi @Haroenv @francoischalifour I've made this example on codesandbox:

https://codesandbox.io/s/tender-dawn-iew54

The dataset may look weird because I'm testing, but essencialy when I select a single category on hierarchy menu the ais-hits gets updated, but when I refresh my page the route doesn't keep with the filter. Also on this example i'm not using historyRouter.

[Haroenv]

This happens because the array is written inline which gets registered as a change on every rerender, fixed version is putting those arrays in data @helioepeca:

https://codesandbox.io/s/brave-bartik-k3wrh?file=/pages/list/_.vue

[helioepeca]

This happens because the array is written inline which gets registered as a change on every rerender, fixed version is putting those arrays in data @helioepeca:

https://codesandbox.io/s/brave-bartik-k3wrh?file=/pages/list/_.vue

Hi @Haroenv I get it and changed on my code, but is still removing the menu filter when I refresh the page, in my codesandbox example and in yours

When I refresh this url for example: https://k3wrh.sse.codesandbox.io/list/masculino
The route returns https://k3wrh.sse.codesandbox.io/list/

[Haroenv]

I couldn't figure out what's causing this @helioepeca, my guess it's related to either the stateMapping you have (you have a branch with empty ui state that's confusing) or in the create url itself

[podlebar]

@helioepeca it won't work see those issues:

#1062
#1054
#1066

[Haroenv]

For now this issue has nothing else actionable I think, as it's covered by different issues. I'll close this.