fix: use createSSRApp to enable more efficient hydration#177
fix: use createSSRApp to enable more efficient hydration#177maoberlehner wants to merge 1 commit intoElMassimo:mainfrom
Conversation
☁️ Nx Cloud ReportCI 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 targetSent with 💌 from NxCloud. |
|
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. |
|
|
||
| const app = createVueApp(appDefinition) | ||
| app.mount(el!, Boolean(slots)) | ||
| app.mount(el!, true) |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
| // Remove comments from Vue renderer to allow plain text, RSS, or JSON output. | ||
| content = content.replace(commentsRegex, '') | ||
| return content | ||
| } |
|
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 |
|
As I understand it 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 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. |
Description 📖
This pull request enables more efficient hydration by using
createSSRApp. See: https://vuejs.org/guide/scaling-up/ssr.html#client-hydrationBackground 📜
createSSRAppis 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
createSSRAppwe get all the benefits of efficient hydration.