SPA Mode hydration issue when page title relies on client state

[late onyx]

I have a Remix app using SPA Mode and uses react-intl for translation. I am therefore translating the title in a meta export. This works great, however I am getting hyrdation mismatch errors in the console. Since the locale is stored in localStorage and SPA Mode has a single index.html file which has the default (non-translated) value.

Seems to me like there are a few options:

1. Somehow put suppressHydrationWarning on the <title>. This is not currently possible as it is part of the in-built <Meta> components.
2. Don't translate the root title, and rely on each individual route to specify a dynamic translated version.
3. Dynamically override the page title on hydration instead of using the meta API.

Curious if anyone has ran into this, and if there are more options I am missing?

[trim nexus]

The hydration error is correct here, users are going to see a flash of the wrong language before it can read local storage client side

You should be able to remove the title from Meta entirely

And add the title tag into your root tsx head file

From there you’ll be able to add suppress hydration warning or choose when to update the language

[late onyx]

Thanks for the response @trim nexus.

You should be able to remove the title from Meta entirely
This would presumably stop export const meta... from working on routes right?

And add the title tag into your root tsx head file
With the latter, that would create 2 title tags?

[cyan monolith]

(2) is the right approach here

In SPA mode, only the root route ever runs on the server to generate the index.html file - that way that file can be used to hydrate for any possible path (all of which descend from root)