Ви, мабуть, чули багато галасу навколо одного з найновіших дітей у фреймворку, Remix. Може бути дивно, що він почав працювати ще в 2019 році, але спочатку він був доступний лише як преміум-фреймворк на основі підписки. У 2021 році засновники залучили початкове фінансування та відкрили фреймворк, щоб користувачі могли почати використовувати Remix безкоштовно. Шлюзи відкрилися, і, здається, усі говорять про це, добре чи погано. Давайте поглибимося та розглянемо деякі основи Remix.
Remix — це перший серверний фреймворк JavaScript. Він використовує React, принаймні поки що, для інтерфейсу та надає пріоритет рендерингу програми на стороні сервера на краю. Платформи можуть взяти серверний код і запустити його як безсерверні або периферійні функції зробити його дешевшим, ніж традиційний сервер, і наблизити його до користувачів. Засновники Remix люблять називати це фреймворком «центрального стеку», оскільки він адаптує запити та відповіді, що надсилаються між сервером і клієнтом, для платформи, на якій він працює.
Розгортання реміксу
Оскільки для Remix потрібен сервер, давайте поговоримо про те, як його можна розгорнути. Remix не надає сам сервер — ви приносите сервер — дозволяючи його запускати будь-яким Node.js or Дено середовища, в т.ч Netlify Edge та Платформа додатків DigitalOcean. Сам ремікс є a компілятор, програма, яка перекладає запити для платформи, на якій вона працює. Цей процес використовує esbuild для створення обробників для запитів до сервера. Обробники HTTP, які він використовує, побудовані на API Web Fetch і запускаються на сервері пристосування їх для платформи, на якій вони будуть розгорнуті.
Стеки реміксів
Стеки реміксів — це проекти, які мають деякі загальні інструменти, попередньо налаштовані для вас. Існує три офіційні стопки які підтримує команда Remix, і всі вони названі за музичними жанрами. Існує також ряд стеків реміксів спільноти, включаючи K-Pop стек створено командою шаблонів Netlify. Цей стек є потужним і включає в себе a Супабаза база даних і аутентифікація, Вітер для стилізації, Кипарис наскрізне тестування, Гарніша форматування коду, ESLint розпушування, і TypeScript статична типізація. Ознайомтеся з дописом Тари Манічік про розгортання K-Pop Stack.
Кешування маршрутів
Незважаючи на те, що для 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 на сайті; деякі речі працюватимуть без нього, але не все. The root.tsx файл діє як батьківський макет для всього всередині routes каталог, все в маршрутах відображається там, де <Outlet/> компонент знаходиться в root.tsx. Це основа вкладеної маршрутизації в Remix.
Вкладена маршрутизація
Remix не лише заснувала частина команди з Маршрутизатор React, це також використовує Маршрутизатор React. Насправді вони є повернення деяких хороших речей Remix до React Router. Складною проблемою, яку зараз намагаються вирішити розробники Next.js і SvelteKit, є вкладена маршрутизація.
Вкладена маршрутизація відрізняється від традиційної маршрутизації. Там, де новий маршрут переведе користувача на нову сторінку, кожен вкладений маршрут є окремим розділом тієї самої сторінки. Це дозволяє відокремити проблеми, зберігаючи бізнес-логіку, пов’язану лише з файлами, які її потребують. Remix може обробляти помилки, локалізовані лише в тому розділі сторінки, де знаходиться вкладений маршрут. Інші маршрути на сторінці все ще можна використовувати, а маршрут, який зламався, може надати відповідний контекст для помилки без збою всієї сторінки.
Remix робить це, коли входить кореневий файл app/routes називається так само, як і каталог файлів, які будуть завантажені всередині базового файлу. Кореневий файл стає a розташування для файлів у каталозі за допомогою an <Outlet /> компонент, щоб вказати Remix, де завантажувати інші маршрути.
Вихідний компонент
Команда <Outlet /> Компонент є сигналом Remix про те, де він має відтворювати вміст для вкладених маршрутів. Він розміщений у файлі в корені app/routes каталог з тим самим ім'ям, що й вкладені маршрути. Наступний код містить a 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-адресою свого імені. Каталог також можна додати за допомогою an 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 Web Fetch. Remix робить це в a loader функція що тільки працює на сервері та використовує useLoaderData() гачок для відтворення даних у компоненті. Ось приклад використання API Cat as a Service щоб відтворити випадкове зображення кота.
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-адреси для обробки цих даних, які мають бути відображені. The loader функція має доступ до них через a 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
Remix має кілька інших допоміжних функцій, які додають додаткові функції до звичайних елементів і атрибутів HTML у API модуля маршрутизації. Кожен маршрут може визначати власну з цих типів функцій.
Функція дії
An action дозволяє додавати додаткові функції до дії форми за допомогою стандартного Інтернету 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}`);
}Функція заголовків
будь-який Стандартні заголовки HTTP може піти в a 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, серед іншого. The links функція, не плутати з <Link /> компонент, дозволяє імпортувати лише ті речі, які їх потребують. Так, наприклад, для файлів CSS можна визначити область дії та імпортувати їх лише за маршрутами, які потребують цих конкретних файлів. The link елементи повертаються з a links() функціонувати як масив об’єктів і може бути або a 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 і готові почати фактично створювати програми, чи не так? Ремікс забезпечує a Додаток для жартів і Навчальний посібник із блогу щоб ви почали застосовувати ці базові знання. Ви також можете почати з нуля та створити нову програму Remix. Або, якщо ви готові зануритися, дайте K-Pop стек спробувати. Мені дуже сподобався час із Remix, мені подобається зосередитися на веб-стандартах і повернути їх до основ. Тепер ваша черга почати творити!
