Du har säkert hört mycket hype kring en av de nyaste barnen på ramblocket, Remix. Det kan vara förvånande att det startade redan 2019, men det var ursprungligen bara tillgängligt som ett prenumerationsbaserat premiumramverk. År 2021 samlade grundarna in startfinansiering och öppnade ramverket för att låta användare börja använda Remix gratis. Dammslussarna öppnades och alla verkar prata om det, bra eller dåligt. Låt oss dyka in och titta på några av grunderna i Remix.
Remix är ett server "edge" första JavaScript-ramverk. Den använder React, åtminstone för stunden, för gränssnittet och prioriterar rendering av applikationen på serversidan på kanten. Plattformar kan ta koden på serversidan och köra den som serverlösa eller kantfunktioner gör den billigare än en traditionell server och placerar den närmare dina användare. Remix-grundarna vill kalla det ett "center stack"-ramverk eftersom det anpassar förfrågningarna och svaren som görs mellan servern och klienten för plattformen den körs på.
Installerar Remix
Eftersom Remix kräver en server, låt oss prata om hur du kan distribuera den. Remix tillhandahåller inte själva servern - du tar med servern - så att den kan köras i vilken som helst node.js or deno miljö, inklusive Netify Edge och DigitalOceans appplattform. Remix i sig är en kompilator, ett program som översätter förfrågningarna för plattformen den körs på. Denna process använder esbygga för att skapa hanterare för förfrågningarna till servern. HTTP-hanterarna som den använder är byggda på Web Hämta API och körs på servern av anpassning dem för plattformen de kommer att distribueras till.
Remix stackar
Remix-stackar är projekt som har några vanliga verktyg som är förkonfigurerade åt dig. Det finns tre officiella stackar som underhålls av Remix-teamet och de är alla uppkallade efter musikgenrer. Det finns också ett antal community Remix-stackar inklusive K-Pop Stack skapad av Templates Team på Netlify. Denna stack är ett kraftpaket och inkluderar en Supabase databas och autentisering, Medvind för styling, Cypress end-to-end testning, Sötare kodformatering, ESLint ludd, och MASKINSKRIVEN statisk typning. Kolla in Tara Manicsics inlägg om att distribuera K-Pop Stack.
Cacha rutter
Även om Remix kräver en server kan den fortfarande dra nytta av syltstack fördelar genom att cache rutter. En statisk webbplats eller statisk webbplatsgenerering (SSG) är när allt ditt innehåll renderas vid byggtiden och stannar statisk tills en ny ombyggnad. Innehållet är förgenererat och kan läggas på ett CDN. Detta ger många fördelar och snabba sajtladdningar för slutanvändaren. Remix gör dock inte typisk SSG som andra populära React-ramverk, inklusive Next.js och Gatsby. För att få några av fördelarna med SSG kan du använda den infödda Cache-Control HTTP-huvud i en remix rubrikfunktion för att cachelagra en viss rutt eller direkt i root.tsx fil.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Lägg sedan till din rubrikfunktion där du vill ha den. Detta cachar i en timme:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Remixar routing
Många ramverk har lutat sig åt routing baserat på filsystem. Detta är en teknik där en angiven mapp används för att definiera rutter för din applikation. De har vanligtvis speciell syntax för att deklarera dynamiska rutter och slutpunkter. Den största skillnaden för närvarande mellan Remix och andra populära ramverk är möjligheten att använda kapslad dirigering.
Varje Remix-app börjar med root.tsx fil. Det är här hela basen av appen renderas. Du hittar några av de vanliga HTML-layouterna här som <html> taggen, den <head> taggen och sedan <body> tagga med de komponenter som behövs för att rendera appen. En sak att påpeka här är <Scripts> komponenten är det som aktiverar JavaScript på webbplatsen; vissa saker kommer att fungera utan det, men inte allt. De root.tsx filen fungerar som en överordnad layout för allt inuti routes katalog, allt i rutter renderas där <Outlet/> komponenten är i root.tsx. Detta är basen för kapslad routing i Remix.
Nestad routing
Inte bara grundades Remix av några av teamet från React router, det är också användningar Reager Router. Det är de faktiskt tar med några av de bra sakerna med Remix tillbaka till React Router. Ett komplext problem som underhållarna av Next.js och SvelteKit försöker lösa just nu är kapslad routing.
Kapslad routing skiljer sig från traditionell routing. Där en ny rutt skulle ta en användare till en ny sida, är varje kapslad rutt en separat del av samma sida. Det möjliggör separation av bekymmer genom att hålla affärslogik kopplad till endast de filer som behöver det. Remix kan hantera fel lokaliserade till endast den del av sidan som den kapslade rutten är på. De andra vägarna på sidan är fortfarande användbara och rutten som gick sönder kan ge relevant kontext till felet utan att hela sidan kraschar.
Remix gör detta när en rotfil kommer in app/routes har samma namn som en katalog med filer som kommer att laddas inuti basfilen. Rotfilen blir en Layouten för filerna i katalogen genom att använda en <Outlet /> komponent för att tala om för Remix var de andra rutterna ska laddas.
Utloppskomponent
Smakämnen <Outlet /> Komponent är en signal till Remix för var den ska rendera innehåll för kapslade rutter. Det läggs i filen i roten av app/routes katalog med samma namn som de kapslade rutterna. Följande kod går i en app/routes/about.tsx fil och inkluderar uttaget för filerna inuti app/routes/about mapp:
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 />
</>
)
}Mappstruktur
Vilken fil som helst i app/routes/ katalogen blir en rutt vid URL:en till dess namn. En katalog kan också läggas till med en index.tsx fil.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxOm en rutt har samma namn som en katalog, blir den namngivna filen en layoutfil för filerna i katalogen och layoutfilen behöver en Utloppskomponent att placera den kapslade rutten i.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxLayouter kan också skapas genom att prefixa dem med ett dubbelt understreck (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about kommer fortfarande att göra app/routes/about.tsx fil, men kommer också att återge allt som finns i app/routes/about/index.tsx där Utloppskomponent är i uppmärkningen av app/routes/about.tsx.
Dynamiska rutter
En dynamisk rutt är en rutt som ändras baserat på information i webbadressen. Det kan vara ett namn på ett blogginlägg eller ett kund-id, men oavsett vad det är $ syntax som lagts till på framsidan av rutten signalerar till Remix att den är dynamisk. Namnet spelar ingen roll annat än $ prefix.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxHämta den datan!
Eftersom Remix renderar all sin data på servern ser du inte mycket av de saker som har blivit standarden för en React-app, som useState() och useEffect() krokar, i Remix. Det finns mindre behov av tillstånd på klientsidan eftersom det redan har utvärderats på servern.
Det spelar heller ingen roll vilken typ av server du använder för att hämta data. Eftersom Remix sitter mellan förfrågan och svar och översätter det på lämpligt sätt, kan du använda standarden Web Hämta API. Remix gör detta i en loader fungerar det endast körs på servern och använder useLoaderData() krok för att återge data i komponenten. Här är ett exempel med hjälp av Cat as a Service API för att återge en slumpmässig kattbild.
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 />
</>
)
}Ruttparametrar
I dynamiska rutter, rutter med prefix $ måste kunna komma åt URL-parametern för att hantera den data som ska renderas. De loader funktion har tillgång till dessa genom 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>
}Andra Remix-funktioner
Remix har några andra hjälpfunktioner som lägger till extra funktionalitet till vanliga HTML-element och attribut i ruttmodulens API. Varje rutt kan definiera sin egen av dessa typer av funktioner.
Åtgärdsfunktion
An action funktion låter dig lägga till extra funktionalitet till en formuläråtgärd med hjälp av standardwebben 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}`);
}Headers funktion
Vilken som helst HTTP-standardhuvuden kan gå i en headers fungera. Eftersom varje rutt kan ha en rubrik, för att undvika konflikter med kapslade rutter, den djupaste rutten – eller URL:en med de mest snedstreck (/) — vinner. Du kan också få rubrikerna passerade, actionHeaders, loaderHeaders, eller parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta funktion
Denna funktion kommer att ställa in metataggar för HTML-dokumentet. En är inställd i root.tsx fil som standard, men de kan uppdateras för varje rutt.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Länkfunktion
html link element bor i <head> taggen av ett HTML-dokument och de importerar bland annat CSS. De links funktion, inte att förväxla med <Link /> komponent, låter dig bara importera saker på de rutter som behöver dem. Så, till exempel, CSS-filer kan omfångas och endast importeras på de rutter som behöver dessa specifika filer. De link element returneras från en links() fungera som en samling objekt och kan antingen vara en HtmlLinkDescriptor från link API eller ett PageLinkDescriptor som kan förhämta data för en sida.
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" }
]
}Länka mellan rutter
Remix tillhandahåller en komponent för att gå mellan de olika vägarna i din app som kallas <Link/>. För att få routing på klientsidan, använd <Link to="">Name</Link> komponent istället för <a href="">Name</a>. De <Link /> komponent tar också en rekvisita av prefetch med accepterar none som standard, intent för att hämta data om Remix upptäcker att användaren svävar eller fokuserar länken, eller render som kommer att hämta ruttens data så snart länken återges.
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>
);
}Nästa steg
Nu kan du grunderna i Remix och du är redo att börja faktiskt bygga applikationer, eller hur? Remix ger en Skämt app och en Blogg tutorial för att komma igång med att implementera denna grundläggande kunskap. Du kan också börja från början och skapa en helt ny Remix-app. Eller om du är redo att dyka i, ge K-Pop Stack ett försök. Jag har verkligen njutit av min tid med Remix och älskar fokus på webbstandarder och att ta tillbaka det till grunderna. Nu är det din tur att börja skapa!
