fix: use createSSRApp to enable more efficient hydration

[maoberlehner]

Description 📖

This pull request enables more efficient hydration by using createSSRApp. See: https://vuejs.org/guide/scaling-up/ssr.html#client-hydration

Background 📜

createSSRApp is optimized for hydration of SSR-rendered HTML. This is more efficient because if the HTML stays the same, only event listeners need to be applied but the DOM is left untouched.

The Fix 🔨

By using createSSRApp we get all the benefits of efficient hydration.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit da262f3. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=build --all --exclude docs --exclude vue-blog

---

Sent with 💌 from NxCloud.

[maoberlehner]

I updated the previously reverted pull request to only replace comments for non html files. As I understand it it should only be necessary in those cases.

[maoberlehner]

Not quite sure what the hydration setting has to do with slots. And as far as i could see Boolean(slots) was always true anyway. In my (few) tests, slots was either {} or {foo:'bar'} which both are truthy.

[ElMassimo]

Probably outdated code from one of the first versions.

I've removed the second parameter this in this branch since createSSRApp will override mount to always pass true.

[maoberlehner]

See: #159 (comment)

[ElMassimo]

Hi Markus!

Thanks for taking another look at this.

I'll take a look at this branch during the week, but I think it will suffer from mismatches in some situations, given on how the Vue renderer is used when prerendering.

I have a branch where I've addressed these differences in the hydration comments Vue injects, preventing mismatches, but I haven't merged it because the chosen approach loses HMR on mounted islands, so I need to revisit it.

Perhaps avoiding the more strict createSSRApp during development will give us the right balance, between efficient hydration in production, and no warnings and full HMR during development.

[maoberlehner]

As I understand it createApp vs. createSSRApp is not about strictness but about the former not caring at all about existing DOM, rendering everything from scratch and throwing away SSRd HTML. While the later ideally does not render anything but just binds event listeners to the existing DOM.

Not knowing a lot about the internals I don't quite understand why mismatches can't be avoided. Anyway, personally I don't care about dev mode. If it is simpler to do using createdApp during dev, I'm all for it.

But having optimized hydration in production mode seems crucial to me, considering the ultimate goal of this project being max performance by avoiding full hydration.