search

ElMassimo / iles

🏝 The joyful site generator
https://iles.pages.dev
MIT License
1.07k stars 31 forks source link

fix: use createSSRApp to enable more efficient hydration #156

Closed maoberlehner closed 2 years ago

maoberlehner commented 2 years ago

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[bot] commented 2 years ago

Nx Cloud Report

CI is running for commit d327020615fdf27f7237c54def99f0d638ad5b89.

📂 Click to track the progress, see the status, the terminal output, and the build insights.

Sent with 💌 from NxCloud.

maoberlehner commented 2 years ago

I have no idea why but I was not able to get https://github.com/ElMassimo/iles/compare/fix/create-ssr-app to run on my machine. Got a ton of TypeScript errors. And even ignoring all the TypeScript errors, the build failed.

With this branch I'm able to:

  1. Run pnpm run build:all without errors.
  2. Run pnpm docs:now without errors.
  3. Open the site in the browser and toggle the dark mode without any problems. The moon and sun icons are correctly animated and shown.
ElMassimo commented 2 years ago

Looks great!

Seems that I forgot about upgrading the main client app to SSR app as well, which explains the errors I was seeing during dev.

Thanks @maoberlehner! 😃