You’ve in all probability heard a whole lot of hype round one of many latest children on the framework block, Remix. It could be shocking that it received its begin again in 2019, nevertheless it was initially solely out there as a subscription-based premium framework. In 2021, the founders raised seed funding and open sourced the framework to let customers begin utilizing Remix at no cost. The floodgates opened and everybody appears to be speaking about it, good or unhealthy. Let’s dive in and have a look at a few of the fundamentals of Remix.
Remix is a server “edge” first JavaScript framework. It makes use of React, at the least 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 capabilities 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 speak about how one can deploy it. Remix doesn’t present the server itself — you deliver the server — permitting it to be run in any Node.js or Deno setting, 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 Net 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 can be maintained by the Remix staff and they’re all named after musical genres. There’s additionally quite a few group Remix stacks together with the Ok-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. Try Tara Manicsic’s put up on deploying the Ok-Pop Stack.
Caching routes
Although Remix requires a server, it might nonetheless benefit from the Jamstack advantages by caching routes. A static web site or static web site era (SSG) is when your whole 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 hundreds for the top person. Nevertheless, Remix doesn’t do typical SSG like different common React frameworks, together with Subsequent.js and Gatsby. To get the a few of the advantages of SSG, you should utilize the native Cache-Management HTTP header in a Remix headers perform 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 perform the place you need it. This caches for one hour:
export perform headers() {
return {
“Cache-Management”: “public, s-maxage=360”,
};
};
Remixing routing
Lots of frameworks have leaned into routing primarily based on file methods. This can be a method the place a delegated folder is used to outline routes on your software. They usually have particular syntax for declaring dynamic routes and endpoints. The largest distinction at present between Remix and different common frameworks is the flexibility to make use of nested routing.
Each Remix app begins with the basis.tsx file. That is the place all the 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> element is what permits JavaScript on the location; some issues will work with out it, however not all the things. The basis.tsx file acts as a mother or father structure for all the things within the routes listing, all the things in routes is rendered the place the <Outlet/> element 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 staff from React Router, it additionally makes use of React Router. In truth, they’re bringing a few of the good issues about Remix again to React Router. A posh drawback that the maintainers of Subsequent.js and SvelteKit try to resolve proper now could be nested routing.
Nested routing is in contrast to conventional routing. The place a brand new route would take a person 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 conserving 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 all the web page crashing.
Remix does this when a root file in app/routes is called the identical as a listing of recordsdata that can load within the bottom file. The basis file turns into a structure for the recordsdata within the listing through the use of an <Outlet /> element to inform Remix the place to load the opposite routes.
Outlet element
The <Outlet /> Element 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 perform About() {
return (
<>
<part>
I’m the mother or father structure. I shall be on any web page within my named listing.
</part>
{ /* All of my youngsters, 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 house route
└── root.tsx
If 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 element to position the nested route in.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## it is a structure for /about/index.tsx
│ ├── index.tsx
└── root.tsx
Layouts 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.tsx
https://your-url.com/about will nonetheless render the app/routes/about.tsx file, however may also render no matter is in app/routes/about/index.tsx the place the Outlet element is within the markup of app/routes/about.tsx.
Dynamic Routes
A dynamic route is a route that modifications primarily based on info within the url. Which may be a reputation of a weblog put up or a buyer id, however it doesn’t matter what it’s the $ syntax added to the entrance of the route indicators to Remix that it’s dynamic. The identify doesn’t matter aside from the $ prefix.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## it is a structure for /about/index.tsx
│ ├── index.tsx
└── root.tsx
Fetch that information!
Since Remix renders all of its information on the server, you don’t see a whole lot 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 should utilize the usual Net Fetch API. Remix does this in a loader perform that solely runs on the server and makes use of the useLoaderData() hook to render the information within the element. 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 perform loader() {
const response = await fetch(‘<https://cataas.com/cat?json=true>’)
const information = await response.json()
return {
information
}
}
export default perform 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 perform has entry to those by a params argument.
import { useLoaderData } from ‘@remix-run/react’
import sort { LoaderArgs } from ‘@remix-run/node’
export async perform loader({ params }: LoaderArgs) {
return {
params
}
}
export default perform AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}
Different Remix capabilities
Remix has a couple of different helper capabilities that add additional performance to regular HTML components and attributes within the route module API. Every route can outline its personal of all these capabilities.
Motion perform
An motion perform means that you can add additional performance to a type motion utilizing the usual net FormData API.
export async perform motion({ request }) {
const physique = await request.formData();
const todo = await fakeCreateTodo({
title: physique.get(“title”),
});
return redirect(`/todos/${todo.id}`);
}
Headers perform
Any HTTP normal headers can go in a headers perform. 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 can even get the headers handed by, actionHeaders, loaderHeaders, or parentHeaders
export perform headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
“Cache-Management”: loaderHeaders.get(“Cache-Management”),
};
}
Meta perform
This perform will set the meta tags for the HTML doc. One is about within the root.tsx file by default, however they are often up to date for every route.
export perform meta() {
return {
title: “Your web page title”,
description: “A brand new description for every route.”,
};
};
Hyperlinks perform
HTML hyperlink components stay within the <head> tag of an HTML doc and so they import CSS, amongst different issues. The hyperlinks perform, to not be confused with the <Hyperlink /> element, 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() perform as an array of objects and may both be a HtmlLinkDescriptor from the hyperlink API or a PageLinkDescriptor that may prefetch the information for a web page.
export perform 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 element to go between the completely different routes in your app known as <Hyperlink/>. To get client-side routing, use the <Hyperlink to=””>Identify</Hyperlink> element as a substitute of <a href=””>Identify</a>. The <Hyperlink /> element additionally takes a prop of prefetch with accepts none by default, intent to prefetch the information if Remix detects the person hovers or focuses the hyperlink, or render which can fetch the route’s information as quickly because the hyperlink is rendered.
import { Hyperlink } from “@remix-run/react”;
export default perform Nav() {
return (
<nav>
<Hyperlink to=”/”>House</Hyperlink>{” “}
<Hyperlink to=”/about”>About</Hyperlink>{” “}
<Hyperlink to=”/about/group” prefetch=”intent”>Neighborhood</Hyperlink>
</nav>
);
}
Subsequent steps
Now you realize the fundamentals of Remix and also you’re able to get began really constructing purposes, proper? Remix supplies a Jokes app and a Weblog tutorial to get you began implementing this primary data. You can even begin from scratch and create a model new Remix app. Or in case you are able to dive in, give the Ok-Pop Stack a strive. I’ve actually loved my time with Remix and love the concentrate on net requirements and bringing it again to the fundamentals. Now it’s your flip to begin creating!
The Fundamentals of Remix initially revealed on CSS-Tips, which is a part of the DigitalOcean household. You must get the e-newsletter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!