onServerPrefetch produces an invalid warning on ssr

[Leskd]

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

[zhangzhonghe]

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

[posva]

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

[webfansplz]

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

core/packages/runtime-core/src/apiLifecycle.ts

Line 23 in f67bb50

if (target) {

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.

core/packages/runtime-core/src/component.ts

Line 660 in f67bb50

const setupResult = callWithErrorHandling(

core/packages/runtime-core/src/component.ts

Line 564 in f67bb50

export let currentInstance: ComponentInternalInstance | null = null

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

[posva]

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

[edison1105]

@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)

[webfansplz]

@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

[wister]

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')