Die Grundlagen des Remixens

Sie haben wahrscheinlich schon viel Hype um eines der neuesten Kinder im Framework-Block, Remix, gehört. Es mag überraschen, dass es bereits 2019 seinen Anfang nahm, aber es war ursprünglich nur als abonnementbasiertes Premium-Framework verfügbar. Im Jahr 2021 sammelten die Gründer Startkapital und stellten das Framework als Open Source bereit, damit Benutzer Remix kostenlos nutzen können. Die Schleusen öffneten sich und jeder schien darüber zu sprechen, gut oder schlecht. Lassen Sie uns eintauchen und uns einige der Grundlagen von Remix ansehen.

Remix ist ein „Edge“-First-JavaScript-Framework für Server. Es verwendet React, Zumindest für jetzt, für das Front-End und priorisiert das serverseitige Rendern der Anwendung an der Kante. Plattformen können den serverseitigen Code nehmen und als ausführen serverlose oder Edge-Funktionen Dadurch ist es billiger als ein herkömmlicher Server und näher an Ihren Benutzern. Die Remix-Gründer nennen es gerne ein „Center-Stack“-Framework, weil es die Anfragen und Antworten zwischen Server und Client an die Plattform anpasst, auf der es ausgeführt wird.

Bereitstellen von Remix

Da Remix einen Server benötigt, lassen Sie uns darüber sprechen, wie Sie ihn bereitstellen können. Remix stellt den Server selbst nicht zur Verfügung – Sie bringen den Server mit –, sodass er in jedem ausgeführt werden kann Node.js or Deno Umwelt, inkl Netlify Edge und Die App-Plattform von DigitalOcean. Remix selbst ist ein Compiler, ein Programm, das die Anfragen für die Plattform übersetzt, auf der es läuft. Dieser Prozess verwendet bauen um Handler für die Anfragen an den Server zu erstellen. Die verwendeten HTTP-Handler basieren auf der Web-Fetch-API und werden auf dem Server von ausgeführt sich anpassen sie für die Plattform, auf der sie bereitgestellt werden.

Stacks remixen

Remix-Stacks sind Projekte mit einigen gängigen Tools, die für Sie vorkonfiguriert sind. Es gibt drei offizielle Stapel die vom Remix-Team gepflegt werden und alle nach Musikgenres benannt sind. Es gibt auch eine Reihe von Community-Remix-Stacks, darunter die K-Pop-Stapel erstellt vom Templates Team bei Netlify. Dieser Stack ist ein Kraftpaket und beinhaltet a Superbasis Datenbank und Authentifizierung, Tailwind zum Stylen, Zypresse End-to-End-Tests, Schöner Codeformatierung, ESLint Flusen und Typoskript statische Typisierung. Sehen Sie sich den Beitrag von Tara Manicsic zur Bereitstellung des K-Pop-Stacks an.

Caching-Routen

Auch wenn Remix einen Server benötigt, kann es trotzdem davon profitieren Marmeladenstapel Vorteile durch Caching von Routen. Eine statische Site oder statische Site-Generierung (SSG) liegt vor, wenn alle Ihre Inhalte zur Build-Zeit gerendert werden und bleiben statisch bis zum nächsten Umbau. Der Inhalt ist vorgeneriert und kann auf ein CDN gestellt werden. Dies bietet viele Vorteile und schnelle Seitenladevorgänge für den Endbenutzer. Remix macht jedoch kein typisches SSG wie andere beliebte React-Frameworks, einschließlich Next.js und Gatsby. Um einige der Vorteile von SSG zu nutzen, können Sie die native Cache-Control-HTTP-Header in einem Remix Header-Funktion zum Cachen einer bestimmten Route oder direkt in der root.tsx Datei.

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

Fügen Sie dann Ihre hinzu Header-Funktion Wo willst du es. Dies cachet für eine Stunde:

export function headers() {
  return {
    "Cache-Control": "public, s-maxage=360",
  };
};

Remix-Routing

Viele Frameworks haben sich auf das Routing basierend auf Dateisystemen konzentriert. Dies ist eine Technik, bei der ein bestimmter Ordner verwendet wird, um Routen für Ihre Anwendung zu definieren. Sie haben normalerweise eine spezielle Syntax zum Deklarieren dynamischer Routen und Endpunkte. Der derzeit größte Unterschied zwischen Remix und anderen gängigen Frameworks ist die Verwendungsfähigkeit verschachteltes Routing.

Jede Remix-App beginnt mit dem root.tsx Datei. Hier wird die gesamte Basis der App gerendert. Hier finden Sie einige der gängigen HTML-Layouts wie z <html> Tag, der <head> Tag, und dann die <body> -Tag mit den zum Rendern der App erforderlichen Komponenten. Das Einzige, was hier hervorzuheben ist, ist die <Scripts> Die Komponente aktiviert JavaScript auf der Website; Manches geht auch ohne, aber nicht alles. Das root.tsx Datei fungiert als übergeordnetes Layout für alles innerhalb der routes Verzeichnis, alles in Routen wird dort gerendert, wo die <Outlet/> Komponente ist drin root.tsx. Dies ist die Grundlage des verschachtelten Routings in Remix.

Verschachteltes Routing

Remix wurde nicht nur von einigen des Teams aus gegründet Router reagierenes auch verwendet Router reagieren. Tatsächlich sind sie es bringt einige der guten Dinge über Remix zurück zu React Router. Ein komplexes Problem, das die Betreuer von Next.js und SvelteKit derzeit zu lösen versuchen, ist das verschachtelte Routing.

Verschachteltes Routing unterscheidet sich vom herkömmlichen Routing. Wo eine neue Route einen Benutzer zu einer neuen Seite führen würde, ist jede verschachtelte Route ein separater Abschnitt derselben Seite. Es ermöglicht die Trennung von Bedenken, indem die Geschäftslogik nur mit den Dateien verknüpft bleibt, die sie benötigen. Remix ist in der Lage, Fehler zu behandeln, die nur in dem Abschnitt der Seite lokalisiert sind, in dem sich die verschachtelte Route befindet. Die anderen Routen auf der Seite können weiterhin verwendet werden, und die fehlerhafte Route kann einen relevanten Kontext für den Fehler bereitstellen, ohne dass die gesamte Seite abstürzt.

Remix macht dies, wenn eine Root-Datei in app/routes wird genauso benannt wie ein Verzeichnis von Dateien, die in die Basisdatei geladen werden. Die Stammdatei wird zu einer Layout für die Dateien im Verzeichnis, indem Sie eine <Outlet /> Komponente, um Remix mitzuteilen, wo die anderen Routen geladen werden sollen.

Auslasskomponente

Das <Outlet /> Komponente ist ein Signal an Remix, wo Inhalte für verschachtelte Routen gerendert werden sollen. Es wird in der Datei im Stammverzeichnis abgelegt app/routes Verzeichnis mit demselben Namen wie die verschachtelten Routen. Der folgende Code geht in a app/routes/about.tsx Datei und enthält den Ausgang für die darin enthaltenen Dateien app/routes/about Ordner:

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 />
    </>
  )
}

Ordnerstruktur

Jede Datei in der app/routes/ Verzeichnis wird an der URL seines Namens zu einer Route. Ein Verzeichnis kann auch mit hinzugefügt werden index.tsx Datei.

app/
├── routes/
│   │
│   └── blog
|   |   ├── index.tsx ## The /blog route
│   └── about.tsx  ## The /about route
│   ├── index.tsx  ## The / or home route
└── root.tsx

Wenn eine Route den gleichen Namen wie ein Verzeichnis hat, wird die benannte Datei zu einer Layoutdatei für die Dateien innerhalb des Verzeichnisses und die Layoutdatei benötigt eine Auslasskomponente um die verschachtelte Route darin zu platzieren.

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

Layouts können auch erstellt werden, indem ihnen ein doppelter Unterstrich vorangestellt wird (__).

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── index.tsx
│   ├── about.tsx
│   ├── __blog.tsx ## this is also a layout
└── root.tsx

https://your-url.com/about wird die noch rendern app/routes/about.tsx Datei, sondern rendert auch alles, was drin ist app/routes/about/index.tsx wo die Auslasskomponente ist im Markup von app/routes/about.tsx.

Dynamische Routen

Eine dynamische Route ist eine Route, die sich basierend auf Informationen in der URL ändert. Das kann der Name eines Blogbeitrags oder eine Kundennummer sein, aber egal, was es ist $ Syntax, die am Anfang der Route hinzugefügt wird, signalisiert Remix, dass sie dynamisch ist. Der Name spielt keine Rolle, außer der $ Präfix.

app/
├── routes/
│   │
│   └── about
│   │   ├── $id.tsx
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

Holen Sie sich diese Daten!

Da Remix alle seine Daten auf dem Server rendert, sieht man nicht viele Dinge, die zum Standard einer React-App geworden sind, wie z useState() und useEffect() Haken, im Remix. Der clientseitige Status ist weniger erforderlich, da er bereits auf dem Server ausgewertet wurde.

Es spielt auch keine Rolle, welche Art von Server Sie zum Abrufen von Daten verwenden. Da Remix zwischen Request und Response sitzt und entsprechend übersetzt, können Sie den Standard verwenden Web-Fetch-API. Remix tut dies in a loader Funktion das einzige läuft auf dem Server und verwendet die useLoaderData() Hook, um die Daten in der Komponente zu rendern. Hier ist ein Beispiel mit der Cat-as-a-Service-API um ein zufälliges Katzenbild zu rendern.

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 />
    </>
  )
}

Routenparameter

In dynamischen Routen werden Routen mit dem Präfix $ müssen in der Lage sein, auf den URL-Parameter zuzugreifen, um die Daten zu verarbeiten, die gerendert werden sollen. Das loader Die Funktion hat Zugriff auf diese über a 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-Funktionen

Remix hat einige andere Hilfsfunktionen, die normalen HTML-Elementen und -Attributen in der zusätzliche Funktionalität hinzufügen Routenmodul-API. Jede Route kann ihre eigene dieser Arten von Funktionen definieren.

Aktionsfunktion

An action Mit der Funktion können Sie einer Formularaktion über das Standard-Web zusätzliche Funktionen hinzufügen 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}`);
}

Header-Funktion

Jedes HTTP-Standard-Header kann in ein gehen headers Funktion. Da jede Route einen Header haben kann, wird zur Vermeidung von Konflikten mit verschachtelten Routen die tiefste Route – oder die URL mit den meisten Schrägstrichen (/) - Gewinnt. Sie können die Header auch durchlaufen lassen, actionHeaders, loaderHeaders, oder parentHeaders

export function headers({
  actionHeaders,
  loaderHeaders,
  parentHeaders,
}) {
  return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}

Metafunktion

Diese Funktion setzt die Meta-Tags für das HTML-Dokument. Einer ist in der eingestellt root.tsx Datei standardmäßig, aber sie können für jede Route aktualisiert werden.

export function meta() {
  return {
    title: "Your page title",
    description: "A new description for each route.",
  };
};

Linkfunktion

HTML link Elemente leben in der <head> Tag eines HTML-Dokuments und importieren unter anderem CSS. Das links Funktion, nicht zu verwechseln mit der <Link /> Komponente, ermöglicht es Ihnen, nur Dinge in die Routen zu importieren, die sie benötigen. So können CSS-Dateien beispielsweise eingeschränkt und nur auf den Routen importiert werden, die diese spezifischen Dateien benötigen. Das link Elemente werden von a zurückgegeben links() fungieren als Array von Objekten und können entweder a HtmlLinkDescriptor von dem link API oder eine PageLinkDescriptor die die Daten für eine Seite vorab abrufen können.

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" }
  ]
}

Verbindung zwischen Routen

Remix stellt eine Komponente bereit, mit der Sie zwischen den verschiedenen Routen in Ihrer App mit dem Namen wechseln können <Link/>. Um clientseitiges Routing zu erhalten, verwenden Sie die <Link to="">Name</Link> Komponente statt <a href="">Name</a>dem „Vermischten Geschmack“. Seine <Link /> Komponente nimmt auch eine Stütze von prefetch mit akzeptiert none standardmäßig, intent um die Daten vorab abzurufen, wenn Remix erkennt, dass der Benutzer den Link bewegt oder fokussiert, oder render die die Daten der Route abrufen, sobald der Link gerendert wird.

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ächste Schritte

Jetzt kennen Sie die Grundlagen von Remix und sind bereit, mit dem eigentlichen Erstellen von Anwendungen zu beginnen, richtig? Remix bietet a Witze-App und einem Blog-Tutorial um Ihnen bei der Umsetzung dieses Grundwissens zu helfen. Sie können auch ganz von vorne anfangen und eine brandneue Remix-App erstellen. Oder wenn Sie bereit sind, einzutauchen, geben Sie die K-Pop-Stapel ein Versuch. Ich habe meine Zeit bei Remix sehr genossen und liebe den Fokus auf Webstandards und die Rückbesinnung auf die Grundlagen. Jetzt sind Sie an der Reihe, mit dem Erstellen zu beginnen!