search

Xiphe / remix-island

utils to render remix into a dom-node instead of the whole document
MIT License
130 stars 7 forks source link

Head not working correctly on catch boundaries #5

Open moishinetzer opened 1 year ago

moishinetzer commented 1 year ago

When catch boundaries are hit, styles and other links are not loaded correctly into the head tag.

Error boundaries, however, work completely fine.

image

Xiphe commented 1 year ago

Good Catch (pun intended)! Will have a look into this in the coming days.

Xiphe commented 1 year ago

Digged a little bit into this, here's what I found:

  1. when we just follow the remix guidelines for setting up a catch boundary it wont render styles even when we don't use remix-island.
  2. In order to have styles in a catch boundary, we need to explicitly add <Links /> in there or manually <link /> to them.
  3. In a remix-island app, this would mean we'd want to render <Head /> in the catch boundary
  4. Unfortunately this does not work, either
  5. If we also add <Scripts /> back in our catch boundary we get the styles in the client, but they're missing in the initial server render

From what I understand, remix deliberately does not teat the catch-boundary as part of the route. It's a "hey nothing you configured matches this, we don't know what to do here" scenario. Where it might be just false to add the same links, meta-tags to the page as the status: 200 version of the same page has.

I'm not sure how to handle this case in remix-island, the first thought coming to mind is that we'd need a CatchBoundaryHead component but that also feels a little strange.

All that said... as written in the pitfalls/notes section of the readme I think it makes sense to move everything global out of remix LinksFunction and MetaFunction and into the static html template in entry.server.ts. And if you put your styles in there you should at least have those loaded on 404 pages. (I understand that does not help with setting a custom title or tracking for those pages)