Tropical vs…

Astro

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:

Astro is built on Snowpack, Tropical is built on Vite

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 are flexible when it comes to client-side JS. Tropical provides a way to hydrate React components, while Astro nudges you towards hydrating your React, Vue or Svelte 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 <script> tag.

CSS

Astro supports many CSS approaches: plain old global CSS, scoped <style> tags in Astro Components, CSS Modules, Sass and Tailwind.

Tropical comes with Fela, though because Tropical is just Vite, you can use any of Vite's supported CSS approaches.

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 <head>.

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 — entry-server.jsx, prerender.js and server.js — right out there in the open, that you can tinker with and extend, or totally ignore.

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.