SSR with Next JS 13 Pages Router

[joshpalmeroc]

Im curious if there are any known issues between the InstantSearchSSRProvider component and the createInstantSearchRouterNext function. It seems like the moment i start to do anything custom within the routing object SSR suddenly stops working. I also notice that within my InstantSearchProvider if i have any sort of nested components that use the useRouter hook I also face issues where it says "Error: NextRouter was not mounted."

router: createInstantSearchRouterNext({
            singletonRouter,
            routerOptions: {
                cleanUrlOnDispose: false,
            },
        })

TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:405:5)
    at new URL (node:internal/url:778:13)
    at BrowserHistory.getLocation

// If we're rendering on the server, we create a simpler router
  if (typeof window === 'undefined') {
    return history(_objectSpread({
      getLocation: function getLocation() {
        return new URL(serverUrl);
      }
    }, routerOptions));
  }

[Haroenv]

Unfortunately you indeed can't use any components which use useRouter without also wrapping the app in a fake NextRouter provider (not easy)

What's the value of serverUrl, I guess it may not actually be a valid or complete URL and that's why the error is thrown?

[joshpalmeroc]

I was able to resolve my issue by making copies of my existing components but removing the useRouter hook that was nested inside them. I think the current documentation on algolia site https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#dynamic-routes is a little misleading because it doesn't mention that you need a serverUrl when doing dynamic routes only if you do the getServerSideProps way. I've added in a serverUrl and now everything seems to work. Thank you!

[joshpalmeroc]

Im curious how you would actually handle the serverUrl beyond just hardcoding it, bc getStaticProps doesn't get access to the req object.

[Haroenv]

Ah with a static site I’m not sure what the solution would be, server side rendering is more designed for dynamic sites