Hydration mismatch occurs when rememberedState is present in history during reload

[sudo-barun]

Inertia adapter(s) affected

• React
• Vue 3
• Svelte
• Not Applicable

JS package version

2.0.17

Backend stack (optional)

No response

Describe the problem

When rememberKey is used in form and SSR is enabled, hydration mismatch occurs after making some changes in the form and reloading the page.

After reloading the page, window.history.state.page.rememberedState is supposed to get reset to empty object before DOM node and vNode are compared in hydration. But for some reason, the reset happens later. If we check the value of window.history.state.page.rememberedState in console after hydration fails, it is an empty object.

This problem only occurs in version Inertia v2 and not in v1 as mentioned in the "Steps to reproduce" section.

Steps to reproduce

1. Clone this repo: https://github.com/sudo-barun/pingcrm

2. Go to branch hydration-mismatch-when-rememberedState-is-present-in-history

3. Setup the app as instructed in README.md. Make sure SSR is working.

4. Open the app in browser and submit login form

5. Go to user-edit page (like /users/3/edit)

6. Remove the text inside First name form field

7. Reload the webpage and check the console. You should see following message:

   Hydration completed but contains mismatches.
   

To check previous working version, go back few commits in the same git branch before the commit where npm package @inertiajs/vue3 and composer package inertiajs/inertia-laravel are updated to version 2.