I have a page roughly layouted like this: (simplified to showcase the problem)
// PageContent.vue
<script setup>
const props = defineProps({ data: Object });
const chapters = ref(null);
function onChapters(newChapters) {
console.log("PageContent.onChapters", newChapters.length);
chapters.value = newChapters;
}
console.log("PageContent.setup");
</script>
<template>
<ChapterOverview :chapters />
...
<MainContent :data :onChapters="onChapters" />
</template>
// ChapterOverview.vue
<script setup>
const props = defineProps({ chapters: Array });
const chapterHierarchy = computed(() => {
console.log("ChapterOverview.chapterHierarchy");
let result = props.chapters?.reduce(...); // some function to create a hierarchy
});
</script>
// MainContent.vue
<script setup>
const props = defineProps({ data: Object, onChapters: Function });
const chapters = computed(() => {
let result = ...
// complex code...
if (props.onChapters) props.onChapters(result);
return result;
};
</script>
I use vite as a build tool. Then if I run node bootstrap/ssr/ssr.js and visit the page, I get the following console logs:
PageContent.setup
ChapterOverview.chapterHierarchy
PageContent.onChapters 4
PageContent.onChapters 4
I would expect there to be another "ChapterOverview.chapterHierarchy" after "PageContent.onChapters", because the props the chapterHierarchy.computed depends on changes, but there is no such log. So do computeds only get executed once during SSR? (It works as expected in browser)
I know this is kinda caused by the weird data flow of my app, but the reason why the flow is like this:
- the chapters-computed depends on a lot of other computed variables from MainContent.vue
- MainContent.vue is used on a lot of other pages and only this page requires to provide the chapters from inside MainContent.vue to another component. And moving the code outside of MainContent.vue would require it to copy it to all other pages using MainContent.vue
Note: I tried both a function prop and emit for the onChapters callback.
My main question:
- Why doesn't the computed in ChapterOverview.vue trigger again? Is there a way to force it to run again during SSR?
EDIT: Ok, I found https://vuejs.org/guide/scaling-up/ssr.html#reactivity-on-the-server showing that reactivity is disabled on the server. Is there a way to enable it for this one computed?
