Partial hydration with 11ty and Preact | Markus Oberlehner

A great rundown of how to build a site using Preact and Eleventy that gives you the best of SPA-lite hydration and the speed/resilience of SSGs, all with the power of progressive enhancement.

Markus uses some very clever techniques, including "lazy" hydration (only run hydration when components are within/just outside the viewport) and a
component explicitly designed to bring hydration to 11ty/Preact in the first place.

Also, this perfectly sums up why I prefer working with tools like NextJS or Gatsby (or 11ty):

Component-based workflows make frontend development fun again, and it is a lot easier to do with modern frontend frameworks than with using templating languages like Nunjucks or Handlebars.

Explore Other Notes

⬅ Newer

A11y style guide

A great resource for finding accessible patterns for common UI requirements, as well as including stacks of accessibility best practices …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>A great rundown of how to build a site using Preact and Eleventy that gives you the best of SPA-lite hydration and the speed/resilience of SSGs, all with the power of progressive …</p> </body> </html>
  • Murray Adcock.
Journal permalink