UPDATE: Since writing this article, I have created a new npm package that allows you to use the technique described in the article in a clean way. You can read more about it in my article about how to drastically reduce estimated input latency.
Static site generators are on the rise. To be more specific: static site generators like Gatsby.js (React) and VuePress (Vue.js) which are based on modern frontend frameworks are becoming more and more popular.
A potential solution
The idea of the
<DynamicComponent> <ImageSlider :slides="imageSlides"/> </DynamicComponent>
As you can see above, the
abomination prototype provides you with a
Do you want to learn more about advanced Vue.js techniques?
Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture.
There are basically two major downsides to this concept. First of all, the developer experience is not as straightforward anymore because you have to think about which components should be dynamic and which not.
The second downside is that you loose the dynamic routing capabilities that you get with those frontend frameworks. However, I think you can get pretty much the same fast route change user experience with smart usage of preload and prefetch. But you have to work it out yourself instead of relying on what webpack spits out automatically.
Check it out
abomination is meant to be a proof of concept for a possible enhancement to current frontend framework based static site generators. It is not meant to be used in production quite yet. But if you want to play around with it, please feel free to checkout the GitHub repository and take a look at the demo hosted on Netlify.
Wrapping it up
A concept like
abomination could help to build React and Vue.js based static site generators which are able to generate the fastest websites possible while at the same time not giving up on the convenience of using modern frontend frameworks.