Use eleventy to generate a single page application (solved).

[voorjaar]

This issue was created to help people who may have similar questions and provide a solution.

Why

SPA has a better user experience, such as no need to refresh the page, no loss of scroll position. And you can add page switching animation and progress bar, etc.

Solution

I have created a plugin called eleventy-plugin-mtos for Eleventy to implement this functionality. It's based on mtos.

Preview

Checkout this page for a preview demo. You can compare it to the site without mtos configured.

How it works?

The mtos works similar to SPA, but is based on native DOM. The workflow like this:

1. Query all <a> elements which property href includes current host.
2. Add a onclick function, when clicked, fetch the HTML content from target link.
3. Push link to history state.
4. Diff current document with fetched content, update changed elements.
5. Goto 1.

So basically you still serve the static HTML files, but the user experience is the same as SPA with incremental requests via fetch API. It's still an MPA, but it works like an SPA in client side.