Astro and Tropical have very similar aims and are built with the same approaches and conventions:
- First-class prerendered HTML
- Minimal client JS with partial hydration/islands
- Components, pages, layouts, feeds… 🥱 told you Tropical's conventions were industry-standard!
Astro is great! Here are the main differences to be aware of:
Snowpack and Vite are both great, and worthy successors to Webpack. They're neck-and-neck in terms of features, support and popularity.
Astro supports more component types on the server
Astro supports React, Vue and Svelte components out of the box, plus its own Astro Component format. Tropical assumes you'll use React for your prerendered/SSR components.
Both options also let you ✨sprinkle✨ on some progressive enhancement with Vue, vanilla JS, Stimulus, Angular, jQuery — whatever. In Tropical,
entry-client.jsx is your oyster for enhancing React-generated HTML, while those special Astro Components can have a
Astro supports many CSS approaches: plain old global CSS, scoped
<style> tags in Astro Components, CSS Modules, Sass and Tailwind.
There's one notable difference: Tropical pages don't load CSS files. One of the benefits of Fela is that the generated atomic styles are tiny enough to just inline into a
<style> in the page's
Astro is a library, Tropical is a template repo
An Astro project depends on
astro, a framework that abstracts away all the underlying functionality.
Tropical is intentionally a template repo, not a library. There's nothing to configure. The "framework" part of Tropical is just a couple of files —
server.js — right out there in the open, that you can tinker with and extend, or totally ignore.
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.