Buy Features Sign in

Web Fundamentals

With the rise of JavaScript heavy web sites and client side routing, the React ecosystem has left behind a lot of the fundamental pieces of the web. Remix brings them back. Things like server rendering, http caching, meta tags, proper status codes–and for Pete's sake document titles!

Modern Architecture

At the same time, web infrastructure has changed for the better. CDNs are more advanced, serverless functions give unprecendented scale, browsers have new APIs for preloading resources, bundlers and HTTP/2 change the way we approach code splitting. And of course, React's component model is incredible even for plain markup. Remix is built to take advantage of it all.

(Re)Discover the Web

Remix teaches you the foundational features of the web and then provides simple APIs for you to take advantage of them.

  • HTTP Caching

    We run a website called UNPKG. It serves over 50 billion requests per month without making a dent on our credit card bill. It's possible because of HTTP caching and CDNs. A trend is to turn to SSG to find performance like this, but then you complicate deployment and give up dynamic content, not to mention UNPKG is simply impossible to build with SSG. The result is the same though: a cached document on a CDN. You can skip the build bonanza with Remix and keep the performance with our performance-minded API.

  • Meta Tags

    Without server rendered meta tags, your website is simply incomplete. Meta tags are the reason fancy little website previews show up on social media and text messages. It's also how search engines know how to crawl your site and decide to put you on the first page.

  • Status Codes and Server Rendering

    Server rendering provides solid UX advantages and is still the gold standard for SEO, but you might not give much thought to status codes lately. Well, CDNs and search engines certainly do. For years React apps (even server rendered ones) have been sending 200's for everything. Not found? 200. No record? 200. Server error? 200. Redirect (!) 200. This hurts your SEO and your CDN capabilities. Remix sends the right status code, even on client side transitions.

Data Loading, But Easy

Remix makes loading data for a route as simple as it sounds: fetch some data, render it. Write a server side function to fetch data, Remix does the rest.

  • Centralized Data Loading

    Remix centralizes data loading on the server. The initial page is server rendered with data in the markup while automatically fetching in the client as the user navigates around. That's right, put useEffect back on the shelf.

  • Talk directly to your Database

    Since all data loading is on the server, you can talk directly to your database. No need to write the function once for the server, and again for the browser (and certainly no screwing around with making things "isomorphic", whatever that means!)

  • Built on Standards

    Remix also brings the Fetch API to your loaders. You can use fetch for network calls and even return real Responses with cache headers and everything.

///////////////////////////////////////////////////////////////////
// Server side loaders fetch data from anywhere
const db = require("../db");
module.exports = async ({ params }) => {
  let user = await db.query(`users/${params.userId}`);
  return fetch(`https://api.github.com/users/${user.githubLogin}`);
};

///////////////////////////////////////////////////////////////////
// Data gets passed to your route component
export default function UserGithubProfile({ data }) {
  return (
    <div>
      <h1>{data.name}</h1>
      <Avatar src={data.avatar_url} />
    </div>
  );
}

Nested Routes: The Remix Cheat Code

Remix takes advantage of React Router's nested routing paradigm (hat tip Ember) which gives us unique insight into route transitions and rendering.

Traditional approaches associate resources and UI one-to-one with URLs. This way they can fetch or preload resources for page navigation. Unfortunately, when pieces of UI persist you end up refetching stuff the user already has because you don't know enough about the UI to prevent it. Other approaches try to move resource dependencies all the way down to the component level. In this case you don't know what resources you need until you render! By then it's too late to do any preloading.

  • Layouts, where resources live

    Your layouts define the data, modules, and styles that a portion of the page needs to render. Remix routes nested in folders define nested UI and resources. This gives us great insight into what is going to render next when the URL changes.

  • Persisted UI State

    Remix knows your layouts, so when the page changes you won't lose state in layouts that persist through the URL change. Best example of this is the scroll position of a sidebar nav. Nested routes only update the changing portion of the page.

  • Smart Resource Fetching

    Because Remix knows which layouts are changing and which are not when the URL changes, it only fetches resources that the user doesn't already have. Less network activity, better UX, simple layout code, everybody's happy.

Invoices Projects Customers#10123#10122#10121#10119#10118#10117#10116Invoice #10121DetailsViewed 10/10Sent 10/09Created 09/28ActivityApp.js> routes/invoices.js> $id.js> activity.jshttp://example.com/invoices/10121/activity

It's your app, deploy it anywhere

Remix is made for the serverless era. All it needs is a single http handler and a place for static assets. We even ship with packages to help you deploy to some of the most popular Cloud Services, and will continue to add more.

Start shipping better websites today!

View Pricing

Still here? Alright, here's some more...

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.

Start shipping better websites today!

View Pricing