router icon indicating copy to clipboard operation
router copied to clipboard

Rendering routes server side with `react-location-lite`

Open nrgnrg opened this issue 3 years ago • 0 comments

Describe the bug I've been trying react location lite in an SSR setup and hit a minor hurdle which I think is a bug.

Routes do not render on the server, the <Outlet /> simply renders null and the outlet renders client side. It looks like this is simply a result of this hook not executing on the server:

https://github.com/TanStack/react-location/blob/04abfd6e3b827d818e4444c867092ca93a2e06ee/packages/react-location-lite-experimental/src/index.tsx#L463-L478

It would be necessary to pass the initial path into the ReactLocation instance on the server to make this work, I haven't seen docs on this but something like this is possible:

  new ReactLocation({
    history: createMemoryHistory({
      initialEntries: [new URL(request.url).pathname],
      initialIndex: 0,
    }),
  }),

But I also wonder if there could be a simpler API for this that didn't involve invoking createMemoryHistory manually?

I'm currently just doing something like this in App.tsx to work around the issue:

  const router = useRouter();
  const [initialRoute] = matchRoutes(router, router.state.location);

  return (
    <Suspense fallback={null}>
      {import.meta.env.SSR ? initialRoute.route.element : <Outlet />}
    </Suspense>
  );

I'm wondering if I've missed some obvious pitfall with what I've done, was there a reason this is the SSR behaviour?

Expected behavior Routes render on the sever and cleaner API for passing the route server side.

Desktop (please complete the following information):

  • OS: mac
  • Browser: chrome
  • Version: 98

nrgnrg avatar Feb 25 '22 10:02 nrgnrg