Причины проблем Hydration Nuxt3?

Question

[Masthead]

runtime-core.esm-bun…er.js?v=4c0e2ae5:50 [Vue warn]: Hydration node mismatch:
- rendered on server: 
  
- expected on client: Symbol(v-fgt) 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" vnode= 
{__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …}
 route= 
{fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …}
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <ThemeWrapper>

Сделал авторизацию. Хотел прогнать через мидлвар кейс, чтобы залогиненный пользователь не мог попадать на страницу auth.

перенаправляет все хорошо, но высвечивается предупреждение (выще) и ошибка Hydration completed but contains mismatches.
Есть какие то скрытые причиныв для этого?

export default defineNuxtRouteMiddleware((to, from) => {
  if (process.client) {
    const token = Cookies.get('Auth-Token')

    if (token && to.fullPath === '/auth') {
      return navigateTo('/')
    }
  }
})

Answer 1

[Александр Талалаев]

Простой и скорее всего верный вариант отключить SSR для защищенных роутов в настройках
https://nuxt.com/docs/guide/concepts/rendering#hyb...

Comments

[Masthead]

это действительно "простой" способ. который вполне себе работает. Но это скорее избегание проблемы, чем ее решение. мне же нужно решение, и, желательно, чтобы все нужные странички были ssr.

[Александр Талалаев]

Masthead, Это не избегание проблемы. В общей практике ssr для страниц за аутентификацией - не нужен, часто вреден и усложняет логику приложения(в зависимости от типа авторизации/аутентификации). В общем случае нет смысла этого делать. Там и баги с куками, и просто част штук нужно писать самому на некоторых сценариях, больше шансов выстрелить себе в ногу в плане безопасности и тд и тп.
Повторюсь. в целом - смысла нет. Зачем здесь делать ssr. если здесь авторизация и у каждого свой содержимое, гуглу тоже здесь нечего делать. Nuxt хоть и условно можно натянуть что он fullstack, но при сложных сценариях всё же придётся что-то добавлять отдельно.
А так.. нужно вам, если не хотите отключить для этих страниц придётся играться с редиректами на стороне сервера и/или с onMounted/onNuxtReady те пока он там сделает гидрацию.
Но повторю, я не вижу тут смысла усложнять себе жизнь.