Capri vs. X

There a lot of different options when it comes to generating static websites. Unfortunately none of them makes it particularly easy to implement Capri's unique set of features. Read how Capri compares to some of its most popular alternatives:

Astro

Astro is a great option for generating static sites with partial hydration. It even lets you mix components from various frameworks and supports some advanced hydration strategies like using intersection observers or media queries.

Unfortunately, components can only be marked as islands from within .astro templates. Therefore, all static parts of your site that are ancestors of an island have to be written as Astro components, too.

Capri does not only allow you to define islands right inside your regular framework components, it also supports lagoons, which in turn let you define static components inside your islands.

While Astro component in general are great (think of them as JSX files with JavaScript frontmatter) they feel somehow alien in a React environment. And since Astro comes with quite a lot of built-in features, this also means that there are quite a few things you have to learn. Capri's main idea on the other hand is to introduce as few new concepts as possible. This is also why Capri does not ship with a built-in router or enforces a particular data-fetching pattern.

Next.js

While Next.js supports a lot of different rendering strategies, it is still lacking support for partial hydration. There are ways to achieve this but the developer experience could be a lot better as there is no out-of-the-box support.

Another thing that cannot be done without hacks is generating a full single page app next to the statically rendered pages.

11ty

Eleventy is known for its simplicity as well as its versatility. It is therefore not surprising that with a little work one can achieve very similar results. And if you don't mind an SSR-based approach, you can even get live previews. So while this certainly is a viable solution, the developer experience could be much better for this particular use case.

îles

As its french name might suggest, îles is also based on Vite. It is quite similar to Astro, but pages are written in Vue or MDX instead. You can write islands using Preact (or various other frameworks) but as with Astro, the static parts above have to be written in Vue or MDX.

Others

You can learn more about these and other available options in this excellent article.