Вы, наверное, слышали много шумихи вокруг одного из самых новых детей в блоке фреймворка, Remix. Может показаться удивительным, что он был запущен еще в 2019 году, но изначально он был доступен только в виде премиум-фреймворка на основе подписки. В 2021 году основатели привлекли начальное финансирование и открыли исходный код платформы, чтобы пользователи могли начать использовать Remix бесплатно. Шлюзы открылись, и все, кажется, говорят об этом, хорошо это или плохо. Давайте углубимся и рассмотрим некоторые основы Remix.
Remix — это первый серверный JavaScript-фреймворк. Он использует React, по крайней мере на данный момент, для внешнего интерфейса и отдает приоритет рендерингу приложения на стороне сервера. на краю. Платформы могут брать серверный код и запускать его как бессерверные или пограничные функции сделать его дешевле, чем традиционный сервер, и сделать его ближе к вашим пользователям. Основатели Remix любят называть его фреймворком «центрального стека», потому что он адаптирует запросы и ответы между сервером и клиентом для платформы, на которой он работает.
Развертывание ремикса
Поскольку для Remix требуется сервер, давайте поговорим о том, как его можно развернуть. Remix не предоставляет сам сервер — вы приносите сервер — позволяя запускать его в любом Node.js or Deno окружающая среда, в том числе Сетевой край и Платформа приложений DigitalOcean. Ремикс сам по себе компилятор, программа, которая переводит запросы для платформы, на которой она работает. Этот процесс использует строить создать обработчики запросов к серверу. Используемые обработчики HTTP построены на API веб-выборки и запускаются на сервере адаптация их для платформы, на которой они будут развернуты.
Стеки ремиксов
Стеки ремиксов — это проекты, в которых есть некоторые общие инструменты, предварительно настроенные для вас. Есть три официальных стека которые поддерживаются командой Remix, и все они названы в честь музыкальных жанров. Существует также ряд стеков ремиксов сообщества, включая К-поп стек созданный командой шаблонов в Netlify. Этот стек является мощным и включает в себя Супабаза база данных и аутентификация, Попутный ветер для укладки, кипарис сквозное тестирование, Красивее форматирование кода, ESLint линтинг и Машинопись статическая типизация. Ознакомьтесь с постом Тары Маниксич о развертывании стека K-Pop.
Кэширование маршрутов
Несмотря на то, что для Remix требуется сервер, он все же может использовать преимущества Джемстек преимущества за счет кэширования маршрутов. Статический сайт или генерация статического сайта (SSG) — это когда весь ваш контент отображается во время сборки и остается статический до очередной переделки. Контент предварительно сгенерирован и может быть размещен на CDN. Это обеспечивает множество преимуществ и быструю загрузку сайта для конечного пользователя. Однако Remix не использует типичный SSG, как другие популярные фреймворки React, включая Next.js и Gatsby. Чтобы воспользоваться некоторыми преимуществами SSG, вы можете использовать собственный HTTP-заголовок Cache-Control в ремиксе функция заголовков для кэширования определенного маршрута или непосредственно в root.tsx .
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Затем добавьте в свой функция заголовков где вы хотите. Это кеширует на один час:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Ремикс маршрутизации
Многие фреймворки склоняются к маршрутизации на основе файловых систем. Это метод, при котором указанная папка используется для определения маршрутов для вашего приложения. Обычно они имеют специальный синтаксис для объявления динамических маршрутов и конечных точек. Самая большая разница в настоящее время между Remix и другими популярными фреймворками заключается в возможности использовать вложенная маршрутизация.
Каждое приложение Remix начинается с root.tsx файл. Здесь отображается вся база приложения. Здесь вы найдете некоторые общие макеты HTML, такие как <html> тег, <head> тег, а затем <body> тег с компонентами, необходимыми для визуализации приложения. Единственное, на что здесь следует обратить внимание, это <Scripts> компонент — это то, что включает JavaScript на сайте; некоторые вещи будут работать без него, но не все. root.tsx файл действует как родительский макет для всего внутри routes каталог, все в маршрутах отображается там, где <Outlet/> компонент находится в root.tsx. Это основа вложенной маршрутизации в Remix.
Вложенная маршрутизация
Мало того, что Remix был основан частью команды из Реактивный маршрутизатор, это также использования Реактивный маршрутизатор. На самом деле они возвращая некоторые хорошие вещи из Remix обратно в React Router. Сложная проблема, которую разработчики Next.js и SvelteKit пытаются решить прямо сейчас, — это вложенная маршрутизация.
Вложенная маршрутизация отличается от традиционной маршрутизации. Там, где новый маршрут ведет пользователя на новую страницу, каждый вложенный маршрут является отдельным разделом той же страницы. Это позволяет разделить задачи, сохраняя бизнес-логику связанной только с теми файлами, которые в ней нуждаются. Remix может обрабатывать ошибки, локализованные только в той части страницы, где находится вложенный маршрут. Другие маршруты на странице по-прежнему можно использовать, а прерванный маршрут может предоставить соответствующий контекст для ошибки без сбоя всей страницы.
Remix делает это, когда корневой файл в app/routes называется так же, как каталог файлов, которые будут загружаться внутри базового файла. Корневой файл становится макет для файлов в каталоге с помощью <Outlet /> компонент, чтобы сообщить Remix, куда загружать другие маршруты.
Выходной компонент
Ассоциация <Outlet /> Компонент — это сигнал для Remix о том, где он должен отображать контент для вложенных маршрутов. Он помещается в файл в корень app/routes каталог с тем же именем, что и вложенные маршруты. Следующий код входит в app/routes/about.tsx файл и включает выход для файлов внутри app/routes/about Папка:
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 />
</>
)
}Структура папок
Любой файл в app/routes/ каталог становится маршрутом по URL-адресу его имени. Каталог также можно добавить с помощью index.tsx .
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxЕсли маршрут имеет то же имя, что и каталог, именованный файл становится файлом макета для файлов внутри каталога, а файлу макета требуется Выходной компонент для размещения вложенного маршрута.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxМакеты также можно создавать, добавляя перед ними двойное подчеркивание (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about по-прежнему будет отображать app/routes/about.tsx файл, но также будет отображать все, что находится в app/routes/about/index.tsx где Выходной компонент есть в разметке app/routes/about.tsx.
Динамические маршруты
Динамический маршрут — это маршрут, который изменяется на основе информации в URL-адресе. Это может быть название поста в блоге или идентификатор клиента, но независимо от того, что это $ синтаксис, добавленный в начало маршрута, сигнализирует Remix о том, что он является динамическим. Имя не имеет значения, кроме $ приставка.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxПолучите эти данные!
Поскольку Remix отображает все свои данные на сервере, вы не видите многих вещей, которые стали стандартом приложения React, например useState() и useEffect() крючки, в ремиксе. В состоянии на стороне клиента меньше необходимости, поскольку оно уже было оценено на сервере.
Также не имеет значения, какой тип сервера вы используете для получения данных. Поскольку Remix находится между запросом и ответом и переводит его соответствующим образом, вы можете использовать стандартный API веб-выборки. Ремикс делает это в loader функция, которая только работает на сервере и использует useLoaderData() хук для рендеринга данных в компоненте. Вот пример с использованием Кошка как сервисный API для визуализации случайного изображения кошки.
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 />
</>
)
}Параметры маршрута
В динамических маршрутах маршруты с префиксом $ необходимо иметь доступ к параметру URL для обработки данных, которые должны быть отображены. loader функция имеет доступ к ним через params аргумент.
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>
}Другие функции ремикса
Remix имеет несколько других вспомогательных функций, которые добавляют дополнительные функциональные возможности к обычным элементам и атрибутам HTML в API модуля маршрута. Каждый маршрут может определять свои собственные функции этих типов.
Функция действия
An action Функция позволяет добавить дополнительную функциональность к действию формы с помощью стандартного веб-интерфейса. API данных формы.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Функция заголовков
Любые Стандартные заголовки HTTP может пойти в headers функция. Поскольку у каждого маршрута может быть заголовок, чтобы избежать конфликтов с вложенными маршрутами, самым глубоким маршрутом или URL-адресом с наибольшим количеством косых черт (/) — выигрывает. Вы также можете получить пропущенные заголовки, actionHeaders, loaderHeadersили parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Мета функция
Эта функция установит метатеги для документа HTML. Один установлен в root.tsx файл по умолчанию, но их можно обновлять для каждого маршрута.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Функция ссылок
HTML link элементы живут в <head> тег HTML-документа, и они, среди прочего, импортируют CSS. links функцию, не путать с <Link /> компонент, позволяет вам импортировать вещи только в те маршруты, которые в них нуждаются. Так, например, файлы CSS можно ограничивать и импортировать только на те маршруты, которым нужны эти конкретные файлы. link элементы возвращаются из links() функционировать как массив объектов и может быть либо HtmlLinkDescriptor из link API или PageLinkDescriptor который может выполнять предварительную выборку данных для страницы.
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" }
]
}Связь между маршрутами
Remix предоставляет компонент для перехода между различными маршрутами в вашем приложении, который называется <Link/>. Чтобы получить маршрутизацию на стороне клиента, используйте <Link to="">Name</Link> компонент вместо <a href="">Name</a>, <Link /> компонент также принимает опору prefetch с принимает none по умолчанию, intent для предварительной выборки данных, если Remix обнаружит, что пользователь наводит курсор или фокусирует ссылку, или render который будет извлекать данные маршрута, как только ссылка будет отображаться.
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>
);
}Следующие шаги
Теперь вы знаете основы Remix и готовы приступить к созданию приложений, верно? Ремикс предоставляет Приложение Шутки и еще один Блог учебник чтобы вы начали применять эти базовые знания. Вы также можете начать с нуля и создать совершенно новое приложение Remix. Или, если вы готовы погрузиться, дайте К-поп стек попытка. Мне очень понравилось время, проведенное с Remix, и мне нравится фокусироваться на веб-стандартах и возвращать их к основам. Теперь ваша очередь начать творить!
