Redirect before hydration end lead to hydration mismatch in prerendered pages. [ vike-vue ]

[AlexStep16]

Hello,

I'm building an SSG+CSR application with vike-vue (no SSR). I need to fetch user data from an API and redirect unauthenticated users to the login page. I tried using +data.client.ts, but I'm getting a Hydration Mismatch because, as I understand, the data hook runs after hydration starts. onHydrationEnd() works, but I want to prevent content from showing before the auth check. guard() doesn't work client-side on prerendered pages. So maybe onBeforeRoute could be potential solution but it's global.

What are the recommended approaches for implementing client-side authentication and redirect based on API data in SSG+CSR, avoiding Hydration Mismatch and ensuring the auth check happens before content is displayed?

[brillout]

See #1916.

[AlexStep16]

No, based on a discussion in the Nuxt community:

Yes, you should not redirect on client-side initial load. You should either redirect on server, render that page as client-only, or wait to hydrate the app before performing a redirection.

Therefore, it seems there's no practical difference in my scenario between using the data() or onBeforeRenderClient() hooks; I'm likely to encounter a hydration mismatch error in either case.

My primary goal is to pre-render only the index page for SEO purposes and redirect authenticated users to a different page. Displaying the initial index page content with a loader while checking the user is acceptable. However, for other routes, the index page content will briefly appear during the initial load, which is undesirable.

Is the following approach a viable solution: For the static "/" route, I would serve the index.html file. For all other routes, I would serve a fallback/index.html file that renders an empty page and after it hydrates, I would then redirect the user to the appropriate page using navigate(urlOriginal)?

[brillout]

Thank you for circling back on this!

It's a pity, it would be nice to have a issue to track on Vue's GitHub.

How about you simply globally set ssr: false while setting ssr: true only for the landing page? Wouldn't that work? But, yea, your workaround seems viable as well, but I ain't sure how you could do it with a nice DX.

Related: #1476 (comment).

[brillout]

It's a pity, it would be nice to have a issue to track on Vue's GitHub.

Done: vuejs/vue#13235.

[AlexStep16]

Thank you for circling back on this!

It's a pity, it would be nice to have a issue to track on Vue's GitHub.

How about you simply globally set ssr: false while setting ssr: true only for the landing page? Wouldn't that work? But, yea, your workaround seems viable as well, but I ain't sure how you could do it with a nice DX.

Related: #1476 (comment).

Yes, that works, and it's my current approach; however, because I have complex routes like /page/@param1/param2, I'll need location rules to redirect to /page/pageWithParams/index.html and then use CSR to navigate.
So I think it will be enough for my case to use redirect in onHydrationEnd() instead of data, and I will keep using ssr:false for other pages.

[brillout]

like /page/@param1/param2

How about using search params ?param1=val1&param2=val2 instead? (If you don't mind the URL being less pretty.)