Как работает skipHydrate в pinia?

Question

[pegas]

1) Когда мы оборачиваем переменную в skipHydrate значит ли это что она получит своё состояние только на стороне клиента?
2) А пока мы ещё на стороне сервера какое состояние у этой переменной? undefined?

Answer 1

[Андрей]

Процесс гидратации - это процесс восстановления состояния. Обычно сервер при SSR генерирует HTML и встраивает "гидратирующее состояние" в виде window.__INITIAL_STATE__ или аналогичного объекта прямо в HTML. Клиент потом использует эти данные, чтобы инициализировать своё состояние.

То есть весь происходит примерно следующая последовательность действий:

1. Выполняется код вашего стора на сервере
   
2. Вычисленное состояние (все сторы) сериализуется и например встраивается в html
   
3. На клиенте код стора выполняется повторно, и если есть сериализованное состояние из прошлого шага, оно перезаписывает текущее
   

Отвечая на ваш вопрос:
1) Состояние оно получит в любом случае и на сервере, и на клиенте, но будет помечено, как не требующее восстановления
2) Будет то состояние, которые вы зададите

Comments

[pegas]

т. е. код:

const test = skipHydrate(useLocalStorage('test', true));

создаст запись в сторедже на сервере и на клиенте (браузере) пользователя?

[Андрей]

pegas, useLocalStorage умеет работать на сервере и не падать, но почти наверняка без skipHydrate ваше состояние не сойдется, на клиенте запишется состояние, пришедшее с сервера, игнорируя значение из localStorage.

Сделал playground, без skipHydrate с сервера будет всегда приходить initialValue и затирать все, что лежит в localStorage

[Андрей]

pegas, если вопрос в том, будет ли этот код выполняться на сервер - то да, будет. У pinia нет никаких проверок, в какой среде он выполнятся, да и смысла в этом мало

[pegas]

тогда я в замешательстве. localStorage — это api браузера. В Node.js (где выполняется SSR-рендеринг) этого API нет. Как же он выполниться на сервере?

[Андрей]

pegas, очень просто - если у window нет localStorage, возвращается ref(initialValue)

Из исходников useLocalStorage

const data = (shallow ? shallowRef : deepRef)(typeof defaults === 'function' ? defaults() : defaults) as RemovableRef<T>

  ...

if (!storage)
  return data

Если вам нужно чтобы и на сервере отрабатывало, можно использовать что-то на основе cookie, либо просто используйте skipHydrate и работайте на клиенте