Du har sikkert hørt mye hype rundt en av de nyeste barna på rammeblokken, Remix. Det kan være overraskende at det startet tilbake i 2019, men det var opprinnelig bare tilgjengelig som et abonnementsbasert premium-rammeverk. I 2021 samlet grunnleggerne såkornfinansiering og åpen kildekode for å la brukere begynne å bruke Remix gratis. Slukene åpnet seg og alle ser ut til å snakke om det, godt eller dårlig. La oss dykke inn og se på noe av det grunnleggende i Remix.
Remix er et server-"edge"-første JavaScript-rammeverk. Den bruker React, i hvert fall for nå, for grensesnittet og prioriterer gjengivelse av applikasjonen på serversiden på kanten. Plattformer kan ta koden på serversiden og kjøre den som serverløse eller kantfunksjoner gjør den billigere enn en tradisjonell server og setter den nærmere brukerne dine. Remix-gründerne liker å kalle det et "center stack"-rammeverk fordi det tilpasser forespørslene og svarene som gjøres mellom serveren og klienten for plattformen den kjøres på.
Implementerer Remix
Fordi Remix krever en server, la oss snakke om hvordan du kan distribuere den. Remix leverer ikke selve serveren - du tar med serveren - slik at den kan kjøres i hvilken som helst node.js or Deno miljø, inkludert Netify Edge og DigitalOceans appplattform. Remix i seg selv er en kompilatoren, et program som oversetter forespørslene for plattformen den kjører på. Denne prosessen bruker esbuild å lage behandlere for forespørslene til serveren. HTTP-behandlerne den bruker er bygget på Web Fetch API og kjøres på serveren av tilpasse dem for plattformen de vil bli distribuert til.
Remix stabler
Remix-stabler er prosjekter som har noen vanlige verktøy som er forhåndskonfigurert for deg. Det er tre offisielle stabler som vedlikeholdes av Remix-teamet, og de er alle oppkalt etter musikalske sjangere. Det er også en rekke community Remix-stabler inkludert K-Pop Stack opprettet av malteamet på Netlify. Denne stabelen er et kraftsenter og inkluderer en Supabase database og autentisering, Tailwind for styling, Sypress ende-til-ende testing, penere kodeformatering, ESLint linting, og Loggfila statisk skriving. Sjekk ut Tara Manicsics innlegg om distribusjon av K-Pop Stack.
Bufferruter
Selv om Remix krever en server, kan den fortsatt dra nytte av Jamstack fordeler ved å bufre ruter. Et statisk nettsted eller statisk nettstedgenerering (SSG) er når alt innholdet ditt gjengis på byggetidspunktet og forblir statisk inntil en ny ombygging. Innholdet er forhåndsgenerert og kan legges på et CDN. Dette gir mange fordeler og raske nettstedinnlastinger for sluttbrukeren. Remix gjør imidlertid ikke typisk SSG som andre populære React-rammeverk, inkludert Next.js og Gatsby. For å få noen av fordelene med SSG, kan du bruke den innfødte Cache-Control HTTP-header i en remiks header funksjon for å bufre en bestemt rute eller direkte i root.tsx filen.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Legg deretter til din header funksjon hvor du vil ha det. Dette lagrer i én time:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Remikser ruting
Mange rammeverk har lenet seg til ruting basert på filsystemer. Dette er en teknikk der en utpekt mappe brukes til å definere ruter for applikasjonen din. De har vanligvis spesiell syntaks for å deklarere dynamiske ruter og endepunkter. Den største forskjellen for øyeblikket mellom Remix og andre populære rammeverk er muligheten til å bruke nestet ruting.
Hver Remix-app starter med root.tsx fil. Det er her hele basen av appen gjengis. Du finner noen av de vanlige HTML-layoutene her som <html> tag, den <head> tag, og deretter <body> tag med komponentene som trengs for å gjengi appen. Den ene tingen å påpeke her er <Scripts> komponent er det som aktiverer JavaScript på nettstedet; noen ting vil fungere uten det, men ikke alt. De root.tsx filen fungerer som et overordnet layout for alt inne i routes katalog, alt i ruter gjengis der <Outlet/> komponenten er inne root.tsx. Dette er grunnlaget for nestet ruting i Remix.
Nestet ruting
Ikke bare ble Remix grunnlagt av noen av teamet fra Reager ruter, det også bruker Reager Router. Faktisk er de det bringe noen av de gode tingene med Remix tilbake til React Router. Et komplekst problem som vedlikeholderne av Next.js og SvelteKit prøver å løse akkurat nå, er nestet ruting.
Nestet ruting er i motsetning til tradisjonell ruting. Der en ny rute tar en bruker til en ny side, er hver nestede rute en egen del av den samme siden. Det gir mulighet for separasjon av bekymringer ved å holde forretningslogikk knyttet til bare filene som trenger det. Remix er i stand til å håndtere feil lokalisert til bare delen av siden den nestede ruten er på. De andre rutene på siden er fortsatt brukbare og ruten som brøt kan gi relevant kontekst til feilen uten at hele siden krasjer.
Remix gjør dette når en rotfil inn app/routes heter det samme som en katalog med filer som skal lastes inn i basisfilen. Rotfilen blir en layout for filene i katalogen ved å bruke en <Outlet /> komponent for å fortelle Remix hvor de andre rutene skal lastes.
Uttakskomponent
De <Outlet /> Komponent er et signal til Remix for hvor den skal gjengi innhold for nestede ruter. Det er lagt i filen ved roten av app/routes katalog med samme navn som de nestede rutene. Følgende kode går i en app/routes/about.tsx fil og inkluderer uttaket for filene inne app/routes/about mappe:
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}Mappestruktur
Enhver fil i app/routes/ katalogen blir en rute ved URL-en til navnet. En katalog kan også legges til med en index.tsx filen.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxHvis en rute har samme navn som en katalog, blir den navngitte filen en layoutfil for filene inne i katalogen og layoutfilen trenger en Uttakskomponent å plassere den nestede ruten i.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxLayouter kan også opprettes ved å prefiksere dem med en dobbel understreking (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about vil fortsatt gjengi app/routes/about.tsx fil, men vil også gjengi det som er i app/routes/about/index.tsx der Uttakskomponent er i markeringen av app/routes/about.tsx.
Dynamiske ruter
En dynamisk rute er en rute som endres basert på informasjon i url. Det kan være et navn på et blogginnlegg eller en kunde-ID, men uansett hva det er $ syntaks lagt til forsiden av ruten signaliserer til Remix at den er dynamisk. Navnet spiller ingen rolle annet enn $ prefiks.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxHent de dataene!
Siden Remix gjengir alle dataene sine på serveren, ser du ikke mange av tingene som har blitt standarden til en React-app, som useState() og useEffect() kroker, i Remix. Det er mindre behov for klientsidestatus siden den allerede er evaluert på serveren.
Det spiller heller ingen rolle hvilken type server du bruker for å hente data. Siden Remix sitter mellom forespørselen og svaret og oversetter det riktig, kan du bruke standarden Web Fetch API. Remix gjør dette i en loader funksjon som bare kjører på serveren og bruker useLoaderData() krok for å gjengi dataene i komponenten. Her er et eksempel som bruker Cat as a Service API for å gjengi et tilfeldig kattebilde.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}Ruteparametere
I dynamiske ruter, ruter prefikset med $ må ha tilgang til URL-parameteren for å håndtere de dataene som skal gjengis. De loader funksjonen har tilgang til disse gjennom en params argument.
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}Andre Remix-funksjoner
Remix har noen få andre hjelpefunksjoner som legger til ekstra funksjonalitet til vanlige HTML-elementer og attributter i rutemodul API. Hver rute kan definere sin egen av disse typer funksjoner.
Handlingsfunksjon
An action funksjon lar deg legge til ekstra funksjonalitet til en skjemahandling ved å bruke standard web FormData API.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Overskrifter funksjon
Noen HTTP standard overskrifter kan gå i en headers funksjon. Fordi hver rute kan ha en overskrift, for å unngå konflikter med nestede ruter, den dypeste ruten – eller nettadressen med flest skråstreker (/) — vinner. Du kan også få overskriftene sendt gjennom, actionHeaders, loaderHeaderseller parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta funksjon
Denne funksjonen vil sette metakodene for HTML-dokumentet. Den ene er satt i root.tsx filen som standard, men de kan oppdateres for hver rute.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Lenkefunksjon
HTML link elementer bor i <head> taggen til et HTML-dokument og de importerer blant annet CSS. De links funksjon, ikke å forveksle med <Link /> komponent, lar deg bare importere ting i rutene som trenger dem. Så, for eksempel, kan CSS-filer scopes og bare importeres på rutene som trenger de spesifikke filene. De link elementer returneres fra en links() fungere som en rekke objekter og kan enten være en HtmlLinkDescriptor fra link API eller en PageLinkDescriptor som kan forhåndshente dataene for en side.
export function links() {
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" }
]
}Kobling mellom ruter
Remix gir en komponent for å gå mellom de forskjellige rutene i appen din <Link/>. For å få ruting på klientsiden, bruk <Link to="">Name</Link> komponent i stedet for <a href="">Name</a>. De <Link /> komponent tar også en rekvisitt av prefetch med aksepterer none som standard, intent å forhåndshente dataene hvis Remix oppdager at brukeren svever eller fokuserer lenken, eller render som vil hente rutens data så snart koblingen er gjengitt.
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}Neste trinn
Nå vet du det grunnleggende om Remix, og du er klar til å begynne å bygge applikasjoner, ikke sant? Remix gir en Vitser app og en Bloggopplæring for å komme i gang med å implementere denne grunnleggende kunnskapen. Du kan også starte fra bunnen av og lage en helt ny Remix-app. Eller hvis du er klar til å dykke inn, gi den K-Pop Stack et forsøk. Jeg har virkelig likt tiden min med Remix og elsker fokuset på nettstandarder og å bringe det tilbake til det grunnleggende. Nå er det din tur til å begynne å skape!
