Vous avez probablement entendu beaucoup de battage médiatique autour de l'un des nouveaux enfants du bloc framework, Remix. Il peut être surprenant qu'il ait fait ses débuts en 2019, mais il n'était à l'origine disponible qu'en tant que cadre premium basé sur un abonnement. En 2021, les fondateurs ont levé des fonds de démarrage et ouvert le framework pour permettre aux utilisateurs de commencer à utiliser Remix gratuitement. Les vannes se sont ouvertes et tout le monde semble en parler, bon ou mauvais. Plongeons-nous et regardons quelques-unes des bases de Remix.
Remix est un premier framework JavaScript de serveur "edge". Il utilise React, au moins pour l'instant, pour le front-end et donne la priorité au rendu côté serveur de l'application sur le bord. Les plates-formes peuvent prendre le code côté serveur et l'exécuter comme fonctions sans serveur ou en périphérie le rendant moins cher qu'un serveur traditionnel et le rapprochant de vos utilisateurs. Les fondateurs de Remix aiment l'appeler un framework "center stack" car il adapte les requêtes et les réponses faites entre le serveur et le client pour la plate-forme sur laquelle il est exécuté.
Déployer Remix
Parce que Remix nécessite un serveur, parlons de la façon dont vous pouvez le déployer. Remix ne fournit pas le serveur lui-même - vous apportez le serveur - lui permettant d'être exécuté dans n'importe quel Node.js or Deno l'environnement, y compris Netlifier Edge ainsi que Plate-forme d'applications de DigitalOcean. Remix lui-même est un compilateur, un programme qui traduit les requêtes pour la plate-forme sur laquelle il s'exécute. Ce procédé utilise construire pour créer des gestionnaires pour les requêtes au serveur. Les gestionnaires HTTP qu'il utilise sont construits sur le API de récupération Web et sont exécutés sur le serveur par s'adapter pour la plate-forme sur laquelle ils seront déployés.
Piles de remix
Les piles de remix sont des projets qui ont des outils communs qui sont préconfigurés pour vous. Il y a trois piles officielles qui sont maintenus par l'équipe Remix et ils portent tous le nom de genres musicaux. Il existe également un certain nombre de piles de remix communautaires, y compris le Pile de K-Pop créé par l'équipe de modèles de Netlify. Cette pile est une centrale électrique et comprend un Supbase base de données et authentification, Tailwind pour le style, Cyprès tests de bout en bout, Plus jolie formatage du code, ESLint peluches, et Manuscrit typage statique. Consultez le post de Tara Manicsic sur le déploiement de la pile K-Pop.
Mise en cache des itinéraires
Même si Remix nécessite un serveur, il peut toujours profiter de la pile de confiture avantages par la mise en cache des routes. Un site statique ou génération de site statique (SSG) se produit lorsque tout votre contenu est rendu au moment de la construction et reste statique jusqu'à une autre reconstruction. Le contenu est pré-généré et peut être mis sur un CDN. Cela offre de nombreux avantages et des chargements de site rapides pour l'utilisateur final. Cependant, Remix ne fait pas de SSG typique comme d'autres frameworks React populaires, y compris Next.js et Gatsby. Pour profiter de certains des avantages de SSG, vous pouvez utiliser le En-tête HTTP Cache-Control dans un remix fonction d'en-tête pour mettre en cache une route particulière ou directement dans le root.tsx fichier.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Ajoutez ensuite votre fonction d'en-tête Où vous le voulez. Cela met en cache pendant une heure :
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Routage de remixage
De nombreux frameworks se sont penchés sur le routage basé sur les systèmes de fichiers. Il s'agit d'une technique dans laquelle un dossier désigné est utilisé pour définir des itinéraires pour votre application. Ils ont généralement une syntaxe spéciale pour déclarer des routes dynamiques et des points de terminaison. La plus grande différence actuellement entre Remix et d'autres frameworks populaires est la possibilité d'utiliser routage imbriqué.
Chaque application Remix commence par le root.tsx dossier. C'est là que toute la base de l'application est rendue. Vous trouverez ici une partie de la mise en page HTML courante, comme le <html> tag, le <head> balise, puis la <body> tag avec les composants nécessaires pour rendre l'application. La seule chose à souligner ici est la <Scripts> le composant est ce qui active JavaScript sur le site ; certaines choses fonctionneront sans cela, mais pas tout. La root.tsx le fichier agit comme une mise en page parent pour tout ce qui se trouve à l'intérieur du routes répertoire, tout dans les routes est rendu là où le <Outlet/> le composant est dans root.tsx. C'est la base du routage imbriqué dans Remix.
Routage imbriqué
Non seulement Remix a été fondé par une partie de l'équipe de Routeur React, ça aussi Usages Routeur de réaction. En fait, ils sont ramener certaines des bonnes choses à propos de Remix à React Router. Un problème complexe que les mainteneurs de Next.js et SvelteKit tentent de résoudre en ce moment est le routage imbriqué.
Le routage imbriqué est différent du routage traditionnel. Là où un nouvel itinéraire conduirait un utilisateur vers une nouvelle page, chaque itinéraire imbriqué est une section distincte de la même page. Il permet de séparer les préoccupations en gardant la logique métier associée uniquement aux fichiers qui en ont besoin. Remix est capable de gérer les erreurs localisées uniquement dans la section de la page où se trouve la route imbriquée. Les autres itinéraires de la page sont toujours utilisables et l'itinéraire qui s'est rompu peut fournir un contexte pertinent à l'erreur sans que la page entière ne se bloque.
Remix le fait lorsqu'un fichier racine dans app/routes porte le même nom qu'un répertoire de fichiers qui se chargeront à l'intérieur du fichier de base. Le fichier racine devient un disposition pour les fichiers du répertoire à l'aide d'un <Outlet /> composant pour indiquer à Remix où charger les autres routes.
Composant de sortie
La <Outlet /> Le composant est un signal à Remix pour savoir où il doit rendre le contenu des itinéraires imbriqués. Il est placé dans le fichier à la racine du app/routes répertoire portant le même nom que les routes imbriquées. Le code suivant va dans un app/routes/about.tsx fichier et comprend la sortie pour les fichiers à l'intérieur app/routes/about dossier:
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 />
</>
)
}Structure du dossier
Tout fichier dans le app/routes/ répertoire devient une route à l'URL de son nom. Un répertoire peut également être ajouté avec un index.tsx fichier.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxSi une route a le même nom qu'un répertoire, le fichier nommé devient un fichier de mise en page pour les fichiers à l'intérieur du répertoire et le fichier de mise en page a besoin d'un Composant de sortie pour y placer la route imbriquée.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxLes mises en page peuvent également être créées en les préfixant d'un double trait de soulignement (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about rendra encore le app/routes/about.tsx fichier, mais rendra également tout ce qui se trouve dans app/routes/about/index.tsx où le Composant de sortie est dans le balisage de app/routes/about.tsx.
Itinéraires dynamiques
Une route dynamique est une route qui change en fonction des informations contenues dans l'url. Il peut s'agir du nom d'un article de blog ou d'un identifiant client, mais peu importe de quoi il s'agit, $ La syntaxe ajoutée au début de la route signale à Remix qu'elle est dynamique. Le nom n'a pas d'importance autre que le $ préfixe.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxRécupérez ces données !
Étant donné que Remix rend toutes ses données sur le serveur, vous ne voyez pas beaucoup de choses qui sont devenues la norme d'une application React, comme useState() ainsi que useEffect() crochets, dans Remix. L'état côté client est moins nécessaire car il a déjà été évalué sur le serveur.
Peu importe également le type de serveur que vous utilisez pour récupérer les données. Étant donné que Remix se situe entre la requête et la réponse et la traduit de manière appropriée, vous pouvez utiliser la norme API de récupération Web. Remix le fait dans un loader fonction qui uniquement s'exécute sur le serveur et utilise le useLoaderData() crochet pour restituer les données dans le composant. Voici un exemple utilisant le Chat en tant qu'API de service pour rendre une image de chat aléatoire.
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 />
</>
)
}Paramètres d'itinéraire
Dans les routes dynamiques, les routes précédées de $ doivent pouvoir accéder au paramètre URL pour gérer les données qui doivent être rendues. La loader la fonction y a accès via un 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>
}Autres fonctions Remix
Remix a quelques autres fonctions d'assistance qui ajoutent des fonctionnalités supplémentaires aux éléments et attributs HTML normaux dans le API du module de routage. Chaque route peut définir ses propres types de fonctions.
Fonction action
An action La fonction vous permet d'ajouter des fonctionnalités supplémentaires à une action de formulaire en utilisant le Web standard API FormData.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Fonction d'en-tête
Toutes En-têtes standard HTTP peut aller dans un headers fonction. Étant donné que chaque route peut avoir un en-tête, pour éviter les conflits avec les routes imbriquées, la route la plus profonde — ou l'URL avec le plus de barres obliques (/) — gagne. Vous pouvez également faire passer les en-têtes, actionHeaders, loaderHeadersou parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Fonction méta
Cette fonction définira les balises META du document HTML. L'un est placé dans le root.tsx fichier par défaut, mais ils peuvent être mis à jour pour chaque route.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Fonction liens
HTML link les éléments vivent dans <head> balise d'un document HTML et ils importent du CSS, entre autres. La links fonction, à ne pas confondre avec la <Link /> composant, vous permet d'importer uniquement des éléments dans les itinéraires qui en ont besoin. Ainsi, par exemple, les fichiers CSS peuvent être délimités et importés uniquement sur les routes qui ont besoin de ces fichiers spécifiques. La link les éléments sont renvoyés d'un links() fonctionnent comme un tableau d'objets et peuvent être soit un HtmlLinkDescriptor du link API ou PageLinkDescriptor qui peut préextraire les données d'une page.
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" }
]
}Liaison entre les itinéraires
Remix fournit un composant pour aller entre les différentes routes de votre application appelée <Link/>. Pour obtenir le routage côté client, utilisez le <Link to="">Name</Link> composant au lieu de <a href="">Name</a>L’ <Link /> le composant prend également un accessoire de prefetch avec accepte none par défaut, intent pour prérécupérer les données si Remix détecte que l'utilisateur survole ou concentre le lien, ou render qui récupérera les données de la route dès que le lien sera rendu.
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>
);
}Prochaines étapes
Vous connaissez maintenant les bases de Remix et vous êtes prêt à commencer à créer des applications, n'est-ce pas ? Remix fournit une Application de blagues et Tutoriel du blog pour commencer à mettre en œuvre ces connaissances de base. Vous pouvez également repartir de zéro et créer une toute nouvelle application Remix. Ou si vous êtes prêt à plonger, donnez le Pile de K-Pop un essai. J'ai vraiment apprécié mon temps avec Remix et j'aime l'accent mis sur les normes Web et le ramener à l'essentiel. C'est maintenant à vous de commencer à créer !
