Je hebt waarschijnlijk veel hype gehoord rond een van de nieuwste kinderen op het raamwerkblok, Remix. Het is misschien verrassend dat het in 2019 van start ging, maar het was oorspronkelijk alleen beschikbaar als een op abonnementen gebaseerd premium-framework. In 2021 hebben de oprichters startkapitaal opgehaald en het raamwerk open source gemaakt zodat gebruikers Remix gratis kunnen gaan gebruiken. De sluizen gingen open en iedereen lijkt erover te praten, goed of slecht. Laten we een duik nemen en enkele basisprincipes van Remix bekijken.
Remix is een server "edge" eerste JavaScript-framework. Het maakt gebruik van React, tenminste voor nu, voor de front-end en geeft prioriteit aan server-side rendering van de applicatie op het randje. Platforms kunnen de code aan de serverzijde gebruiken en uitvoeren als: serverloze of edge-functies waardoor het goedkoper is dan een traditionele server en het dichter bij uw gebruikers komt. De oprichters van Remix noemen het graag een 'center stack'-framework omdat het de verzoeken en reacties tussen de server en de client aanpast aan het platform waarop het wordt uitgevoerd.
Remix implementeren
Omdat Remix een server vereist, laten we het hebben over hoe u deze kunt implementeren. Remix levert de server zelf niet - u brengt de server - waardoor deze in een willekeurige . kan worden uitgevoerd Node.js or Deno omgeving, waaronder: Netlify Edge en Het app-platform van DigitalOcean. Remix zelf is een compiler, een programma dat de verzoeken vertaalt voor het platform waarop het draait. Dit proces gebruikt esbouwen om handlers te maken voor de verzoeken aan de server. De HTTP-handlers die het gebruikt, zijn gebouwd op de Web Fetch-API en worden op de server uitgevoerd door het aanpassen voor het platform waarop ze worden ingezet.
Remix stapels
Remix-stacks zijn projecten met een aantal algemene tools die vooraf voor u zijn geconfigureerd. Er zijn drie officiële stapels die worden onderhouden door het Remix-team en ze zijn allemaal vernoemd naar muziekgenres. Er is ook een aantal community Remix-stacks, waaronder de K-Pop-stack gemaakt door het Templates-team van Netlify. Deze stapel is een krachtpatser en bevat een supabase database en authenticatie, Tailwind voor styling, Cipres end-to-end testen, prettier code-opmaak, ESlint pluizen, en getypte tekst statisch typen. Bekijk het bericht van Tara Manicsic over het inzetten van de K-Pop Stack.
Cachingroutes
Hoewel Remix een server vereist, kan het nog steeds profiteren van de Jamstack voordelen door caching-routes. Een statische site of statische sitegeneratie (SSG) is wanneer al uw inhoud wordt weergegeven tijdens het bouwen en blijft statisch tot weer een verbouwing. De inhoud is vooraf gegenereerd en kan op een CDN worden gezet. Dit biedt vele voordelen en snelle siteloads voor de eindgebruiker. Remix doet echter geen typische SSG zoals andere populaire React-frameworks, waaronder Next.js en Gatsby. Om enkele van de voordelen van SSG te krijgen, kunt u de native Cache-Control HTTP-header in een remix headers-functie om een bepaalde route te cachen of direct in de root.tsx bestand.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Voeg dan je . toe headers-functie waar je het wilt. Deze cache voor een uur:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Routering opnieuw mixen
Veel frameworks hebben gekozen voor routering op basis van bestandssystemen. Dit is een techniek waarbij een aangewezen map wordt gebruikt om routes voor uw toepassing te definiëren. Ze hebben meestal een speciale syntaxis voor het declareren van dynamische routes en eindpunten. Het grootste verschil tussen Remix en andere populaire frameworks is de mogelijkheid om te gebruiken geneste routering.
Elke Remix-app begint met de root.tsx het dossier. Dit is waar de hele basis van de app wordt weergegeven. U vindt hier enkele van de gebruikelijke HTML-lay-outs, zoals de <html> tag, de <head> tag, en dan de <body> tag met de componenten die nodig zijn om de app weer te geven. Het enige om hier op te wijzen is de <Scripts> component is wat JavaScript op de site mogelijk maakt; sommige dingen werken zonder, maar niet alles. De root.tsx bestand fungeert als een bovenliggende lay-out voor alles binnen de routes directory, wordt alles in routes weergegeven waar de <Outlet/> onderdeel is binnen root.tsx. Dit is de basis van geneste routering in Remix.
Geneste routering
Remix is niet alleen opgericht door een deel van het team van Reageer router, het ook toepassingen Reageer router. In feite zijn ze enkele van de goede dingen van Remix terugbrengen naar React Router. Een complex probleem dat de beheerders van Next.js en SvelteKit nu proberen op te lossen, is geneste routering.
Geneste routering is anders dan traditionele routering. Waar een nieuwe route een gebruiker naar een nieuwe pagina zou leiden, is elke geneste route een afzonderlijk gedeelte van dezelfde pagina. Het zorgt voor scheiding van zorgen door de bedrijfslogica alleen te koppelen aan de bestanden die het nodig hebben. Remix kan fouten afhandelen die alleen zijn gelokaliseerd in het gedeelte van de pagina waar de geneste route zich bevindt. De andere routes op de pagina zijn nog steeds bruikbaar en de route die is verbroken, kan relevante context bieden voor de fout zonder dat de hele pagina crasht.
Remix doet dit wanneer een rootbestand in app/routes heeft dezelfde naam als een map met bestanden die in het basisbestand worden geladen. Het rootbestand wordt een lay-out voor de bestanden in de map met behulp van een <Outlet /> component om Remix te vertellen waar de andere routes moeten worden geladen.
Uitgangscomponent
De <Outlet /> Component is een signaal naar Remix voor waar het inhoud voor geneste routes moet weergeven. Het wordt in het bestand in de hoofdmap van de app/routes map met dezelfde naam als de geneste routes. De volgende code gaat in a app/routes/about.tsx bestand en bevat de uitlaat voor de bestanden erin app/routes/about map:
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 />
</>
)
}Mappenstructuur
Elk bestand in de app/routes/ directory wordt een route op de URL van zijn naam. Een directory kan ook worden toegevoegd met een index.tsx bestand.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxAls een route dezelfde naam heeft als een map, wordt het genoemde bestand een lay-outbestand voor de bestanden in de map en heeft het lay-outbestand een Uitgangscomponent om de geneste route in te plaatsen.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxLay-outs kunnen ook worden gemaakt door ze vooraf te laten gaan met een dubbel onderstrepingsteken (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about zal nog steeds de weergeven app/routes/about.tsx bestand, maar geeft ook weer wat er in zit app/routes/about/index.tsx waarbij de Uitgangscomponent staat in de opmaak van app/routes/about.tsx.
Dynamische routes
Een dynamische route is een route die verandert op basis van informatie in de url. Dat kan een naam zijn van een blogpost of een klant-ID, maar wat het ook is $ syntaxis toegevoegd aan de voorkant van de route geeft aan Remix aan dat het dynamisch is. De naam doet er niet toe, behalve de $ voorvoegsel.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxHaal die gegevens op!
Omdat Remix al zijn gegevens op de server weergeeft, zie je niet veel van de dingen die de standaard zijn geworden van een React-app, zoals useState() en useEffect() haken, in Remix. Er is minder behoefte aan een status aan de clientzijde, omdat deze al op de server is geëvalueerd.
Het maakt ook niet uit welk type server u gebruikt voor het ophalen van gegevens. Omdat Remix tussen het verzoek en het antwoord zit en het op de juiste manier vertaalt, kun je de standaard gebruiken Web Fetch-API. Remix doet dit in een loader functie dat Slechts draait op de server en gebruikt de useLoaderData() hook om de gegevens in de component weer te geven. Hier is een voorbeeld met de Cat as a Service-API om een willekeurig kattenbeeld weer te geven.
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 />
</>
)
}Routeparameters
In dynamische routes, routes met het voorvoegsel $ moeten toegang hebben tot de URL-parameter om die gegevens te verwerken die moeten worden weergegeven. De loader functie heeft toegang tot deze via een 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>
}Andere Remix-functies
Remix heeft een paar andere helperfuncties die extra functionaliteit toevoegen aan normale HTML-elementen en attributen in de routemodule-API. Elke route kan zijn eigen van dit soort functies definiëren.
Actie functie
An action functie stelt u in staat om extra functionaliteit toe te voegen aan een formulieractie met behulp van het standaard 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}`);
}Headers-functie
Elke HTTP-standaardheaders kan naar binnen gaan headers functie. Omdat elke route een koptekst kan hebben, om conflicten met geneste routes te voorkomen, de diepste route — of de URL met de meeste slashes (/) — wint. U kunt ook de headers door laten gaan, actionHeaders, loaderHeadersof parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta-functie
Deze functie stelt de metatags voor het HTML-document in. Een ervan bevindt zich in de root.tsx standaard bestand, maar ze kunnen voor elke route worden bijgewerkt.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Koppelingsfunctie
HTML link elementen leven in de <head> tag van een HTML-document en ze importeren onder andere CSS. De links functie, niet te verwarren met de <Link /> bestanddeel, kunt u alleen dingen importeren in de routes die ze nodig hebben. Zo kunnen CSS-bestanden bijvoorbeeld worden gescoped en alleen worden geïmporteerd op de routes die die specifieke bestanden nodig hebben. De link elementen worden geretourneerd uit a links() functioneren als een array van objecten en kan ofwel a HtmlLinkDescriptor van het link API of PageLinkDescriptor die de gegevens voor een pagina kan prefetchen.
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" }
]
}Koppeling tussen routes
Remix biedt een component om tussen de verschillende routes in je app te gaan, genaamd <Link/>. Om client-side routering te krijgen, gebruikt u de <Link to="">Name</Link> component in plaats van <a href="">Name</a>. De <Link /> component neemt ook een prop van prefetch met accepteert none standaard, intent om de gegevens vooraf op te halen als Remix detecteert dat de gebruiker zweeft of de link focust, of render die de routegegevens ophaalt zodra de link wordt weergegeven.
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>
);
}Volgende stappen
Nu ken je de basis van Remix en ben je klaar om aan de slag te gaan met het bouwen van applicaties, toch? Remix biedt een Grappen-app en Blog-zelfstudie om u op weg te helpen met het implementeren van deze basiskennis. Je kunt ook helemaal opnieuw beginnen en een gloednieuwe Remix-app maken. Of als je klaar bent om erin te duiken, geef de K-Pop-stack een poging. Ik heb echt genoten van mijn tijd met Remix en hou van de focus op webstandaarden en het terugbrengen naar de basis. Nu is het jouw beurt om te beginnen met creëren!
