Next.js + Ant Design hydration issue - Persist Storage

[spyderdsn]

Hi, I'm having an issue with the hydration issue while using the persist storage + ant inputs or selects. I've looked into other discussions eg. #2230 but this did not help here.

Here is my example: https://codesandbox.io/p/devbox/agitated-pare-w2w52p?file=%2Fapp%2Flayout.tsx%3A9%2C47&workspaceId=c289018d-a067-4abf-86ce-f20ef54dab9d

When you change the selection from 5 years to 10 years and hit refresh, 2 errors will pop up.

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "5 years" Client: "10 years"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

How do I get around this?
Thanks

[dbritto-dev]

@spyderdsn here you go https://stackblitz.com/edit/nextjs-and-zustand-persist?file=README.md

[dbritto-dev]

@spyderdsn would you mind following our nextjs guide?

[spyderdsn]

I did, also I looked into your example however I'm not sure what I'm looking at, the initState? All the examples are in TapeScript which I don't use would you mind pointing me to some examples of the initState without TypeScript?

Thanks

[dbritto-dev]

@spyderdsn removing types should be straightforward like just going to ts playground and copy/paste the js output

[spyderdsn]

Ok I did an update here:

https://codesandbox.io/p/devbox/agitated-pare-w2w52p?file=%2Fapp%2Flayout.tsx%3A9%2C47&workspaceId=c289018d-a067-4abf-86ce-f20ef54dab9d

I followed the tutorial and removed TypeScript, the app does not crash but at the same time, it reverts to the defaultInitState after the page refresh. Do I miss something?

[spyderdsn]

Hi @dbritto-dev I've spent two days working this out, used ChatGPT & Copilot, supply your documentation and even with their help I'm going around the circle. There is room for improvement on the documentation side. Could you please have a look what I have now? The state saves and stays on refresh hoverer I'm still getting an error regarding rehydration.

https://codesandbox.io/p/devbox/agitated-pare-w2w52p?file=%2Fapp%2Flayout.tsx%3A9%2C47&workspaceId=c289018d-a067-4abf-86ce-f20ef54dab9d

Page

"use client";
import React, { useState, useLayoutEffect } from "react";
import { useAssetStore } from "../store/store";
import { Select } from "antd/lib";

export default function Home() {
  const storeAsset = useAssetStore();
  const [form, setForm] = useState(storeAsset.getState());

  const collectForm = (field, value) => {
    setForm((prevState) => ({
      ...prevState,
      [field]: value,
    }));
    storeAsset.updateStore(value);
  };

  useLayoutEffect(() => {
    storeAsset.persist.rehydrate();
  }, [storeAsset]);

  return (
    <main>
      <Select
        style={{ width: 120 }}
        size="large"
        value={form.period}
        onChange={(value) => collectForm("period", value)}
        options={[
          { value: 1, label: "1 year" },
          { value: 3, label: "3 years" },
          { value: 5, label: "5 years" },
          { value: 10, label: "10 years" },
          { value: 20, label: "20 years" },
        ]}
      ></Select>
    </main>
  );
}

Store

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

const defaultInitState = {
  period: 5,
};

export const useAssetStore = (initState = defaultInitState) => {
  return create(
    persist(
      (set, get) => ({
        ...initState,
        updateStore: (period) => set({ period }),
      }),
      {
        name: "AssetStore",
        getStorage: () => createJSONStorage(() => localStorage),
        skipHydration: true,
      },
    ),
  );
};

[spyderdsn]

Hi @dbritto-dev, hopefully, I can hear from you today. I'm still waiting 😊

[dbritto-dev]

@spyderdsn would you mind following our nextjs guide? I don't understand why people still creating issues without reading the nextjs setup first

[dbritto-dev]

You didn't even follow the example I shared with you, many things are wrong:

• No context
• Using getState instead of the store state itself
• Using useState and store for doing same thing

Sorry, but I can't help you until you follow our nexjts guide

[spyderdsn]

@dbritto-dev I'm not sure if you are having a bad day but I'm trying to provide a context of my issue, CodeSanbox code and steps I'm following and you messaged me at least 6 times without actual help just blame me for everything.

I followed your: here you go https://stackblitz.com/edit/nextjs-and-zustand-persist?file=README.md example as close as I could to my understanding. As there was no context provided apart from here you go.

• No context - what other context do you need, this is a simple select that should save the state in the storage.
• Using getState instead of the store state itself - yes, I thought it made no difference
• Using useLayoutEffect instead of useEffect - here you go example use useLayoutEffect
• Using useState and store for doing same thing - as per above

@spyderdsn would you mind following our testing? I don't understand why people still creating issues without reading the nextjs setup first

What does this even mean? - would you mind following our testing?

if you are referring to zustand/tests the persist tests are written in TS even in the folder called Vanilla and they are 800 lines long and possibly not very clear for a developer who is not using TS.

Sorry, but I can't help you until you follow our nexjts guide

Your nextjs guide? Where is it? In the here you go example I can only find a generic Vercel guide?

I understand it is hard when people don't think like you but they are not you. Also, you won't create a great product blaming your community. I felt none of your messages were very constructive, you were trying to dismiss me rather than provide helpful support and enough info for me to solve my problem "here you go" might not be enough for many.

[dbritto-dev]

@spyderdsn I asked you many times to follow our nextjs guide.

• what you mean with "where is it"?: https://docs.pmnd.rs/zustand/guides/nextjs
• what context?: React Context, that one. There's no react context and you are using create instead of createStore
• Why do you need to use useState and store for the same thing?: makes no sense

There's two guides where we talked about: nextjs, and ssr + hydration