Smart code splitting
No matter which page your user lands on, the total footprint of a Remix app is about 50kb over the network (including dependencies). It doesn't matter how large your application gets, each page only downloads what it needs, which is actually pretty uncommon in the React ecosystem.
React apps are typically built two ways: bundle everything into one enormous file (yikes!) or code split into multiple bundles to load on demand. The apps that code split usually send down a very large build manifest, listing every asset you could possibly need. That means as you add files and pages to your site, the footprint of every page grows.
Remix never loads more code than the page the user is looking at. You can have 10 or 10,000 routes, the footprint for each remains constant. Just because you added some routes to the photo viewer doesn't mean the contact page gets bigger over the network.
Beyond heavy JavaScript in the browser
Do you ever look at some of the pages on your website and think "why does this need to download any JavaScript at all?". We do too. Go ahead and open the dev tools on this page you're reading right now.
Yeah, you, open the dev tools.
That's right, no JavaScript! This is a marketing page with nothing interactive but links. There's no reason to load JavaScript here. You might think "but wouldn't you be able to speed up the transitions if you loaded in a client side router?" Great question. The answer is, not always.
Open the devtools again. You'll note in the network tab that we've already loaded in the "/buy" page with a link response header. When you click "buy" (please click buy), the browser already has the page and will navigate there immediately. It can't get faster than that.
With Remix, you have full control of how your app is delivered at every route. Load a bunch of JavaScript for a really interactive page, or skip it for a static page. Preload a page you think they'll navigate to, or only load that page when they navigate to it. It's all up to you.
Closing the gap between production and development builds
Remember that one time you were implementing dark mode and put a window.matchMedia
in state? Remember how everything was awesome until you deployed and then suddenly the production server was crashing? That's right, there is no window on the server and you weren't server rendering in dev!
Remember when you pushed some new CSS to production and your elements started bouncing around because your CSS lib was moving style tags around in production but not dev?
Remember when the requests for code split resources in development seemed fine but in production they were widly different and included way more in them than expected?
Production bugs live in the delta between development and production environments. Remix closes that gap.
Remix server renders the same in development as production, loads CSS the same (<link/>
, ofc) and code splits the same. How can we do this? We only build the page you're looking at in development, so we can build it like production in a few milliseconds.
A refreshing take on CSS
Remix lets you use the CSS skills you already have. While we love the innovation that has happened in the CSS-in-JS space, and you can use them in Remix, we provide a back-to-basics approach with a twist.
One of the trickiest parts of CSS and highly dynamic websites is knowing when to apply it and when to remove it. Because of nested routes, we know the layouts that are being rendered and which aren't. As the user navigates around Remix automatically loads and unloads the styles for the layouts on the page.
It might sound like no big deal at first, but once you try it you'll realize it's quite powerful.
Remix also adds a few improvements to CSS like auto prefixing and nesting, and support for tailwind out of the box, but other than that, we keep it simple.
So much more
Perhaps the most unique thing about Remix is that there's hardly any API at all. It gets out of your way wherever it can to allow you to use the web and React the way they were each designed. You have control over every entry point into your app, from the initial request handler to the deepest matching route's meta tags. No plugins, no complicated rendering abstractions, just React and HTTP as designed.
Who is Remix?
We're Michael Jackson (no, not that one) and Ryan Florence. We've been running the company React Training since 2015. We've taught hundreds of teams and thousands of people at top companies around the world how to get the most out of React while also working our open source projects: React Router, Unpkg, and Reach UI. Before that, we worked on some of the apps at the most visited sites on the internet like Twitter (twitter.com) and Canvas (instructure.com).
As trainers and open source authors, we've seen where teams struggle with React, and we've struggled with these things ourselves! We're now dedicated to helping you build better websites with Remix.