Prawdopodobnie słyszałeś dużo szumu wokół jednego z najnowszych dzieciaków w bloku frameworkowym, Remix. Może dziwić, że wystartował w 2019 roku, ale pierwotnie był dostępny tylko jako platforma premium oparta na subskrypcji. W 2021 r. założyciele zebrali fundusze zalążkowe i udostępnili platformę open source, aby umożliwić użytkownikom korzystanie z Remix za darmo. Otworzyły się śluzy i wydaje się, że wszyscy o tym mówią, dobrze czy źle. Zanurzmy się i przyjrzyjmy niektórym podstawom Remiksu.
Remix to pierwsza platforma JavaScript „na krawędzi” serwera. Wykorzystuje React, przynajmniej na razie, dla frontonu i priorytetyzuje renderowanie aplikacji po stronie serwera na krawędzi. Platformy mogą pobrać kod po stronie serwera i uruchomić go jako funkcje bezserwerowe lub brzegowe czyniąc go tańszym niż tradycyjny serwer i przybliżając go użytkownikom. Założyciele Remix lubią nazywać to frameworkiem „center stack”, ponieważ dostosowuje żądania i odpowiedzi wysyłane między serwerem a klientem dla platformy, na której jest uruchomiony.
Wdrażanie remiksu
Ponieważ Remix wymaga serwera, porozmawiajmy o tym, jak go wdrożyć. Remix nie zapewnia samego serwera — Ty wprowadzasz serwer — co pozwala na uruchomienie go w dowolnym node.js or Deno środowisko, w tym Netlifikuj krawędź i Platforma aplikacji DigitalOcean. Sam remiks jest kompilator, program, który tłumaczy żądania dla platformy, na której działa. Ten proces wykorzystuje esbuild do tworzenia programów obsługi żądań do serwera. Programy obsługi HTTP, których używa, są zbudowane na Internetowy interfejs API pobierania i są prowadzone na serwerze przez adaptacja je dla platformy, na której zostaną wdrożone.
Remiksuj stosy
Stosy Remix to projekty, które mają kilka typowych narzędzi, które są wstępnie skonfigurowane dla Ciebie. Są trzy oficjalne stosy które są utrzymywane przez zespół Remix i wszystkie noszą nazwy gatunków muzycznych. Istnieje również wiele stosów społecznościowych Remix, w tym Stos K-popu stworzony przez zespół szablonów w Netlify. Ten stos to potęga i zawiera Subabaza baza danych i uwierzytelnianie, Tailwind do stylizacji, Cyprys kompleksowe testowanie, Ładniejsze formatowanie kodu, ESLint szarpie i TYPESCRIPT pisanie statyczne. Sprawdź wpis Tary Manicsic na temat wdrażania stosu K-Pop.
Trasy buforowania
Mimo że Remix wymaga serwera, nadal może korzystać z stos dżemów korzyści dzięki buforowaniu tras. Witryna statyczna lub generowanie witryny statycznej (SSG) ma miejsce, gdy cała zawartość jest renderowana w czasie kompilacji i pozostaje statyczny aż do kolejnej przebudowy. Treść jest wstępnie generowana i może być umieszczona w sieci CDN. Zapewnia to wiele korzyści i szybkie ładowanie witryny dla użytkownika końcowego. Jednak Remix nie robi typowego SSG, jak inne popularne frameworki React, w tym Next.js i Gatsby. Aby uzyskać niektóre z zalet SSG, możesz użyć natywnego Nagłówek HTTP Cache-Control w remiksie funkcja nagłówków buforować konkretną trasę lub bezpośrednio w root.tsx plik.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Następnie dodaj swoje funkcja nagłówków gdzie chcesz. To buforuje przez godzinę:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Remiksowanie routingu
Wiele frameworków oparło się na routingu opartym na systemach plików. Jest to technika, w której wyznaczony folder służy do definiowania tras dla aplikacji. Zwykle mają specjalną składnię do deklarowania dynamicznych tras i punktów końcowych. Największą obecnie różnicą między Remixem a innymi popularnymi frameworkami jest możliwość korzystania routing zagnieżdżony.
Każda aplikacja Remix zaczyna się od root.tsx plik. Tutaj renderowana jest cała baza aplikacji. Znajdziesz tutaj niektóre popularne układy HTML, takie jak <html> tag, <head> tag, a następnie <body> tag z komponentami potrzebnymi do renderowania aplikacji. Jedyną rzeczą, na którą należy zwrócić uwagę, jest <Scripts> komponent jest tym, co umożliwia obsługę JavaScript na stronie; niektóre rzeczy będą działać bez tego, ale nie wszystko. The root.tsx plik działa jako układ nadrzędny dla wszystkiego wewnątrz routes katalog, wszystko w trasach jest renderowane tam, gdzie <Outlet/> komponent jest w root.tsx. To jest podstawa routingu zagnieżdżonego w Remix.
Routing zagnieżdżony
Remix został założony nie tylko przez część zespołu z Reaguj na router, to także zastosowania Reaguj na router. W rzeczywistości są przywracanie niektórych dobrych rzeczy związanych z Remix z powrotem do React Router. Złożonym problemem, który obecnie próbują rozwiązać opiekunowie Next.js i SvelteKit, jest routing zagnieżdżony.
Routing zagnieżdżony różni się od tradycyjnego routingu. Tam, gdzie nowa trasa prowadziłaby użytkownika do nowej strony, każda zagnieżdżona trasa jest oddzielną sekcją tej samej strony. Pozwala na oddzielenie problemów poprzez zachowanie logiki biznesowej powiązanej tylko z plikami, które tego potrzebują. Remix jest w stanie obsłużyć błędy zlokalizowane tylko w sekcji strony, w której znajduje się zagnieżdżona trasa. Inne trasy na stronie są nadal dostępne, a przerwana trasa może zapewnić odpowiedni kontekst błędu bez awarii całej strony.
Remix robi to, gdy plik główny w app/routes ma taką samą nazwę jak katalog plików, które zostaną załadowane do pliku bazowego. Plik główny staje się układ dla plików w katalogu za pomocą <Outlet /> komponent, aby poinformować Remix, gdzie załadować inne trasy.
Komponent wylotowy
Połączenia <Outlet /> Component jest sygnałem dla Remixa, gdzie powinien renderować zawartość dla zagnieżdżonych tras. Jest umieszczany w pliku w katalogu głównym app/routes katalog o tej samej nazwie co trasy zagnieżdżone. Poniższy kod wchodzi w a app/routes/about.tsx plik i zawiera ujście dla plików w środku app/routes/about folder:
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 />
</>
)
}Struktura folderów
Dowolny plik w app/routes/ katalog staje się trasą pod adresem URL swojej nazwy. Katalog można również dodać za pomocą index.tsx plik.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxJeśli trasa ma taką samą nazwę jak katalog, nazwany plik staje się plikiem układu dla plików znajdujących się w katalogu, a plik układu wymaga Komponent wylotowy aby umieścić zagnieżdżoną trasę.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxUkłady można również tworzyć, poprzedzając je podwójnym podkreśleniem (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about nadal będzie renderować app/routes/about.tsx plik, ale wyrenderuje również to, co jest w app/routes/about/index.tsx gdzie Komponent wylotowy jest w znacznikach app/routes/about.tsx.
Dynamiczne trasy
Trasa dynamiczna to trasa, która zmienia się na podstawie informacji w adresie URL. Może to być nazwa posta na blogu lub identyfikator klienta, ale bez względu na to, co to jest $ składnia dodana na początku trasy sygnalizuje Remixowi, że jest dynamiczna. Nazwa nie ma znaczenia, poza tym $ prefiks.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxPobierz te dane!
Ponieważ Remix renderuje wszystkie swoje dane na serwerze, nie widzisz wielu rzeczy, które stały się standardem aplikacji React, takich jak useState() i useEffect() haki, w Remixie. Potrzeba stanu po stronie klienta jest mniejsza, ponieważ został on już oceniony na serwerze.
Nie ma również znaczenia, jakiego typu serwera używasz do pobierania danych. Ponieważ Remix znajduje się między żądaniem a odpowiedzią i odpowiednio je tłumaczy, możesz użyć standardu Internetowy interfejs API pobierania. Remix robi to w loader funkcja, która tylko działa na serwerze i używa useLoaderData() zaczep do renderowania danych w komponencie. Oto przykład przy użyciu Kot jako interfejs API usługi aby renderować losowy obraz kota.
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 />
</>
)
}Parametry trasy
W trasach dynamicznych trasy z prefiksem $ musisz mieć dostęp do parametru adresu URL, aby obsłużyć dane, które powinny być renderowane. The loader funkcja ma do nich dostęp poprzez params argumenty.
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>
}Inne funkcje Remiksu
Remix ma kilka innych funkcji pomocniczych, które dodają dodatkową funkcjonalność do normalnych elementów HTML i atrybutów w API modułu tras. Każda trasa może zdefiniować własne tego typu funkcje.
Funkcja działania
An action funkcja umożliwia dodanie dodatkowej funkcjonalności do akcji formularza za pomocą standardowej strony internetowej Interfejs API formularzy danych.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Funkcja nagłówków
Każdy Standardowe nagłówki HTTP może wejść w headers funkcjonować. Ponieważ każda trasa może mieć nagłówek, aby uniknąć konfliktów z trasami zagnieżdżonymi, najgłębszą trasą — lub adresem URL z największą liczbą ukośników (/) — wygrywa. Możesz także przekazywać nagłówki, actionHeaders, loaderHeaderslub parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Funkcja meta
Ta funkcja ustawi metatagi dla dokumentu HTML. Jeden jest ustawiony w root.tsx domyślnie, ale można je aktualizować dla każdej trasy.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Funkcja linków
HTML link żywioły żyją w <head> tagu dokumentu HTML i importują między innymi CSS. The links funkcja, nie mylić z <Link /> składnik, pozwala importować tylko rzeczy w trasach, które ich potrzebują. Na przykład pliki CSS mogą być objęte zakresem i importowane tylko na trasach, które wymagają tych określonych plików. The link elementy są zwracane z a links() funkcjonować jako tablica obiektów i może być albo HtmlLinkDescriptor z link API lub PageLinkDescriptor które mogą wstępnie pobrać dane dla strony.
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" }
]
}Łączenie między trasami
Remix zapewnia komponent do przechodzenia między różnymi trasami w Twojej aplikacji o nazwie <Link/>. Aby uzyskać routing po stronie klienta, użyj <Link to="">Name</Link> komponent zamiast <a href="">Name</a>, <Link /> komponent również bierze podpórkę prefetch z akceptuje none domyślnie, intent aby pobrać dane z wyprzedzeniem, jeśli Remix wykryje, że użytkownik unosi się lub skupia łącze, lub render który pobierze dane trasy zaraz po wyrenderowaniu łącza.
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>
);
}Następne kroki
Teraz znasz już podstawy Remix i jesteś gotowy do rozpoczęcia tworzenia aplikacji, prawda? Remix zapewnia Aplikacja Żarty oraz Samouczek bloga aby rozpocząć wdrażanie tej podstawowej wiedzy. Możesz także zacząć od zera i stworzyć zupełnie nową aplikację Remix. Lub jeśli jesteś gotowy do nurkowania, daj Stos K-popu próba. Naprawdę podobał mi się czas spędzony z Remix i uwielbiam skupiać się na standardach internetowych i przywracać je do podstaw. Teraz Twoja kolej na tworzenie!
