Если ты хоть раз раздражался от того, что Next.js в проде тащит с собой тонны клиентского JS, который не всегда нужен, то rsc-kit — это попытка с этим бороться. Я тут залез в этот проект, который строит Next.js-подобный React-фреймворк на базе Vite с упором на Server Components и нулевой клиентский JS по умолчанию. Расскажу, что там внутри, куда это реально полезно и где стоит быть осторожным.
Что такое rsc-kit и зачем он нужен?
rsc-kit — это не попытка создать очередной Next.js-клон. Это скорее переосмысление концепций Next.js на новом движке — Vite, с фокусом на строгий билд и минимальный клиентский JavaScript. В основе лежит известная app/ структура с поддержкой layouts, dynamic routes, параллельных и перехватывающих маршрутов, серверных React-компонентов (Server Components) и server actions.
Ключевая идея: в приложении по умолчанию нет клиентского JS, пока ты явно не напишешь "use client". Это значит, что если в роутах нет client-компонентов и серверных экшенов, в итоговый бандл не попадёт ни строчки React runtime на клиенте.
На практике это помогает делать сверхлёгкие страницы, которые быстро грузятся и почти не нагружают процессор пользователя — особенно на мобильных устройствах. Landing rsc-kit.dev, например, набирает 100 баллов в PageSpeed как на десктопе, так и на мобилках.
Архитектура и особенности
Next-style routing на Vite
rsc-kit сохраняет привычный app/ роутинг с layout’ами и динамическими сегментами, но работает в связке с Vite, что даёт супербыструю сборку и дев-сервер. Есть поддержка parallel routes и intercepting routes, которые на уровне Next.js выглядят как продвинутые приёмы маршрутизации.
Важно, что рендеринг полностью контролируется внутри rsc-kit — у тебя есть серверный рендерер, который можно деплоить куда угодно: Bun, Node, Cloudflare Workers, Vercel, Netlify и даже Deno через Nitro. Плюс есть адаптеры под Laravel и Go — то есть backend остаётся за твоей логикой, а рендеринг отвечает за UI.
Серверные компоненты по умолчанию
Server Components — не просто модная фича, а основной кирпич rsc-kit. Они рендерятся на сервере, а клиент ничего не знает о них, пока ты не захочешь использовать интерактивность. В этом случае ты явно добавляешь "use client" и получаешь традиционный React-компонент с клиентским JS.
Мне понравился подход, когда маршруты классифицируются на статичные, частично статичные и динамические уже на этапе билда. Фреймворк даже умеет подсказывать, почему страница стала динамической и что можно исправить, чтобы вернуть статику — это реально помогает оптимизировать производительность.
Навигация и обновления UI на уровне агента
Навигация тут не просто переход по ссылкам. Ссылки префетчат данные при наведении (или появлении в viewport), payload декодируется заранее, а следующая страница рендерится в скрытом режиме. При этом страницы не размонтируются при переходах назад — так можно сохранить введённые данные в формах.
Для мутаций используется интересный API: section("orders") + revalidate("orders"). Это значит, что при обновлении данных перерисовывается только часть UI, связанная с заказами, и обновлённый интерфейс отправляется вместе с ответом сервера. Одним запросом — таргетированное обновление — звучит как мечта, особенно для сложных интерфейсов.
Agent-native workflow и MCP
rsc-kit — не просто фреймворк, а полноценная среда с поддержкой agentic development. Каждый проект содержит AGENTS.md и инструментарий MCP, который анализирует билд, маршруты, причины динамичности, тяжёлые роуты и поведение пререндеринга.
Что круто — тесты работают напрямую с Request → Response хендлером без портов и браузеров, что ускоряет разработку и делает тесты реальными, а не моковыми.
Это направление vibe coding, когда инструменты не просто помогают тебе писать код, а сами участвуют в цикле разработки: анализируют, предлагают правки, фиксируют баги.
Практический пример: как начать и что получить
Чтобы запустить новый проект на rsc-kit, достаточно:
bun create rsc-kit@latest my-app
cd my-app
bun dev
Внутри ты получаешь привычный app/ роутинг, layouts и возможность писать Server Components. Вот базовый пример Server Component без клиентского JS:
// app/page.jsx
export default function Page() {
return <h1>Hello from Server Component, zero client JS!</h1>
}
Если добавить интерактивность, нужно:
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
Только после "use client" в бандл попадёт React runtime и код для клиента.
Кому это реально может помочь
- Тем, кто устал от избыточного клиентского JS в Next.js и хочет максимально выжать производительность.
- Командам, которые запускают проекты на Vite и хотят использовать знакомую app/ структуру с Server Components.
- Разработчикам, которым важна строгая классификация маршрутов и предупреждения о проблемах в билде.
- Тем, кто хочет экспериментировать с agentic workflows и vibe coding, чтобы интегрировать разработку, билд и тестирование в единый цикл.
Где стоит быть осторожным
- rsc-kit ещё молодой проект, и экосистема не такая богатая, как у Next.js. Многие плагины и интеграции могут не работать или требовать кастомизации.
- Если твой проект сильно зависит от client-side взаимодействия и сложных state management решений, придётся явно помечать компоненты “use client” и учитывать размер клиента.
- Несмотря на адаптеры, интеграция с backend может требовать времени и понимания nitro-рендера.
- Agentic workflow — классная идея, но она добавляет уровень сложности, который не всегда нужен небольшим командам.
Итог
rsc-kit — это интересный экспериментальный фреймворк с сильным акцентом на минимальный клиентский JS и строгий билд, работающий на Vite. Он хорошо подходит для проектов, где важна скорость старта и высокая производительность без лишнего фронтенд-булкета.
Если ты любишь Next.js-структуру и хочешь попробовать vibe coding с agentic процессом, стоит дать rsc-kit шанс. Впрочем, не жди от него идеального опыта — придётся привыкать и вливать свои знания в пока ещё молодую экосистему.
Для меня это пример того, как можно переосмыслять проверенные модели с новым стэком, не копируя Next.js напрямую, а создавая что-то более лёгкое и строгое. Если работаешь с React и хочешь прокачать свои навыки в server-centric подходах — посмотри rsc-kit, возможно, найдёшь там свои фишки.
Попробуй сам: Cursor — AI-редактор для разработчиков.
Источник: https://www.reddit.com/r/reactjs/comments/1wna4px/i_built_a_nextjsstyle_react_framework_on_vite/