Все рамки одинаковы? Не совсем, по словам разработчика и педагога Анкиты Кулкарни.
Kulkarni сравнил начало Tanstack, React Router V7 и Next.js, идентифицируя наилучшее использование для каждого. Она представила свои выводы на Саммит React 2025 (требуется бесплатная регистрация), которая была организована Gitnation в июне. Видео с презентацией было выпущено в конце прошлого месяца.
Что особенно интересно в ее презентации, так это то, что она не просто сравнивала рамки; Она предложила конкретные ситуации, когда каждая структура JavaScript преуспела.
Next.js
По словам Кулкарни, что делает Next.js Special, так это то, что он обеспечивает простой способ интеграции поисковой оптимизации (seo).
«Мы получаем без серверную платформу из коробки», — сказала она. «У нас есть разные механизмы извлечения данных».
Это делает его идеальным для сайтов электронной коммерции, маркетинговых сайтов, целевых страниц, мониторинга SaaS, блогов и сайтов документации, сказала она. Она добавила, что это хорошо для обслуживания большого статического контента или даже гибридного контента, что означает динамический, а также статический контент. (ПРИМЕЧАНИЕ: Многие отраслевые эксперты не согласятся с тем, что он подходит для блогов или других простых контент-сайтов из-за сложности основанных на реагировании рамках.)
По ее словам, экосистема следующей. Например, разработчики должны выучить два разных типа маршрутизаторов с помощью следующей. JS: маршрутизатор App и страницы, который является устаревшим предложением. Это также сложно с помощью действий сервера, компонентов сервера, различных поведений и версий и различными методами рендеринга. «Здесь определенно крутая кривая обучения», — сказала она.
Она отметила, что Next.js «прошел очень долгий путь» с точки зрения опыта разработчиков.
Next.js также рано восприняла компоненты React Server (RSC), «давая нам представление о том, как React Pull-Stack может выглядеть, прежде чем большинство фреймворков были готовы»,-сказала она.
Kulkarni рекомендует выбрать Next.js, когда вы:
- Хочу встроенную оптимизацию или использовать компоненты сервера (RSC).
- Нужны управления гранулированным кэшированием.
- У вас нет пользовательских сборки WebPack.
- Хочу широкого принятия и поддержки сообщества.
React Router v7
React Router v7 стал структурой, когда основные особенности ремикса были объединены в режим Rouct Router V7.
По ее словам, что выделяет его на веб -стандартах.
«Он делает объединение клиента и сервера с веб -стандартами, поэтому вы можете меньше думать о своем коде и больше о вашем продукте», — сказала она аудитории. «Всякий раз, когда вы пытаетесь Google Whate Athy — например, компонент формы — вы можете прямо зайти в документы MDN, чтобы найти, как будут выглядеть API. Они будут непосредственно опираться на веб —API, вместо того, чтобы добавлять обертку поверх компонента формы, которую делают многие другие кадры».
React Router v7, в качестве структуры, также включает в себя гибкость использования REACT Router, добавила она. Это позволяет легко создавать стандартное одностраничное приложение (SPA) приложения (SPA). По ее словам, веб-разработчик может легко перенести это и добавить рендеринг на стороне сервера, размещенную на любом сервере, добавив: «Это красота».
React Router и Tanstack Используйте Vite для системы сборки, которая невероятно быстрая, добавила она.
«Поскольку они оба используют Vite, это уже хорошее начало» для опыта разработчика, сказала она. Vite использует систему на основе плагинов, которая позволяет легко добавлять функциональность. «Вы можете думать об этом как о коробках Lego, которые вы можете выбрать и выбирать», — сказала она.
Там, где React Router может замедлить разработчиков, заключается в том, что он тесно связан с веб -стандартами, поэтому он может стать немного сложным из -за тесной связи, сказала она.
«Вы должны принимать здесь много решений, когда вы идете с React Router и в целом, это просто опыт лучше», — сказала она.
Выберите React Router v7, когда вы:
- Заботиться о прогрессивных улучшениях, веб -стандартах и союзнике (по крайней мере, в контексте реагирования).
- Хочу глубокую вложенную маршрутизацию.
- Не нужны ограничения для интеграции в облачную платформу.
Танштак старт
Tanstack Start-это каркас React с полным стеком, оснащенную маршрутизатором Tanstack и поддерживаемой экосистемой инструментов Tanstack.
«Что делает Tanstack действительно особенным, так это то, что он полностью напечатан», — сказал Кулкарни. «Я не могу вспомнить, сколько раз я менял маршруты в других рамках, и все сломается, и я не знаю много раз, что работает, а что нет».
Танстак поможет с этим, потому что он полностью напечатан, добавила она. Он также имеет изоморфные погрузчики, что означает погрузчики, которые изначально работают на сервере, а затем на клиентском навигациях на стороне клиента. Tanstack также предлагает функции сервера, что облегчает выполнение серверных вызовов, добавила она. Он поставляется с интеграцией запросов React, поэтому его можно использовать прямо из коробки.
Кулкарни обсудил построение приложения SaaS. По ее словам, для интерактивности приборной панели ей понадобится много рендеринга клиентов. Для этого Tanstack «действительно мощный и полезный».
В частности, у нее был пузырь с большим количеством интерактивности на странице.
«В этом случае, может быть, я мог бы использовать next.js или React Router, но в идеале Tanstack — лучший соперник для этого», — сказала она. «Поскольку это приложение с большим клиентом, оно будет иметь много кэширования, много изменений, которыми начал загар, просто справится».
По ее словам, для любого типа интерактивных панелей мониторинга, административных панелей и так далее, Tanstack — отличное начало.
Тем не менее, начало загара нет Идеально, если цель разработчика frontend-это сайт, получавший сервер, с нулевой JavaScript или минимальной интерактивностью на стороне клиента, или разработчик хочет структуру RSC-хотя она добавила, что поддержка RSC скоро появится.
Она также отметила, что старт Tanstack все еще в бета -версии.
«Это уже так мощно, поэтому я даже не могу представить, насколько это будет мощно после его полного выпуска», — сказала она.
Выберите Tanstack Start, когда вы:
- Уже используйте React Query/Tanstack Router.
- Иметь клиентские тяжелые приложения.
- Нужна потоковая передача + SSR без сложных абстракций.
Слайды для ее презентации доступны для бесплатного просмотра, хотя это, кажется, более старая версия презентации, потому что вместо этого Tanstack она предлагает оценку Astro.
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Loraine Lawson — ветеран -репортер, который в течение 25 лет освещал технологические проблемы от интеграции данных до безопасности. Прежде чем присоединиться к новому стеку, она работала редактором Banking Technology Site Bank Automation News. Она … читайте больше от Лорейн Лоусон
