Hydration mismatch between server/client

[johanalkstal]

Package version

1.2.2

Describe the bug

Changing the content of a Vue page causes the old content to be displayed if you reload the page.

[Vue warn]: Hydration node mismatch:
- rendered on server: <p>old content</p> 
- expected on client:  <p>new content</p>

HMR works and shows any new changes you make but reloading the page will cause the above error.

How to reproduce:

npm init adonisjs@latest repo-name

     _       _             _         _ ____
    / \   __| | ___  _ __ (_)___    | / ___|
   / _ \ / _` |/ _ \| '_ \| / __|_  | \___ \
  / ___ \ (_| | (_) | | | | \__ \ |_| |___) |
 /_/   \_\__,_|\___/|_| |_|_|___/\___/|____/


❯ Which starter kit would you like to use · Inertia Starter Kit
❯ Which authentication guard you want to use · skip
❯ Which database driver you want to use · skip
❯ Which frontend adapter you want to use with Inertia · vue
❯ Do you want to setup server-side rendering with Inertia (y/N) · true

...

npm run dev

Change the content of the Home page.
Reload the browser page.

Reproduction repo

No response

[johanalkstal]

On Discord it was mentioned that it might be a regression from the following change, 383c4c2#diff-5bfe4f1da13c83b1a8bb286e11eb2031499c8e193dc83da322474a1a1530e03fR24

[johanalkstal]

I'm also wondering if the following error that also happens in my actual project when a change is made is related to the commit above? 🤔

[vite] css hmr is not supported in runtime mode.

Might be unrelated but I thought I'd mention it since the commit is involved with the vite runtime.

[RomainLanz]

Hey @johanalkstal! 👋🏻

The current hydration issue is only for Inertia 2.0 beta release. Could you let me know if you're using this version?

If not, it means your code probably has a difference between the SSR version and its client version. It often happens when you have random data.

Concerning your latest question about the logs Vite is showing, you can disregard it.

[Julien-R44]

Issue also exists on Inertia 1.2.2

[Julien-R44]

Fixed in 2.0.1 and also backported to 1.2.3

[johanalkstal]

Nice @Julien-R44 that's great! 👏

Can I install this version somehow?

[RomainLanz]

You can run npm install @adonisjs/inertia@beta --save

[johanalkstal]

That only installed 2.0.0 unfortunately.