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 70 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.
Can I Get a Write With That Read?
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.
Now imagine if React only had props and not state. What's the point? All too often frameworks only provide read APIs when some projects have just as many writes! Remix provides conventions and API for both.
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
useEffectback 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.
Works Without Client Side JavaScript
Because Remix's data mutation API is based on HTML and HTTP, idiomatic Remix sites don't require JavaScript in the browser for the core features of your app to work. You might want it though, Remix optimizes the data loading in the browser by only fetching data for changed portions of the page.
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.
import { Form } from "@remix-run/react";
import { redirect } from "@remix-run/node";
import db from "../fake-db";
// Loads data for a route with GET requests
export function loader() {
return db.team.findAll();
}
// Handles data writes for POST requests
export async function action({ request }) {
let body = new URLSearchParams(await request.text());
await db.team.create({ name: body.get("teamName") });
return redirect(`/teams`);
}
export default function Teams() {
// hooks to access route data
let teams = useRouteData();
// hooks for pending/optimistic UI
let pendingSubmit = usePendingFormSubmit();
return (
<>
<TeamsView data={teams} />
{pendingSubmit ? (
<Pending>
<p>Creating new team:</p>
<p>{pendingSubmit.data.get("teamName")}</p>
</Pending>
) : (
<Form method="post">
<label>
New Team: <input name="teamName" />
</label>
</Form>
)}
</>
);
}
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.
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.