Probablemente hayas escuchado mucho alboroto en torno a uno de los niños más nuevos en el bloque de marcos, Remix. Puede ser sorprendente que comenzó en 2019, pero originalmente solo estaba disponible como un marco premium basado en suscripción. En 2021, los fundadores recaudaron fondos iniciales y abrieron el marco para permitir que los usuarios comenzaran a usar Remix de forma gratuita. Las compuertas se abrieron y todo el mundo parece estar hablando de ello, para bien o para mal. Profundicemos y veamos algunos de los conceptos básicos de Remix.
Remix es un primer marco de JavaScript de "borde" del servidor. Utiliza Reaccionar, por ahora, para el front-end y prioriza la representación de la aplicación en el lado del servidor en el borde. Las plataformas pueden tomar el código del lado del servidor y ejecutarlo como funciones sin servidor o perimetrales haciéndolo más económico que un servidor tradicional y acercándolo a sus usuarios. A los fundadores de Remix les gusta llamarlo un marco de trabajo de "pila central" porque adapta las solicitudes y respuestas realizadas entre el servidor y el cliente para la plataforma en la que se ejecuta.
Implementando Remix
Debido a que Remix requiere un servidor, hablemos sobre cómo puede implementarlo. Remix no proporciona el servidor en sí mismo, usted trae el servidor, lo que permite que se ejecute en cualquier Node.js or Deno medio ambiente, incluyendo borde netlify y Plataforma de aplicaciones de DigitalOcean. Remix en sí mismo es un compilador, un programa que traduce las solicitudes de la plataforma en la que se ejecuta. Este proceso utiliza esconstruir para crear controladores para las solicitudes al servidor. Los controladores HTTP que utiliza se basan en el API de búsqueda web y se ejecutan en el servidor por adaptación para la plataforma en la que se desplegarán.
pilas de remezclas
Las pilas de remezclas son proyectos que tienen algunas herramientas comunes que vienen preconfiguradas para ti. Existen tres pilas oficiales que son mantenidos por el equipo de Remix y todos tienen nombres de géneros musicales. También hay una serie de pilas de Remix de la comunidad, incluido el Pila de K-Pop creado por el equipo de plantillas de Netlify. Esta pila es una potencia e incluye un Supabase base de datos y autenticación, Tailwind para peinar, Cypress pruebas de extremo a extremo, Más bonita formato de código, ESLint pelusa, y Mecanografiado tipeo estático. Consulte la publicación de Tara Manicsic sobre la implementación de K-Pop Stack.
Rutas de almacenamiento en caché
Aunque Remix requiere un servidor, todavía puede aprovechar la pila de atasco beneficios mediante el almacenamiento en caché de rutas. Un sitio estático o generación de sitio estático (SSG) es cuando todo su contenido se procesa en el momento de la compilación y permanece estático hasta otra reconstrucción. El contenido se genera previamente y se puede poner en un CDN. Esto proporciona muchos beneficios y cargas rápidas del sitio para el usuario final. Sin embargo, Remix no hace SSG típico como otros frameworks React populares, incluidos Next.js y Gatsby. Para obtener algunos de los beneficios de SSG, puede usar el nativo Encabezado HTTP de control de caché en un remix función de encabezados almacenar en caché una ruta en particular o directamente en el root.tsx archivo.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Luego agrega tu función de encabezados donde lo quieres. Esto se almacena en caché durante una hora:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Enrutamiento de remezclas
Muchos marcos se han inclinado hacia el enrutamiento basado en sistemas de archivos. Esta es una técnica en la que se utiliza una carpeta designada para definir rutas para su aplicación. Por lo general, tienen una sintaxis especial para declarar rutas dinámicas y puntos finales. La mayor diferencia actualmente entre Remix y otros marcos populares es la capacidad de usar enrutamiento anidado.
Cada aplicación Remix comienza con el root.tsx expediente. Aquí es donde se representa toda la base de la aplicación. Aquí encontrará algunos de los diseños HTML comunes, como el etiqueta, el etiqueta, y luego la etiqueta con los componentes necesarios para renderizar la aplicación. Lo único a señalar aquí es el componente es lo que habilita JavaScript en el sitio; algunas cosas funcionarán sin él, pero no todo. los root.tsx El archivo actúa como un diseño principal para todo lo que está dentro del routes directorio, todo en rutas se representa donde el componente está en root.tsx. Esta es la base del enrutamiento anidado en Remix.
Enrutamiento anidado
Remix no solo fue fundado por parte del equipo de Reaccionar enrutador, también usos Reaccionar enrutador. De hecho, son trayendo algunas de las cosas buenas de Remix de vuelta a React Router. Un problema complejo que los mantenedores de Next.js y SvelteKit están tratando de resolver en este momento es el enrutamiento anidado.
El enrutamiento anidado es diferente al enrutamiento tradicional. Donde una nueva ruta llevaría a un usuario a una nueva página, cada ruta anidada es una sección separada de la misma página. Permite la separación de preocupaciones al mantener la lógica comercial asociada solo con los archivos que la necesitan. Remix puede manejar errores localizados solo en la sección de la página en la que se encuentra la ruta anidada. Las otras rutas en la página todavía se pueden usar y la ruta que se rompió puede proporcionar un contexto relevante para el error sin que se bloquee toda la página.
Remix hace esto cuando un archivo raíz en app/routes tiene el mismo nombre que un directorio de archivos que se cargarán dentro del archivo base. El archivo raíz se convierte en un diseño para los archivos en el directorio usando un componente para decirle a Remix dónde cargar las otras rutas.
Componente de salida
El El componente es una señal para Remix de dónde debe representar el contenido para las rutas anidadas. Se coloca en el archivo en la raíz del app/routes directorio con el mismo nombre que las rutas anidadas. El siguiente código va en un app/routes/about.tsx archivo e incluye la salida para los archivos en el interior app/routes/about carpeta:
import { Outlet } from "@remix-run/react";
export default function About() {
return (
I am the parent layout. I will be on any page inside of my named directory.
{ /* All of my children, the files in the named directory, will go here. */ }
)
}Estructura de la carpeta
Cualquier archivo en el app/routes/ El directorio se convierte en una ruta en la URL de su nombre. También se puede agregar un directorio con un index.tsx archivo.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxSi una ruta tiene el mismo nombre que un directorio, el archivo nombrado se convierte en un archivo de diseño para los archivos dentro del directorio y el archivo de diseño necesita un Componente de salida para colocar la ruta anidada.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxLos diseños también se pueden crear anteponiéndolos con un guión bajo doble (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about seguirá representando el app/routes/about.tsx archivo, pero también renderizará lo que esté en app/routes/about/index.tsx donde el Componente de salida está en el marcado de app/routes/about.tsx.
Rutas Dinámicas
Una ruta dinámica es una ruta que cambia según la información de la URL. Ese puede ser el nombre de una publicación de blog o la identificación de un cliente, pero no importa cuál sea el $ la sintaxis añadida al principio de la ruta indica a Remix que es dinámica. El nombre no importa más que el $ prefijo.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsx¡Recupera esos datos!
Dado que Remix procesa todos sus datos en el servidor, no ve muchas de las cosas que se han convertido en el estándar de una aplicación React, como useState() y useEffect() ganchos, en Remix. Hay menos necesidad de estado del lado del cliente ya que ya ha sido evaluado en el servidor.
Tampoco importa qué tipo de servidor utilice para obtener datos. Dado que Remix se encuentra entre la solicitud y la respuesta y la traduce adecuadamente, puede usar el estándar API de búsqueda web. Remix hace esto en un loader función que , solamente se ejecuta en el servidor y utiliza el useLoaderData() gancho para representar los datos en el componente. Aquí hay un ejemplo usando el Gato como API de servicio para renderizar una imagen de gato al azar.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData()
return (
)
}Parámetros de ruta
En las rutas dinámicas, las rutas con el prefijo $ necesita poder acceder al parámetro URL para manejar los datos que se deben representar. los loader función tiene acceso a estos a través de un params argumento.
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()
return The url parameter is {params.tag}.
}Otras funciones de remezcla
Remix tiene algunas otras funciones auxiliares que agregan funcionalidad adicional a los elementos y atributos HTML normales en el API del módulo de ruta. Cada ruta puede definir la suya propia de este tipo de funciones.
función de acción
An action le permite agregar funcionalidad adicional a una acción de formulario usando la web estándar 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}`);
}Función de encabezados
Alquiler y venta Encabezados estándar HTTP puede ir en un headers función. Debido a que cada ruta puede tener un encabezado, para evitar conflictos con las rutas anidadas, la ruta más profunda o la URL con la mayor cantidad de barras inclinadas (/) — gana. También puede pasar los encabezados, actionHeaders, loaderHeaderso parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Metafunción
Esta función establecerá las etiquetas meta para el documento HTML. Uno está ambientado en el root.tsx por defecto, pero se pueden actualizar para cada ruta.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Función de enlaces
HTML link elementos viven en el etiqueta de un documento HTML e importan CSS, entre otras cosas. los links función, que no debe confundirse con la componente, te permite importar solo cosas en las rutas que las necesitan. Entonces, por ejemplo, los archivos CSS pueden tener un alcance y solo importarse en las rutas que necesitan esos archivos específicos. los link los elementos se devuelven de un links() funcionar como una matriz de objetos y puede ser un HtmlLinkDescriptor del desplegable link API o un PageLinkDescriptor que puede precargar los datos de una página.
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}Enlace entre rutas
Remix proporciona un componente para ir entre las diferentes rutas en su aplicación llamado . Para obtener el enrutamiento del lado del cliente, use el Name componente en lugar de Name. componente también toma un accesorio de prefetch con acepta none por defecto, intent para precargar los datos si Remix detecta que el usuario se desplaza o enfoca el enlace, o render que obtendrá los datos de la ruta tan pronto como se represente el enlace.
import { Link } from "@remix-run/react";
export default function Nav() {
return (
);
}Próximos pasos
Ahora conoce los conceptos básicos de Remix y está listo para comenzar a crear aplicaciones, ¿verdad? Remix ofrece una aplicación de chistes y Tutorial de blog para comenzar a implementar este conocimiento básico. También puede comenzar desde cero y crear una nueva aplicación Remix. O si está listo para zambullirse, dé el Pila de K-Pop un intento. Realmente he disfrutado mi tiempo con Remix y me encanta el enfoque en los estándares web y volver a lo básico. ¡Ahora es tu turno de empezar a crear!
