Tropical vs…
Astro
Astro and Tropical have some very similar design principles and are built with a lot of the same approaches and conventions:
- First-class prerendered HTML
- Minimal client JS via an islands architecture (though Astro is taking a little too much credit for pioneering the islands architecture — something Tropical and others have been doing since 2019)
- Components, pages, layouts, feeds… 🥱 told you Tropical's conventions were industry-standard!
I'm a fan of Astro, it's a fine choice for your next project! Here are the differences:
Astro is a framework, Tropical is a template repo
astro is a framework that abstracts away all the underlying functionality. All of that underlying functionality, including Vite's, is configured at a distance via Astro configuration.
Tropical is intentionally a template repo, not a library or framework. It's just a Vite project. You directly configure Vite and edit the "framework" part of Tropical (really just some opinionated boilerplate for a Vite project).
Astro is aiming big
Like Gatsby before them, Astro is a VC funded company with grand ambitions. They'll need to support a big, varied feature set to satisfy a big, varied audience.
Tropical isn't chasing a massive user base. I make it for me and hope a few of you find it useful!
Different component approaches
Astro has its own component format which you can use to compose components from lots of different component frameworks.
Tropical just uses React components.
Different techniques for island hydration and browser JS
Astro uses Client Directives to hydrate components. Arbitrary browser JS is included with a <script> in Astro components.
Tropical provides tropical-islands for basic React island hydration, and arbitrary browser JS is included and called however you like in your client bundle.
CSS
Astro supports many CSS approaches: plain old global CSS, scoped <style> tags in Astro Components, CSS Modules, Sass and Tailwind.
Tropical uses Fela by default. Notably, pages don't load CSS files — generated atomic styles are just inline in the page's <head>. (But because Tropical is just Vite, you can use any of Vite's supported CSS approaches.)
Astro was originally built on Snowpack
Tropical originally used Webpack then switched to Vite. Astro switched to Vite in 2022.
îles
I'm also a big fan of îles. We share an island-themed name 🏝 and have very similar goals:
The goal of this project is to combine the ease of use and development experience of building a site with Vue, while effortlessly shipping a zero JS site as if you were using Jekyll or eleventy.
If you replace Vue with React, Tropical has basically the same motivation.
îles uses Vue, Tropical uses React
...but we're both big fans of MDX!
Different techniques for island hydration and browser JS
Like Astro, îles uses hydration directives and arbitrary browser JS is included via <script> tags in components.
Tropical provides tropical-islands for basic React island hydration, and arbitrary browser JS is included and called however you like in your client bundle.
îles has some optimisations and features that Tropical intentionally avoids
Tropical will probably never come with SPA navigation, service workers or advanced routing features out of the box. But a Tropical site is just a Vite project, so you can add them if you wish!
vite-plugin-react-pages
vite-plugin-react-pages wraps up similar features (React, MDX, prerendering, dev server) in a Vite plugin that depends on some conventions around project folder structure and file naming.
It appears to be targeted mainly at the docs use-case. It comes with a couple of themes (docs and basic). In contrast to Tropical, it follows the Gatsby/Next model of full page hydration and client side page transitions.