Vue version

3

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eNp9UktuwyAQvQpiUyIldtpl6kTqASpFapdsqDNOHNmABuyosrh7B3BSJZW6AObzeMzMY+Jv1hbjAHzDK1djaz1z4AfLOqWPW8m9k3wnNWNtbw16NkUboVnG0+h3M2gPh9n7ABwB95QGX58oGFiDpmdP9MDTa8TEVRvtPDsor9g2UolGdQ4WKf/IIZT71jUTC7bd5bev9y0Rtw6I4i4Zi/MDaqbhwvYZIwSCM90I90AWO/1sezCDFw8kM1O6JTwOsPjNhCV7Wa9vgZArJyMfeVcX1d6KFFdIbLoYVTfEuiNtiofEJXVVZgVo3uR46G2nPKTpV6fn3TTloYVQleRG/A3DlzwLtOqVLc7OaBI0dSPnBOm4ufYnOQkSfclP3lu3KUvX1PEbnF1h8FiSVSApS8MpwPWrLzQXB0jEkietZ46SgqTWCkEfAAH/43yA/uFNk6Avw8MPr+DWkQ==

Steps to reproduce

1. In Setup(), define const data = ref(false);
2. In the onServerPrefetch life Lifecycle, set the data.value = true;
3. Get the data in the template is false;

What is expected?

data.value is true

What is actually happening?

data.value is false

System Info

No response

Any additional comments?

https://vuejs.org/api/composition-api-lifecycle.html#onserverprefetch No response

The playground doesn't seem to be working correctly; look at this, it has a warning about hydration:

The example on the docs is missing the serialization of the data. Without it, the client is not aware of the initial state when it renders and thus creates a Hydration mismatch. I would say this should be fixed in docs instead

The example on the docs is missing the serialization of the data. Without it, the client is not aware of the initial state when it renders and thus creates a Hydration mismatch. I would say this should be fixed in docs instead

https://github.com/vuejs/core/blob/f67bb500b6071bc0e55a89709a495a27da73badd/packages/runtime-core/src/apiLifecycle.ts#L23

It’s seems a bug, It’ve set the currentInstance before call the setup function.

But the target output undefined when call the onServerPrefetch hook, They don't seem to refer to the same currentInstance in the setup function scope.

https://github.com/vuejs/core/blob/f67bb500b6071bc0e55a89709a495a27da73badd/packages/runtime-core/src/component.ts#L660

https://github.com/vuejs/core/blob/f67bb500b6071bc0e55a89709a495a27da73badd/packages/runtime-core/src/component.ts#L564

PS: It's work fine in the unit test case, but work failed in SSR mode playground and Nuxt.

@webfansplz you are right, the problem happens with an empty call

@posva I believe there is a bug in the online sfc-playground because it works fine in my local sfc-playground.

@webfansplz you are right, the problem happens with an empty call

and there is a warning @zhangzhonghe mentioned

VM682 about:srcdoc:160 [Vue warn]: Hydration text content mismatch in <h1>:
- Client: true
- Server: false 
  at <Repl>

They don't seem to refer to the same currentInstance in the setup function scope.

@webfansplz that's the problem about the online sfc-playground. see https://github.com/vuejs/core/issues/7011#issuecomment-1301719397

@posva I believe there is a bug in the online sfc-playground because it works fine in my local sfc-playground.

@webfansplz you are right, the problem happens with an empty call

and there is a warning @zhangzhonghe mentioned

VM682 about:srcdoc:160 [Vue warn]: Hydration text content mismatch in <h1>:
- Client: true
- Server: false 
  at <Repl>

They don't seem to refer to the same currentInstance in the setup function scope.

@webfansplz that's the problem about the online sfc-playground. see #7011 (comment)

Yes, I also found the sfc-playground's issue, which caused the currentInstance reference problem in SSR mode.

But it doesn't seem to work very well in Nuxt3. Mini Repo

Hello, I was having this question as well. After reading the docs on state management of Nuxt3.

@webfansplz In your example Mini Repo, you can use useState instead of ref, as this is shared across the server and client. Solving the hydration mismatch error.

Solution fork

// const data = ref(false)
const data = useState('data')