-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue client app should be created with createSSRApp
for efficient client hydration
#149
Comments
Fixing this issue has two benefits:
<script setup lang="ts">
import { defineComponent, onServerPrefetch, ref } from 'vue';
const data = ref(null);
// Load data for client-side hydration
if (typeof window !== `undefined`) {
// Top level await makes this an async component
await new Promise((resolve) => {
setTimeout(() => {
data.value = { hello: 'World' };
resolve(null);
}, 1000);
})
}
// Load data on the server
onServerPrefetch(async () => {
await new Promise((resolve) => {
setTimeout(() => {
data.value = { hello: 'World' };
resolve(null);
}, 500);
})
});
</script>
<template>
<div>{{ data.hello }}</div>
</template> This can be nice if you load a lot of data from an API and you don't want to inline it for rehydration. Instead, as soon as the component is hydrated, the data will be fetched again. Currently, you get a flash of empty content for 1000ms. When using |
Thanks for reporting Markus! 馃槂 It makes sense to use Need to check whether it would still be desirable to use PRs are welcome! 馃槂 I'll take a look during the week. |
I've explored switching to There are some problems when Vue components should be re-rendered which suggest that the optimizations performed by the Vue compiler don't hold with the way that the rendered HTML is inserted. For example, running the docs site with |
iles
andvite
.Description 馃摉
In multiple locations
createApp
is used instead ofcreateSSRApp
(e.g.,iles/packages/hydration/vue.ts
Line 6 in af74635
When re-hydrating server-side rendered HTML,
createSSRApp
should also be used on the client to enable efficient re-hydration. See: https://vuejs.org/guide/scaling-up/ssr.html#client-hydrationReproduction 馃悶
This can be reproduced with every Vue powered iles app.
Logs 馃摐
Not applicable.
Screenshots 馃摲
Not applicable.
The text was updated successfully, but these errors were encountered: