Modular HTML pages

Static site generation: minimizing how much is re-generated  #

When statically generating HTML content, you face an interesting challenge: If the page frame (the “chrome” of a page) contains information that changes frequently, you need to re-generate all pages every time it does. One example of such information is a top 10 list of the pages that were most popular during the last 30 days.

A work-around is to save the information in a separate file and to load that information dynamically via JavaScript. You then have a choice: You can save a JSON file and transform that into HTML or you can save an HTML file and insert it without processing it. Apart from having to re-generate fewer files, you also save traffic, because the shared information only needs to be downloaded once and will be cached, afterwards.

Similar: HTTP/2 and JavaScript modules  #

This situation is similar to JavaScript modules. Currently, many modules are bundled (combined) into a single file, to avoid the cost of one connection per file, imposed by HTTP/1. That means you have to re-generate all of the code, even if only a small module changes. However, things change with HTTP/2: You don’t need a new connection for each module, you can send multiple files over the same connection (if the server is aware of what needs to be done). Therefore, having many small modules doesn’t cost you, connection-wise, anymore. This enables small incremental updates for web apps.

Modular HTML pages?  #

Coming back to HTML pages: What if there was a way to declaratively compose HTML pages? You’d get both small incremental updates and traffic savings, but without having to use JavaScript.

As far as I can tell, HTML Imports do not help with this use case.