Почему стоит обратить внимание на Remix Remix – это новый фул | Заметки про React

Почему стоит обратить внимание на Remix

Remix – это новый фулстек фреймворк на React. Фреймворк из коробки поддерживает технологию прогрессивного улучшения, что гарантирует работу практически во всех браузерах.

При разработке на Remix необходимо соблюдать определенные условности, начиная от структуры проекта и наименования файлов до экспортов внутри модуля.

Каждый модуль экспортирует API, которое будет использовать Remix при компиляции проекта. Экспортируемая переменная loader определяет функцию, которая будет вызываться на сервере перед рендерингом компонента, чтобы подготовить данные. Получить эти данные в компоненте можно через хук useLoaderData. Основной способ передачи информации с клиента на сервер – формы. Для обработки форм в модуле экспортируется переменная action. Внутри функции action можно валидировать поля, обращаться к базе данных и возвращать ответ. Ответ на стороне клиента можно получить через хук useActionData, в котором, например, могут приходить ошибки валидации. Экспорт default – это сам компонент.

Remix состоит из компилятора, серверного HTTP обработчика, серверного фреймворка и браузерного фреймворка. С помощью компилятора каждый модуль превращается в браузерный бандл и в бандл для серверного HTTP обработчика. Серверные HTTP обработчики позволяют запускать сервер как на Node.js серверах, так и на serverless серверах, например, Cloudflare Workers. Серверный фреймворк позволяет для каждого роута добавить функцию подготовки данных loader и функцию обработки формы action. Браузерный фреймворк позволяет работать приложению как SPA, дает возможность использовать хуки для взаимодействия с сервером, а также предзагружает ресурсы для страниц сайта.

Пример Remix модуля:

// routes/todos.js
import { redirect, Form } from "remix";

export async function loader() {
return fakeGetTodos();
}

export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title")
});
return redirect(`/todos/${todo.id}`);
}

export default function Todos() {
const data = useLoaderData();
return (

);
}


https://remix.run/docs/en/v1

https://blog.plasmic.app/posts/why-remix-is-worth-your-attention/