You’ve in all probability heard plenty of hype round one of many latest children on the framework block, Remix. It might be stunning that it received its begin again in 2019, but it surely was initially solely accessible as a subscription-based premium framework. In 2021, the founders raised seed funding and open sourced the framework to let customers begin utilizing Remix free of charge. The floodgates opened and everybody appears to be speaking about it, good or unhealthy. Let’s dive in and take a look at a few of the fundamentals of Remix.
Remix is a server “edge” first JavaScript framework. It makes use of React, a minimum of for now, for the entrance finish and prioritizes server-side rendering the appliance on the sting. Platforms can take the server-side code and run it as serverless or edge features making it cheaper than a conventional server and placing it nearer to your customers. The Remix founders prefer to name it a “heart stack” framework as a result of it adapts the requests and responses made between the server and the consumer for the platform it’s being run on.
Deploying Remix
As a result of Remix requires a server, let’s discuss how one can deploy it. Remix doesn’t present the server itself — you carry the server — permitting it to be run in any Node.js or Deno atmosphere, together with Netlify Edge and DigitalOcean’s App Platform. Remix itself is a compiler, a program that interprets the requests for the platform it’s working on. This course of makes use of esbuild to create handlers for the requests to the server. The HTTP handlers it makes use of are constructed on the Internet Fetch API and are ran on the server by adapting them for the platform they are going to be deployed to.
Remix stacks
Remix stacks are tasks which have some frequent instruments that come preconfigured for you. There are three official stacks which are maintained by the Remix group and they’re all named after musical genres. There’s additionally plenty of neighborhood Remix stacks together with the Okay-Pop Stack created by the Templates Crew at Netlify. This stack is a powerhouse and features a Supabase database and authentication, Tailwind for styling, Cypress end-to-end testing, Prettier code formatting, ESLint linting, and TypeScript static typing. Take a look at Tara Manicsic’s submit on deploying the Okay-Pop Stack.
Caching routes
Although Remix requires a server, it might nonetheless reap the benefits of the Jamstack advantages by caching routes. A static web site or static web site technology (SSG) is when your entire content material is rendered at construct time and stays static till one other rebuild. The content material is pre-generated and will be placed on a CDN. This supplies many advantages and speedy web site masses for the tip consumer. Nonetheless, Remix doesn’t do typical SSG like different standard React frameworks, together with Subsequent.js and Gatsby. To get the a few of the advantages of SSG, you need to use the native Cache-Management HTTP header in a Remix headers operate to cache a selected route or instantly within the root.tsx file.
[[headers]]
for = "/construct/*"
[headers.values]
"Cache-Management" = "public, max-age=31536000, s-maxage=31536000"Then add in your headers operate the place you need it. This caches for one hour:
export operate headers() {
return {
"Cache-Management": "public, s-maxage=360",
};
};Remixing routing
A number of frameworks have leaned into routing based mostly on file techniques. It is a approach the place a chosen folder is used to outline routes to your utility. They sometimes have particular syntax for declaring dynamic routes and endpoints. The most important distinction at present between Remix and different standard frameworks is the power to make use of nested routing.
Each Remix app begins with the root.tsx file. That is the place the complete base of the app is rendered. You’ll discover a few of the frequent HTML structure right here just like the <html> tag, the <head> tag, after which the <physique> tag with the parts wanted to render the app. The one factor to level out right here is the <Scripts> part is what permits JavaScript on the positioning; some issues will work with out it, however not all the pieces. The root.tsx file acts as a father or mother structure for all the pieces inside the routes listing, all the pieces in routes is rendered the place the <Outlet/> part is in root.tsx. That is the bottom of nested routing in Remix.
Nested routing
Not solely was Remix based by a few of the group from React Router, it additionally makes use of React Router. Actually, they’re bringing a few of the good issues about Remix again to React Router. A posh downside that the maintainers of Subsequent.js and SvelteKit are attempting to resolve proper now’s nested routing.
Nested routing is not like conventional routing. The place a brand new route would take a consumer to a brand new web page, every nested route is a separate part of the identical web page. It permits for separation of issues by holding enterprise logic related to solely the recordsdata that want it. Remix is ready to deal with errors localized to solely the part of the web page the nested route is at. The opposite routes on the web page are nonetheless usable and the route that broke can present related context to the error with out the complete web page crashing.
Remix does this when a root file in app/routes is known as the identical as a listing of recordsdata that can load inside the bottom file. The basis file turns into a structure for the recordsdata within the listing through the use of an <Outlet /> part to inform Remix the place to load the opposite routes.
Outlet part
The <Outlet /> Part is a sign to Remix for the place it ought to render content material for nested routes. It’s put within the file on the root of the app/routes listing with the identical identify because the nested routes. The next code goes in a app/routes/about.tsx file and consists of the outlet for the recordsdata inside app/routes/about folder:
import { Outlet } from "@remix-run/react";
export default operate About() {
return (
<>
<part>
I'm the father or mother structure. I will probably be on any web page inside my named listing.
</part>
{ /* All of my kids, the recordsdata within the named listing, will go right here. */ }
<Outlet />
</>
)
}Folder construction
Any file within the app/routes/ listing turns into a route on the URL of its identify. A listing will also be added with an index.tsx file.
app/
├── routes/
│ │
│ └── weblog
| | ├── index.tsx ## The /weblog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or dwelling route
└── root.tsxIf a route has the identical identify as a listing, the named file turns into a structure file for the recordsdata contained in the listing and the structure file wants an Outlet part to position the nested route in.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this can be a structure for /about/index.tsx
│ ├── index.tsx
└── root.tsxLayouts will also be created by prefixing them with a double underscore (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## that is additionally a structure
└── root.tsxhttps://your-url.com/about will nonetheless render the app/routes/about.tsx file, however can even render no matter is in app/routes/about/index.tsx the place the Outlet part is within the markup of app/routes/about.tsx.
Dynamic Routes
A dynamic route is a route that modifications based mostly on info within the url. That could be a reputation of a weblog submit or a buyer id, however it doesn’t matter what it’s the $ syntax added to the entrance of the route alerts to Remix that it’s dynamic. The identify doesn’t matter apart from the $ prefix.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this can be a structure for /about/index.tsx
│ ├── index.tsx
└── root.tsxFetch that information!
Since Remix renders all of its information on the server, you don’t see plenty of the issues which have change into the usual of a React app, like useState() and useEffect() hooks, in Remix. There’s much less want for client-side state because it has already been evaluated on the server.
It additionally doesn’t matter what sort of server you utilize for fetching information. Since Remix sits between the request and response and interprets it appropriately, you need to use the usual Internet Fetch API. Remix does this in a loader operate that solely runs on the server and makes use of the useLoaderData() hook to render the info within the part. Right here’s an instance utilizing the Cat as a Service API to render a random cat picture.
import { Outlet, useLoaderData } from '@remix-run/react'
export async operate loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const information = await response.json()
return {
information
}
}
export default operate AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}Route parameters
In dynamic routes, routes prefixed with $ want to have the ability to entry the URL parameter to deal with that information that must be rendered. The loader operate has entry to those by way of a params argument.
import { useLoaderData } from '@remix-run/react'
import sort { LoaderArgs } from '@remix-run/node'
export async operate loader({ params }: LoaderArgs) {
return {
params
}
}
export default operate AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}Different Remix features
Remix has a number of different helper features that add additional performance to regular HTML components and attributes within the route module API. Every route can outline its personal of some of these features.
Motion operate
An motion operate means that you can add additional performance to a kind motion utilizing the usual net FormData API.
export async operate motion({ request }) {
const physique = await request.formData();
const todo = await fakeCreateTodo({
title: physique.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Any HTTP normal headers can go in a headers operate. As a result of every route can have a header, to keep away from conflicts with nested routes, the deepest route — or the URL with probably the most ahead slashes (/) — wins. You too can get the headers handed by way of, actionHeaders, loaderHeaders, or parentHeaders
export operate headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Management": loaderHeaders.get("Cache-Management"),
};
}Meta operate
This operate will set the meta tags for the HTML doc. One is ready within the root.tsx file by default, however they are often up to date for every route.
export operate meta() {
return {
title: "Your web page title",
description: "A brand new description for every route.",
};
};Hyperlinks operate
HTML hyperlink components dwell within the <head> tag of an HTML doc they usually import CSS, amongst different issues. The hyperlinks operate, to not be confused with the <Hyperlink /> part, means that you can solely import issues within the routes that want them. So, for instance, CSS recordsdata will be scoped and solely imported on the routes that want these particular recordsdata. The hyperlink components are returned from a hyperlinks() operate as an array of objects and may both be a HtmlLinkDescriptor from the hyperlink API or a PageLinkDescriptor that may prefetch the info for a web page.
export operate hyperlinks() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}Linking between routes
Remix supplies a part to go between the totally different routes in your app known as <Hyperlink/>. To get client-side routing, use the <Hyperlink to="">Title</Hyperlink> part as a substitute of <a href="">Title</a>. The <Hyperlink /> part additionally takes a prop of prefetch with accepts none by default, intent to prefetch the info if Remix detects the consumer hovers or focuses the hyperlink, or render which is able to fetch the route’s information as quickly because the hyperlink is rendered.
import { Hyperlink } from "@remix-run/react";
export default operate Nav() {
return (
<nav>
<Hyperlink to="https://css-tricks.com/">Residence</Hyperlink>{" "}
<Hyperlink to="/about">About</Hyperlink>{" "}
<Hyperlink to="/about/neighborhood" prefetch="intent">Neighborhood</Hyperlink>
</nav>
);
}Subsequent steps
Now you realize the fundamentals of Remix and also you’re able to get began truly constructing purposes, proper? Remix supplies a Jokes app and a Weblog tutorial to get you began implementing this primary data. You too can begin from scratch and create a model new Remix app. Or in case you are able to dive in, give the Okay-Pop Stack a strive. I’ve actually loved my time with Remix and love the deal with net requirements and bringing it again to the fundamentals. Now it’s your flip to begin creating!
