Rakkas 0.6: современный React-фреймворк

💃 Rakkas, передовой фреймворк React на базе Vite, только что выпустил версию 0.6.0. Первый релиз с декабря, это самое большое и наименее обратно совместимое обновление на данный момент. Но мы считаем, что количество и качество новых функций оправдывает количество изменений. Посмотрите, согласны ли вы.

React 18

Rakkas 0.6 был переработан с нуля, чтобы быть совместимым с React 18. Он поддерживает новый Concurrent Mode, Streaming SSR и Suspense для получения данных.

Потоковый SSR означает, что приложения Rakkas при выполнении рендеринга на стороне сервера (SSR) теперь отправляют фрагменты HTML страницы, как только они становятся доступными, вместо того, чтобы ждать, пока все будет полностью отрисовано. Таким образом, пользователь начинает видеть значимый контент как можно скорее, а не ждет перед пустым экраном. Потоковая передача SSR легко интегрируется с Suspense и новой системой сбора данных, которую мы опишем ниже.

Если вы беспокоитесь о том, что потоковое SSR может помешать SEO, то вам будет легче узнать, что в Rakkas также реализован динамический рендеринг: Он отправляет полностью отрендеренные страницы с правильными кодами состояния, HTTP-заголовками и тегами заголовков поисковым ботам, в то время как обычным браузерам передается HTML. В любом случае, вы можете отказаться от потоковой передачи данных на глобальной основе, на основе маршрутов или запросов, не отказываясь от сбора данных на основе Suspense.

Новая система выборки данных

Вместо ориентированных на страницу функций выборки данных, которые выполнялись до того, как страница была отрисована («fetch-then-render»), Rakkas 0.6 использует систему выборки данных на основе Suspense («render-as-you-fetch»). Новая система представлена в виде хуков useQuery и useMutation, которые реализуют только Suspense-подмножество API react-query.

Получение данных без API

Если вы знакомы с Next.js, вы знаете, насколько крута функция getServerSideProps. С его помощью вы можете разместить, скажем, код доступа к базе данных прямо рядом с компонентом страницы, не заботясь о реализации и поддержке REST/GraphQL/RPC/whatever API. Next.js ловко удаляет эту функцию и ее импорт из клиентского пакета. Во время SSR она вызывается напрямую. На клиенте Next посылает запрос на сервер вместо вызова функции.

Мы считаем, что превзошли простоту использования этого метода получения данных. Введите useServerSideQuery:

import db from "./my-db-access-lib";

export default function UserCard(props) {
    const userName = props.userName;

    const userQuery = useServerSideQuery(() => {
        if (typeof userName !== "string") {
            // This is server-side code,
            // always validate user input!
            throw new Error("Invalid request");
        }

        return db.user.findOne(userName);
    });

    return (
        <div class="card">
            <img src={userQuery.data.image} />
            <caption>{userQuery.data.fullName}</caption>
        </div>
    );
}

Это не страница, а обычный React-компонент, который можно использовать на многих страницах. В Rakkas 0.6 страницы больше не являются чем-то особенным в плане получения данных. Как и getServerSideProps, функция, передаваемая в useServerSideQuery (useSSQ для краткости), всегда выполняется на сервере: На клиенте вместо прямого вызова функции на сервер отправляется запрос. Rakkas выполняет преобразование кода, аналогичное Next, чтобы удалить функцию и ее импорты из клиентского пакета.

Тип возврата useSSQ является инференсным, поэтому, если вы используете TypeScript, вы получите завершение IDE, как и при локальном вызове функции. Еще одной приятной особенностью является то, что, в отличие от других подобных хуков для получения данных, useSSQ не возвращает состояния загрузки или ошибки. Они обрабатываются выше в дереве компонента, с помощью отступлений и границ ошибок, соответственно. Таким образом, код компонента остается чистым и сфокусированным.

Одно практическое применение useSSQ, которое может быть не сразу очевидным, — это обход ограничений CORS при вызове API сторонних разработчиков:

const result = useServerSideQuery(() =>
    fetch("https://some.cors.restricted.api.example.com").then((res) =>
        res.json(),
    ),
);

Это работает, потому что вызов fetch внутри useServerSideQuery работает на стороне сервера (Rakkas делает fetch глобально доступным для всех целей развертывания) и, как таковой, не подвержен ограничениям CORS. По сути, он создает специальный CORS-прокси.

В паре с обработчиками действий, вдохновленными Remix, или useServerSideMutation, useSSQ позволяет вам писать код так, как будто барьера сервер-клиент не существует. Но, конечно, маршруты API по-прежнему доступны, чтобы позволить вам реализовать конечные точки REST, GraphQL, RPC и т.д., к которым вы можете получить доступ с помощью useQuery и useMutation или других методов, если вы предпочитаете придерживаться традиционного получения данных.

Избегание водопадов

Хотя мы говорили, что в Rakkas 0.6 страницы и макеты больше не являются чем-то особенным в плане выборки данных, вы все равно можете использовать функцию preload, чтобы начать выборку раньше. Функции preload страницы и ее родительских макетов выполняются параллельно, чтобы избежать позднего обнаружения зависимостей данных и водопадов. preload также предоставляет возможность внедрить SEO-критичные заголовки и мета-теги в страницу даже при потоковой передаче.

Другие новые возможности

Rakkas 0.6 теперь построен на HatTip, библиотеке HTTP-сервера, которая абстрагирует различия между различными JavaScript runtimes, построенными на веб-стандартах, таких как Request, Response и потоки. Rakkas уже работает на Node, Vercel Serverless Functions, Netlify Functions и Cloudflare Workers. Интеграция с HatTip добавляет поддержку Vercel Edge и Netlify Edge. Также имеется предварительная поддержка Deno (включая Deno Deploy). Поддержка Bun находится в процессе разработки.

HatTip также позволяет интегрироваться с Express или другими совместимыми с Connect серверными фреймворками Node.js: Теперь вы можете использовать промежуточное ПО Express и маршруты в своем приложении Rakkas или создать свое приложение как промежуточное ПО Express для использования в других приложениях Express.

Новая функция защиты маршрутов позволяет вам сделать некоторые маршруты доступными только для зарегистрированных пользователей. Также среди новых возможностей — маршруты-ловушки и улучшенная обработка 404.

Заключение

Если вы впервые слышите о Rakkas, у него есть и другие интересные возможности, такие как молниеносный сервер разработки (любезно предоставленный Vite), маршрутизация файловой системы, вложенные макеты, генерация статических сайтов и многое другое.

Rakkas использует экспериментальные и/или бета-версии React и Vite. Поэтому ожидайте изменений, пока мы не выпустим версию 1.0. Но попробуйте и поделитесь своими мыслями. Добавляйтесь к нам на Github, присоединяйтесь к нашему серверу Discord и следите за обновлениями в Twitter.

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