I’ve been building things on the web for a long timeJAKE.MUSEUMA collection of visual and hypertext media.jake.museum. My very first websites — now lost on a discarded hard drive — probably predate WordPress, which was released in 2003. Along the way, I’ve tried dozens of languages, frameworks and content management systems.

Broadly speaking, there are roughly three “eras” of build tooling I can remember.

The first was the CMS era — WordPress, Movable Type, Expression Engine. We’d run on LAMP stacks, rendering pages live from a database.

The second was the static site generator era — Jekyll, Metalsmith, Middleman. We realized our websites actually didn’t have anything that varied per request, and it was more efficient to just render all the pages ahead of time.

The final is the single-page app era — React, Gatsby, Next.js. As JavaScript frameworks matured and we started building richer web apps, developers began to use those same technologies for static websites too.

That last move has earned a lotSPAs were a mistakeFor years, a trend in our industry has been to build single-page apps, or SPAs. With an SPA, the entire site or app lives in a single HTML file. After the initial load, everything about the app is handled with JavaScript. This is, in theory, supposed to result in web apps that feel as fast and snappy as native apps. Today, I want to explore why that’s nonsense. Let’s dig in!gomakethings.com/spas-were-a-mistake/ of criticismSecond-guessing the modern webWhat if everyone's wrong?macwright.com/2020/05/10/spa-fatigue.html. And it’s somewhat deserved: what is the benefit of reimplementing big chunks of what browsers give you for free for your tech blog?

But that’s only half the story. The proliferation of single-page apps has resulted in a way better developer experience. React’s component model is a significant improvement over the nested templates we were using before. CSS modules make it much easier to encapsulate elements. Having the entire npm ecosystem at your fingertips is incredibly convenient. And using linters to check your markup for a11y issues is just good for the web!

What if you could have the (lack of) runtime footprint from the static site generator era without giving up the tooling improvements from the single-page app era?

All of which is a long way of saying: I built a static site generator! It’s called RadishRadish | a delightful static site generatorradishjs.com/.

Let’s face it: web developers making static site generators is a bit of a memeBlogging vs. blog setups - Rakhim.orgrakhim.org/honestly-undefined/19/. It’s a fun personal project until they get the crazy idea that it might become the next Jekyll. Why would this be any different?

Maybe it won’t be! But there are a couple reasons I’ve been really enjoying building sites with Radish:

Radish is Based on React

“Traditional” static site generators like HugoThe world’s fastest framework for building websitesThe world’s fastest framework for building websitesgohugo.io/ — which I’ve used a lot and do really like — work with templates. You write HTML with placeholders for your data, and there might be some clunky ways to add logic like loops or conditions. Composition happens via “partials” and “shortcodes”, which are just nested templates. There’s no real encapsulation, especially when it comes to CSS.

With Radish, all your pages are just React components. You can keep logic in your JSX or extract it to helper functions to organize it. Composition is seamless: just import any other other components. You can write in MDXMarkdown for the component era | MDXMDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.mdxjs.com, which means you can even use components within your content. CSS modulesGitHub - css-modules/css-modules: Documentation about css-modulesDocumentation about css-modules. Contribute to css-modules/css-modules development by creating an account on GitHub.github.com/css-modules/css-modules come baked in; there’s no worrying whether two components accidentally share a class name.

At this point, you might be wondering why not just use something like GatsbyThe Fastest Frontend for the Headless Web | GatsbyGatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.www.gatsbyjs.com/. I’ve used it beforeParsec v2 | JAKE.MUSEUMA collection of visual and hypertext media.jake.museum/parsec-v2/, and although it’s a bit too heavy for my taste, I could probably have gotten over that. But there’s actually one big difference…

Radish Has No Runtime

When you load a Gatsby site, you’re actually downloading a full React app to run in your browser. That’s fine if you’re building a big app with a lot of complicated UI interactions, but it’s overkill if you’re just making a small website.

That’s why Radish ships no client-side JavaScript by default. It doesn’t render markup to later bolt a React app on top. It just outputs plain HTML and CSS. This is important: it means fewer bytes sent over the wire, which means faster loading pages that consume less memory. It means you spend less time and energy reinventing things that browsers provide for free, like routing.

Let me pause here and say that I like ReactNo One Ever Got Fired for Choosing React | jakelazaroff.comIf you spend a lot of time on Hacker News, it’s easy to get taken by the allure of building a project without a framework.jakelazaroff.com/words/no-one-ever-got-fired-for-choosing-react/. My day job involves working on a React app, and so does my main side projectMake your audio stand out on social mediaSongRender lets you create music visualizers, podcast clips and more to help grow your audience online.songrender.com/. This article is about a React-based static site generator I built!

But React is not the solution to every problem the web throws at you. There are a ton of websites that would work great as plain HTML and CSS. For sites like that, React is actually harmful: you’re sending at least 40kbreact-dom v17.0.2 ❘ BundlephobiaFind the size of javascript package react-dom v17.0.2. Bundlephobia helps you find the performance impact of npm packages.bundlephobia.com/package/react-dom@17.0.2 of JavaScript over the wire (not including any other libraries you’re using on top of that) and your page probably won’t be interactive until it all loads. And those libraries might not implement functionality that browsers support by default, like resetting focus when a route changesSPA Accessibility - focus not reset when route changed · Issue #5210 · remix-run/react-routerI am using a screen reader to interact with my application. Moving between routes does not reset the focus, which would occur on a server-side render. Is there a fix to reset the focus on route cha...github.com/remix-run/react-router/issues/5210.

All that said, Radish doesn’t prevent you from using JavaScript entirely. If you import a script in one of your components, Radish will bundle all its dependencies and give you a URL that you can use with a <script> tag. It’s perfect for adding libraries or lightweight interaction. For example, this blog loads instant.pageMake your site’s pages instant in 1 minuteAnd improve your conversion rate by 1%instant.page (which prefetches links so that page transitions are faster) and also has some JavaScript for the custom audio players.

More generally, I want Radish to help developers fall into the pit of successFalling Into The Pit of SuccessEric Lippert notes the perils of programming in C++: I often think of C++ as my own personal Pit of Despair Programming Language. Unmanaged C++ makes it so easy to fall into traps. Think buffer overruns, memory leaks, double frees, mismatch between allocator and deallocator, using freed memory, umpteen dozenblog.codinghorror.com/falling-into-the-pit-of-success/amp/ when building websites. I want a11y lining so I know I’m following best practices with regard to accessibility. I want a service worker so my site can work offline. I want the page to preload critical assets like fonts. And most critically, I don’t want to jump through hoops or go out of my way to enable these things.

As someone with a deep love for the web, I really like the Remix philosophy of learning a framework and learning the web platform at the same timeNot Another Framework!The web ecosystem can feel like it moves too fast sometimes. We're sensitive to that at Remix so we've designed it with your future in mind. Get good at Remix, get better at the web.remix.run/blog/not-another-framework. Radish isn’t a framework, but it tries to follow the ethos. There’s no magic — just HTML, CSS and a dash of web features that help your website be the best it can be.

If all that sounds interesting, please check out RadishRadish | a delightful static site generatorradishjs.com/! I really like it, and I hope you do too.