TanStack Start лучше, чем Next.js?

MMaximilian Schwarzmüller
Computing/SoftwareInternet Technology

Transcript

00:00:00Tan Stack Start сейчас на волне хайпа,
00:00:02и возникает вопрос: стоит ли переходить с Next.js?
00:00:06Лучше ли он, чем Next.js?
00:00:08Вчера у меня была целая прямая трансляция,
00:00:11где я сравнивал эти два фреймворка и создал два приложения,
00:00:14вернее,
00:00:15одно приложение дважды — один раз с Next.js и один раз с Tan Stack Start.
00:00:19Можете посмотреть её,
00:00:21если хотите,
00:00:21но здесь я дам вам краткое резюме того,
00:00:24что отличается,
00:00:25что лучше и какой из них выбрать..
00:00:27Конечно,
00:00:28это просто моё мнение,
00:00:29очевидно,
00:00:30не объективное сравнение,
00:00:31но я поделюсь своим опытом работы с обоими и тем,
00:00:34что я думаю о Next.js и Tan Stack Start.
00:00:37Я выделил несколько критериев,
00:00:39которые хочу использовать для сравнения этих двух фреймворков,
00:00:43и вы можете добавить ещё,
00:00:44а также включить другие фреймворки.
00:00:47Я имею в виду,
00:00:48мы могли бы включить Remix,
00:00:49React Router,
00:00:50могли бы включить Nuxt для Vue,
00:00:52могли бы поговорить о SvelteKit,
00:00:54но я не буду — это видео о Next.js и Tan Stack Start,
00:00:57не потому что остальные плохие,
00:00:58а потому что именно эти два часто сравнивают.
00:01:01Для начала стоит отметить,
00:01:03что Tan Stack Start — это,
00:01:05по сути,
00:01:06просто Tan Stack Router плюс серверные возможности.
00:01:10Вы можете использовать Tan Stack Router отдельно,
00:01:13если хотите создать одностраничное приложение,
00:01:15которому не требуется серверный рендеринг и серверные функции,
00:01:19например.
00:01:19Вы можете использовать Tan Stack Router вместо React Router в вашем React-приложении на Vite,
00:01:24например.
00:01:25Tan Stack Start,
00:01:25как уже упоминалось,
00:01:26просто добавляет серверные возможности к Tan Stack Router,
00:01:29превращая его в полноценный React-фреймворк для full-stack разработки.
00:01:32Точно так же,
00:01:33как Next.js,
00:01:33который,
00:01:34конечно же,
00:01:34тоже является full-stack React-фреймворком.
00:01:37И это тоже важно.
00:01:38Мне иногда задают вопрос,
00:01:40стоит ли использовать Next.js или React Vite с React Router,
00:01:44и я считаю,
00:01:45что это неправильное сравнение.
00:01:47Если вам не нужна серверная логика,
00:01:49если вам не нужен серверный рендеринг,
00:01:51тогда вам просто следует использовать React Vite,
00:01:55то есть Vite-проект с React,
00:01:56и добавить React Router или Tan Stack Router.
00:02:00В таком случае нет необходимости идти по пути Next.js.
00:02:02В любом случае, давайте начнём сравнение.
00:02:05И первый критерий,
00:02:06который я выбрал — это готовность к работе с ИИ,
00:02:09потому что в наши дни это,
00:02:11конечно,
00:02:11имеет значение.
00:02:12Вы,
00:02:13скорее всего,
00:02:13используете ИИ для генерации части кода,
00:02:16а может быть,
00:02:17и всего кода,
00:02:17который вам нужен в вашем проекте на Next.js или Tan Stack Start,
00:02:21и поэтому ИИ,
00:02:22конечно,
00:02:23должен знать,
00:02:24как писать этот код.
00:02:25Очевидно,
00:02:26вы можете и должны предоставлять соответствующий контекст,
00:02:30копируя страницы документации или используя MCP,
00:02:33например Context 7,
00:02:34чтобы ИИ мог обращаться к документации,
00:02:37или говоря ИИ,
00:02:38что он должен выполнить веб-поиск,
00:02:40или добавляя навыки агента,
00:02:42которые обучают ИИ использованию Tan Stack Start или Next.js.
00:02:47Но из коробки,
00:02:48если вы просто зададите ChatGPT вопрос о Tan Stack Start,
00:02:51он,
00:02:52скорее всего,
00:02:53будет знать о нём меньше,
00:02:55чем о Next.js,
00:02:55и то,
00:02:56что он знает,
00:02:57вероятно,
00:02:57окажется неправильным.
00:02:59Потому что даже сейчас,
00:03:00когда я записываю это видео,
00:03:02Tan Stack Start всё ещё находится в стадии релиз-кандидата,
00:03:05что означает отсутствие радикальных критических изменений,
00:03:08но и не полную стабильность.
00:03:10Последний год он в основном находился в бета- и альфа-версиях,
00:03:14и именно эти знания есть у ИИ-чатботов из коробки,
00:03:18поэтому из коробки у них будут неверные знания о Tan Stack Start.
00:03:23Так что готовность к работе с ИИ из коробки не такая уж хорошая,
00:03:28для Next.js она определённо лучше.
00:03:31Что касается Next.js,
00:03:32там,
00:03:33конечно,
00:03:33тоже были изменения за эти годы,
00:03:35есть новая директива use cache,
00:03:37которую ИИ из коробки тоже не очень хорошо знает,
00:03:41но у ИИ есть достаточно хорошее понимание app router,
00:03:44React server components и всего такого,
00:03:47так что для Next.js это определённо лучше,
00:03:49чем для Tan Stack Start.
00:03:51Но опять же,
00:03:52как уже упоминалось,
00:03:53вы должны убедиться,
00:03:55что даёте ИИ необходимый дополнительный контекст,
00:03:58иначе вы просто неправильно используете ИИ.
00:04:02А как насчёт экосистемы?
00:04:03Под этим я имею в виду другие ресурсы,
00:04:05которые вы можете найти,
00:04:07такие как туториалы,
00:04:08видео на YouTube,
00:04:09курсы,
00:04:10а также дополнительные пакеты для этих фреймворков..
00:04:13И здесь,
00:04:14конечно,
00:04:15Next.js выглядит намного лучше,
00:04:17чем Tan Stack Start,
00:04:18просто потому,
00:04:19что он старше,
00:04:20существует дольше,
00:04:22и вы найдёте больше ресурсов по нему,
00:04:24потому что он также крупнее.
00:04:27Также стоит отметить,
00:04:28конечно,
00:04:28что он крупнее,
00:04:29что означает большую популярность,
00:04:31потому что Next.js является частью того стандартного стека,
00:04:34который AI использует по умолчанию,
00:04:36где он в основном предлагает вам Next.js,
00:04:38React,
00:04:39Tailwind и TypeScript для большинства веб-приложений,
00:04:42которые вы запрашиваете.
00:04:43Tan Stack Start,
00:04:44вероятно,
00:04:44никогда не станет выбором по умолчанию..
00:04:47И поэтому неудивительно,
00:04:48что если вы сравниваете графики загрузок этих двух фреймворков,
00:04:52да,
00:04:52у Tan Stack Start определённо меньше загрузок,
00:04:55как видите.
00:04:56Если убрать Next.js,
00:04:57можно увидеть приятный восходящий тренд для Tan Stack Start.
00:05:01Отчасти связанный с моментом экосистемы — это,
00:05:04конечно,
00:05:05лёгкость изучения,
00:05:06но не только это.
00:05:07Под лёгкостью изучения я имею в виду,
00:05:09насколько просто освоить эту технологию?
00:05:11И я знаю,
00:05:12конечно,
00:05:12что сейчас,
00:05:13в эпоху AI,
00:05:14вы не заинтересованы в изучении,
00:05:15но как хороший разработчик вы должны понимать то,
00:05:18с чем работаете.
00:05:19Возможно,
00:05:19вы больше не пишете весь код вручную,
00:05:22но вы должны понимать код,
00:05:23который AI генерирует для вас.
00:05:25Поэтому изучение всё ещё важно.
00:05:28И здесь я бы сказал, что для Next.js это неоднозначно.
00:05:33Можно поставить — я не уверен,
00:05:35хочу ли я поставить один или два плюса,
00:05:38потому что начать работу с Next.js с app router,
00:05:41и,
00:05:42кстати,
00:05:42всё здесь относится к app router,
00:05:44довольно просто.
00:05:46Это логично.
00:05:47Вчера в стриме я создал небольшое приложение для заметок,
00:05:51где можно было создавать,
00:05:53сохранять и отображать заметки.
00:05:56И вы делаете это с Next.js,
00:05:57просто указывая пару файлов page.tsx,
00:05:59которые являются вашими,
00:06:01как вы догадались,
00:06:02страницами.
00:06:03Можно использовать динамические сегменты.
00:06:04И изучение этого синтаксиса и подхода к построению приложения в итоге довольно простое.
00:06:12Я также считаю,
00:06:13что документация отлично справляется с задачей пошагового ознакомления с основными концепциями и помогает начать работу с Next.js.
00:06:22Но всё усложняется,
00:06:23когда вы создаёте более сложные приложения и углубляетесь в более продвинутые концепции,
00:06:28такие как кэширование.
00:06:30И особенно часть с кэшированием может быть крайне запутанной,
00:06:34потому что Next.js принял решение,
00:06:36что с введением app router они хотят использовать очень агрессивное кэширование на разных уровнях,
00:06:42и понимание этого,
00:06:44а также понимание того,
00:06:45как настроить ваши компоненты для эффективной работы с встроенным кэшированием и обеспечения желаемого поведения для ваших пользователей,
00:06:54может быть сложным.
00:06:55Я так скажу.
00:06:56Итак, начало работы — отличное.
00:06:59Изучение более продвинутых функций — сложное.
00:07:02Я, вероятно, поставлю здесь два плюса.
00:07:05И я поставлю Tan Stack Start то же самое,
00:07:08но по совершенно другим причинам.
00:07:09Для Tan Stack Start я бы сказал,
00:07:11что начало работы,
00:07:13возможно,
00:07:13немного сложнее,
00:07:14чем с Next.js,
00:07:15потому что их документация для начинающих не так хороша,
00:07:19как документация Next.js.
00:07:20Здесь,
00:07:21я бы сказал,
00:07:22отсутствуют важные концепции,
00:07:24такие как получение данных или мутации.
00:07:27Хотя если у вас уже есть знания Next.js,
00:07:29существует довольно хороший сравнительный документ,
00:07:31который сравнивает ключевые функции,
00:07:33включая те,
00:07:34что связаны с получением данных и мутациями.
00:07:36Но я думаю,
00:07:37это может быть немного сложнее,
00:07:39потому что документация,
00:07:40хотя я скажу,
00:07:41что она значительно улучшилась,
00:07:43всё ещё имеет немного того ощущения свалки информации,
00:07:46где не совсем ясно,
00:07:48какая статья вам нужна,
00:07:49и,
00:07:50ну,
00:07:50например,
00:07:51здесь нет статьи о получении данных и тому подобное.
00:07:54Кроме того,
00:07:54поскольку Tan Stack Start построен на Tan Stack Router для всего,
00:07:58что связано с маршрутизацией,
00:08:00вам нужно обращаться к документации Tan Stack Router,
00:08:03которая также довольно перегружена,
00:08:05когда вы смотрите на неё в первый раз.
00:08:07Но как только вы преодолеваете этот начальный барьер,
00:08:10всё становится намного проще,
00:08:12и всё,
00:08:12на мой взгляд,
00:08:13имеет большой смысл,
00:08:15это не так сложно,
00:08:16и нет скрытых подводных камней,
00:08:18таких как проблемы с кэшированием,
00:08:20которые могут возникнуть с Next.js.
00:08:22Вот почему я бы сказал,
00:08:24что начинать с Tan Stack Start сложнее,
00:08:26но как только вы освоитесь,
00:08:27прогрессировать и углубляться в более продвинутые функции легче,
00:08:31чем с Next.js.
00:08:32Как я уже упомянул,
00:08:34это,
00:08:34конечно,
00:08:35всего лишь моё личное мнение.
00:08:36Теперь что насчёт простоты использования с точки зрения разработчика?
00:08:41Насколько приятно с ним работать?
00:08:43Это,
00:08:44конечно,
00:08:44совершенно субъективно,
00:08:45но у Next.js определённо есть некоторые проблемы в этом плане.
00:08:48Не только проблемы,
00:08:49связанные с потенциальным изучением,
00:08:51но и другие проблемы.
00:08:53Например,
00:08:53из-за кеширования может произойти так,
00:08:55что ваше приложение ведёт себя по-разному в режиме разработки и в продакшене,
00:08:59а это значит,
00:09:00что вам приходится всегда тестировать его в продакшен-режиме,
00:09:03что вы и так должны делать,
00:09:04но это становится довольно раздражающим,
00:09:06если приходится делать это постоянно во время разработки,
00:09:09потому что это вас замедляет.
00:09:11Так что это одна большая проблема,
00:09:13с которой я сталкивался в прошлом.
00:09:14Dev-сервер также может работать довольно медленно.
00:09:18По крайней мере,
00:09:19если вы используете webpack-версию — новая дефолтная версия на turbopack гораздо лучше в этом плане,
00:09:25но,
00:09:25по моему опыту,
00:09:26она не превосходит сборку на базе Vite,
00:09:28которую предоставляет TanStack Start.
00:09:30Так что я поставлю ему здесь три плюса,
00:09:33потому что,
00:09:34по моему опыту,
00:09:35работа с ним была очень комфортной с точки зрения разработчика.
00:09:40Он быстрый,
00:09:41предсказуемый,
00:09:42в нём по большей части нет странного поведения — есть ещё некоторые нюансы тут и там,
00:09:48и он всё ещё находится в стадии релиз-кандидата,
00:09:52но в целом я предпочитаю опыт разработки с TanStack Start опыту работы с Next.js.
00:09:57Очевидно, у вас может быть другое мнение.
00:10:01Теперь что насчёт конкретных возможностей,
00:10:03предлагаемых Next.js и TanStack Start?
00:10:06Что касается роутинга,
00:10:07как я показывал вам,
00:10:08в Next.js используется файловый подход: вы создаёте файлы,
00:10:11которые выступают в роли ваших маршрутов,
00:10:13и там нужно следовать различным соглашениям об именовании.
00:10:16Документация хорошо справляется с их объяснением,
00:10:19но там также определённо есть более сложные функции,
00:10:21такие как параллельные маршруты,
00:10:23настройка которых может быть непростой.
00:10:25TanStack Start также использует файловый подход,
00:10:27работая под капотом на TanStack Router,
00:10:29как я уже упоминал,
00:10:30и здесь тоже есть соглашения об именах файлов,
00:10:32которым нужно следовать и которые столь же просты в изучении.
00:10:36Одно преимущество,
00:10:37которое даёт TanStack Start,
00:10:38заключается в том,
00:10:39что его файловый роутинг обеспечивает полную типобезопасность,
00:10:43что может быть очень удобно.
00:10:45Так что оба основаны на файлах,
00:10:47и всё сводится к вашим предпочтениям относительно того,
00:10:50какой паттерн именования вы предпочитаете,
00:10:52но у TanStack Start также есть та самая 100%-ная типобезопасность,
00:10:56которая идёт вместе с его файловым роутером,
00:10:58что приятно иметь.
00:11:00И это также отвечает на следующий вопрос: Next.js имеет очень хорошую поддержку TypeScript,
00:11:06а TanStack Start,
00:11:07по моему опыту,
00:11:08имеет ещё лучшую поддержку TypeScript.
00:11:11Также,
00:11:12когда речь идёт о таких вещах,
00:11:13как серверные действия или серверные функции,
00:11:15или как бы вы их ни называли,
00:11:17и о получении данных.
00:11:18Так что да,
00:11:18когда вы используете TypeScript,
00:11:20а вы должны его использовать,
00:11:21я считаю,
00:11:22работать с TanStack Start — это настоящее удовольствие.
00:11:24Теперь,
00:11:24когда дело доходит до получения данных и мутаций данных,
00:11:27оба фреймворка,
00:11:28как я упоминал,
00:11:29позволяют запускать код на сервере — это полностековые React-приложения,
00:11:33но они используют разные подходы.
00:11:35Next.js использует React Server Components,
00:11:37и долгое время это был единственный фреймворк,
00:11:40который поддерживал React Server Components.
00:11:43Это означает,
00:11:44что компоненты ваших страниц по умолчанию рендерятся только на сервере.
00:11:48Они никогда не перерисовываются на клиенте,
00:11:50а это значит,
00:11:50что вы можете поместить код получения данных,
00:11:53подобный этому,
00:11:54который обращается к базе данных за кулисами,
00:11:56прямо в ваши компоненты,
00:11:57и это не утечёт на клиент.
00:11:59У TanStack Start другой подход.
00:12:01Поддержка React Server Components тоже скоро появится там,
00:12:04её ещё нет на момент записи этого видео,
00:12:07но подход,
00:12:07который я вам показываю и который я использовал во всех своих проектах,
00:12:11также продолжит существовать,
00:12:13и в этом подходе компоненты маршрутов по умолчанию рендерятся и на серверной,
00:12:17и на клиентской стороне — предварительно рендерятся на сервере,
00:12:21обновляются на клиенте,
00:12:22и поэтому вы не можете помещать код для серверной стороны в функции компонентов.
00:12:27Вместо этого используется паттерн загрузчиков,
00:12:30который вы могли видеть,
00:12:31например,
00:12:32в Remix,
00:12:32где можно привязать загрузчик к маршрутам,
00:12:35который также выполняется на стороне клиента и сервера,
00:12:38но затем можно вызывать функции,
00:12:40декорированные или обёрнутые с помощью create server functions,
00:12:44так сказать,
00:12:44которая является функцией,
00:12:46предоставляемой Tan Stick Start и помечает функцию как выполняемую только на стороне сервера,
00:12:51но вызываемую со стороны клиента.
00:12:54Вот что такое серверная функция.
00:12:56И если у вас есть такая функция,
00:12:58вы можете безопасно вызвать её в загрузчике или также из тела функции компонента,
00:13:03и код останется на стороне сервера.
00:13:05За кулисами отправляется HTTP-запрос.
00:13:07Next.js в первую очередь полагается на RSC,
00:13:10хотя,
00:13:10конечно,
00:13:11там можно также настроить API-эндпоинты и использовать useEffect с Fetch API.
00:13:15Tan Stick Start использует загрузчики и серверные функции,
00:13:18хотя стоит также отметить,
00:13:20что и там можно настроить API-маршруты и использовать Fetch API,
00:13:24Tan Stick query или что-то подобное,
00:13:26но основной встроенный подход — это комбинация загрузчика и серверной функции.
00:13:31Для мутаций Next.js использует серверные действия — это действия,
00:13:36декорированные специальной директивой useServer.
00:13:39В Next.js есть такие директивы: useServer, useClient.
00:13:44Некоторым они не нравятся,
00:13:45и я тоже не большой поклонник,
00:13:47скажу честно.
00:13:48И если файл декорирован директивой useServer,
00:13:50то все функции в нём становятся серверными функциями,
00:13:53которые будут выполняться только на сервере.
00:13:55Не на стороне клиента,
00:13:56хотя вызывать их со стороны клиента всё равно можно.
00:13:59Например,
00:14:00эта функция saveNode,
00:14:01которая у меня здесь есть и сохраняет узел в базе данных,
00:14:04всё равно может быть вызвана со стороны клиента,
00:14:07используя,
00:14:08например,
00:14:08хук useActionState.
00:14:10В Tan Stick Start мы просто продолжаем использовать этот подход с функцией createServer,
00:14:14потому что я упоминал,
00:14:15что это функции,
00:14:16которые гарантированно выполняются на сервере,
00:14:18и их можно использовать как для получения данных,
00:14:20так и для мутаций,
00:14:21поскольку,
00:14:21опять же,
00:14:22код будет выполняться только на сервере.
00:14:24В функции компонента,
00:14:25которая также рендерится на клиенте,
00:14:27можно использовать хук useServer function,
00:14:29предоставляемый Tan Stick Start,
00:14:30чтобы обернуть серверную функцию,
00:14:32и это,
00:14:32по сути,
00:14:33делает её вызываемой со стороны клиента и даёт дополнительные возможности,
00:14:36такие как автоматическая обработка редиректов и так далее.
00:14:39Это позволяет мне вызывать эту серверную функцию из моих клиентских компонентов.
00:14:43Next.js использует официальные серверные функции React,
00:14:46а Tan Stick Start использует свои собственные серверные функции,
00:14:50в конечном счёте.
00:14:51Хотя общая идея, конечно, одна и та же.
00:14:54А что насчёт кеширования?
00:14:56Я упоминал, что это сложная часть.
00:14:58В Next.js оно довольно агрессивное и потенциально сложное.
00:15:04Это определённо одна из самых сложных частей Next.js.
00:15:07И я рассматриваю это,
00:15:08как и все другие важные концепции Next.js,
00:15:11в своём курсе по Next.js,
00:15:13если вы хотите узнать всё о Next.js.
00:15:16Этот курс — отличный ресурс,
00:15:17чтобы пройти путь от абсолютного новичка до продвинутого пользователя Next.js.
00:15:21Но кеширование — это определённо одна из наиболее проблемных тем в Next.js.
00:15:26Преимущество,
00:15:27конечно,
00:15:27в том,
00:15:28что благодаря агрессивным настройкам по умолчанию можно потенциально получить довольно хорошее кеширование для ваших пользователей.
00:15:35Но также можно легко выстрелить себе в ногу.
00:15:38Для Tan Stick Start я бы охарактеризовал это как хорошие настройки по умолчанию.
00:15:43Намного менее агрессивные,
00:15:45чем в Next.js,
00:15:45и,
00:15:46что самое важное,
00:15:47консистентные,
00:15:48по крайней мере по моему опыту,
00:15:50между режимами разработки и продакшена.
00:15:52Он также предоставляет кеширование,
00:15:54так что когда пользователи переходят между маршрутами,
00:15:57например,
00:15:57данные кешируются на определённый период времени.
00:16:00Так что при быстрой навигации вы не отправляете кучу запросов на сервер.
00:16:04И это,
00:16:05конечно,
00:16:05очень помогает с производительностью,
00:16:07но не кеширует всё или не пытается кешировать всё на разных уровнях,
00:16:11и это может облегчить вам жизнь как разработчику.
00:16:14Это также означает,
00:16:15конечно,
00:16:16что если вы хотите получить максимальную производительность для пользователей и потенциально сэкономить трафик,
00:16:21вам нужно самостоятельно установить правильные заголовки кеширования и немного больше подумать о том,
00:16:26как вы кешируете своё приложение,
00:16:28чем,
00:16:29возможно,
00:16:29требуется в Next.js.
00:16:30Хотя здесь вам придётся думать и о других проблемах.
00:16:32А что насчёт стабильности?
00:16:35Здесь я, вероятно, поставлю обоим по два плюса.
00:16:39Оба достаточно стабильны.
00:16:40Очевидно,
00:16:41Next.js более зрелый,
00:16:43но,
00:16:43по моему опыту,
00:16:44он был довольно глючным в последние пару лет,
00:16:48особенно сервер разработки имел проблемы с вылетами и тому подобным.
00:16:53Но он значительно улучшился,
00:16:55и в целом это стабильный опыт,
00:16:57и есть,
00:16:57конечно же,
00:16:58сотни и тысячи приложений,
00:17:00которые его используют и работают в продакшене без проблем.
00:17:03Это определённо важно отметить.
00:17:06Очевидно,
00:17:06у нас были те уязвимости безопасности React,
00:17:08но,
00:17:09во-первых,
00:17:09некоторые из них могут быть обнаружены в будущем и также затронуть TanStack Start,
00:17:14особенно когда они тоже начнут поддерживать серверные компоненты React,
00:17:17а во-вторых,
00:17:18это,
00:17:18конечно,
00:17:19не проблема в первую очередь Next.js.
00:17:21TanStack Start всё ещё находится на стадии release candidate,
00:17:24и я определённо столкнулся с изрядным количеством проблем с ним.
00:17:28Странные вылеты,
00:17:29странные сообщения об ошибках,
00:17:30странное поведение тут и там,
00:17:32так что я мог бы дать ему всего один плюс за это,
00:17:35но поскольку он находится на стадии release candidate,
00:17:38и для этого он довольно стабилен,
00:17:40я поставлю здесь два.
00:17:41Просто имейте в виду,
00:17:42что вы определённо можете столкнуться с некоторыми проблемами при использовании TanStack Start.
00:17:47Тем не менее,
00:17:47у меня есть приложения,
00:17:49работающие в продакшене,
00:17:50например buildmygraphic.com,
00:17:52которое можно использовать для создания потрясающих инфографик с помощью ИИ,
00:17:56работающие на TanStack Start без проблем,
00:17:59и их создание также не вызвало затруднений.
00:18:02А что насчёт готовых решений?
00:18:04Насколько легко получить оптимизированный рендеринг изображений,
00:18:09интернационализацию или что-то подобное?
00:18:12Здесь Next.js определённо справляется лучше.
00:18:15У него есть встроенный компонент для изображений,
00:18:18встроенная поддержка интернационализации,
00:18:21а у TanStack Start ничего этого нет.
00:18:24Не уверен,
00:18:25планируется ли это,
00:18:26не уверен,
00:18:26важно ли это для вас — это определённо не то,
00:18:29что вам необходимо,
00:18:30есть другие альтернативы,
00:18:32сторонние пакеты,
00:18:33которые можно использовать,
00:18:34возможно,
00:18:35вы даже не хотите встроенные решения,
00:18:37но если это то,
00:18:38что вас волнует или беспокоит,
00:18:40то Next.js,
00:18:40вероятно,
00:18:41лучший выбор здесь.
00:18:43А что насчёт развёртывания?
00:18:45Это сложная тема.
00:18:48Next.js создан Vercel,
00:18:50конечно,
00:18:50и если вы развёртываете его на Vercel,
00:18:53это очень просто и гладко.
00:18:56Всё оптимизировано для этого.
00:18:58Исторически было немного сложно развернуть его на собственных серверах,
00:19:02например,
00:19:03но,
00:19:03если быть честным,
00:19:04команда Next.js действительно проделала работу,
00:19:07чтобы облегчить это,
00:19:09написать лучшую документацию,
00:19:11и поэтому в наши дни я бы сказал,
00:19:13что вы вполне можете развернуть его на других сервисах без особых проблем.
00:19:17Так что это два или три плюса — три плюса,
00:19:21если вы используете Vercel,
00:19:23и,
00:19:23вероятно,
00:19:24два,
00:19:25если вы используете других провайдеров,
00:19:28я бы сказал.
00:19:28Для TanStack Start я поставлю здесь два прямо сейчас,
00:19:33но я также мог бы поставить три.
00:19:36Основная причина,
00:19:37по которой я ставлю два — это то,
00:19:40что на момент записи документация по хостингу всё ещё немного сложная.
00:19:45Есть официально поддерживаемые партнёры вроде Cloudflare и Netlify,
00:19:49у которых довольно хорошая документация и где развёртывание,
00:19:52вероятно,
00:19:53довольно гладкое,
00:19:54хотя я их не использовал.
00:19:56Если вы хотите запустить его на собственном VPS,
00:19:59например,
00:19:59с BUN,
00:20:00здесь есть некоторые инструкции,
00:20:02но я нашёл их немного сложными для понимания или столкнулся с некоторыми проблемами,
00:20:08которые все были решаемы,
00:20:09но это определённо заняло у меня время.
00:20:12Я думаю,
00:20:13что когда появится хорошее руководство по развёртыванию TanStack Start с BUN или Node на VPS,
00:20:17развёртывание определённо станет проще,
00:20:19особенно если это руководство будет включать рекомендации относительно некоторых лучших практик,
00:20:24которым следует следовать,
00:20:25или потенциальных подводных камней,
00:20:27с которыми вы можете столкнуться.
00:20:29Но,
00:20:29как я уже упоминал,
00:20:30вы определённо могли бы также дать здесь три плюса в зависимости от того,
00:20:33как на это посмотреть.
00:20:34Как я уже говорил,
00:20:35всё это субъективно и лишь мой опыт,
00:20:37мои мысли,
00:20:38и,
00:20:39очевидно,
00:20:39мне также интересно услышать ваше мнение.
00:20:42Если вы перешли на него или что вы думаете о Next.js и T3 Stack,
00:20:45если вы рассматриваете возможность перехода или если вы не используете ни один из них,
00:20:49а вместо этого используете другой вариант.

Key Takeaway

TanStack Start предлагает лучший опыт разработки с превосходной типобезопасностью и предсказуемым поведением, но Next.js остаётся более зрелым выбором с лучшей экосистемой, готовностью к работе с ИИ и готовыми решениями.

Highlights

TanStack Start находится в стадии релиз-кандидата, что ограничивает его готовность к работе с ИИ по сравнению с более зрелым Next.js

Next.js имеет агрессивное кэширование на разных уровнях, что может быть сложным для изучения, но потенциально повышает производительность

TanStack Start обеспечивает полную типобезопасность маршрутизации и лучшую поддержку TypeScript по сравнению с Next.js

Next.js использует React Server Components, а TanStack Start применяет паттерн загрузчиков с серверными функциями для получения данных

Оба фреймворка достаточно стабильны, но TanStack Start всё ещё может иметь некоторые проблемы из-за незавершённости разработки

Next.js предлагает больше готовых решений (оптимизация изображений, интернационализация), в то время как TanStack Start требует сторонних пакетов

Развёртывание Next.js оптимизировано для Vercel, а TanStack Start имеет партнёрства с Cloudflare и Netlify, но документация по хостингу на VPS ещё требует улучшения

Timeline

Введение и общий контекст сравнения

Автор представляет тему сравнения TanStack Start и Next.js, отмечая растущий хайп вокруг первого. Он объясняет, что это субъективное мнение, основанное на его опыте создания одинаковых приложений на обоих фреймворках во время прямой трансляции. Автор выделяет несколько критериев для сравнения и уточняет, что фокусируется именно на этих двух фреймворках, хотя существуют и другие альтернативы (Remix, React Router, Nuxt, SvelteKit). Важно отметить, что TanStack Start — это по сути TanStack Router плюс серверные возможности, превращающий его в полноценный full-stack React-фреймворк, как и Next.js. Автор подчёркивает, что если не нужна серверная логика или серверный рендеринг, лучше использовать React Vite с React Router или TanStack Router вместо Next.js.

Готовность к работе с ИИ и экосистема

Первый критерий сравнения — готовность к работе с ИИ, что критично в современной разработке. TanStack Start находится в стадии релиз-кандидата, и ИИ-модели типа ChatGPT имеют в основном устаревшие знания о бета- и альфа-версиях, что приводит к неверным ответам. Next.js, несмотря на новые функции вроде директивы 'use cache', лучше известен ИИ благодаря зрелости и app router. Автор подчёркивает важность предоставления контекста ИИ через документацию, MCP или веб-поиск. По критерию экосистемы Next.js значительно превосходит TanStack Start: больше туториалов, видео, курсов и дополнительных пакетов. Графики загрузок показывают огромное преимущество Next.js, хотя у TanStack Start наблюдается восходящий тренд. Next.js стал частью стандартного стека для ИИ (Next.js + React + Tailwind + TypeScript), что делает его выбором по умолчанию для большинства веб-приложений.

Лёгкость изучения обоих фреймворков

Автор оценивает оба фреймворка на два плюса по лёгкости изучения, но по разным причинам. Next.js с app router прост для начала: файловая структура, динамические сегменты, отличная документация для новичков. Однако при углублении в продвинутые функции, особенно кэширование, всё становится сложным из-за агрессивного кэширования на разных уровнях. TanStack Start имеет более сложный порог входа из-за менее структурированной документации, которая имеет 'ощущение свалки информации', отсутствие чётких статей о получении данных, и необходимость обращаться к документации TanStack Router для вопросов маршрутизации. Но после преодоления начального барьера работа становится проще и понятнее, без скрытых подводных камней вроде проблем с кэшированием Next.js. Автор подчёркивает, что документация TanStack Start значительно улучшилась, но всё ещё требует доработки для новичков.

Опыт разработки (Developer Experience)

По критерию простоты использования и комфорта работы TanStack Start получает три плюса против двух у Next.js. У Next.js есть серьёзные проблемы: различное поведение в режиме разработки и продакшене из-за кэширования, что требует постоянного тестирования в production-режиме и замедляет разработку. Dev-сервер может работать медленно, особенно с webpack-версией, хотя новая версия на turbopack значительно лучше. Однако даже turbopack, по опыту автора, не превосходит сборку на базе Vite, которую использует TanStack Start. TanStack Start оценивается как быстрый, предсказуемый, без странного поведения (хотя некоторые нюансы есть из-за статуса релиз-кандидата). В целом автор предпочитает опыт разработки с TanStack Start опыту работы с Next.js, отмечая это как субъективное мнение.

Маршрутизация и поддержка TypeScript

Оба фреймворка используют файловый подход к маршрутизации с соглашениями об именовании файлов. Next.js предлагает файлы, выступающие в роли маршрутов, с хорошо документированными соглашениями и продвинутыми функциями вроде параллельных маршрутов, настройка которых может быть непростой. TanStack Start также использует файловый роутинг на базе TanStack Router с простыми в изучении соглашениями. Ключевое преимущество TanStack Start — полная типобезопасность файлового роутинга, что очень удобно для разработчиков. Выбор между ними зависит от предпочтений по паттернам именования. По поддержке TypeScript Next.js имеет очень хорошую поддержку, но TanStack Start, по опыту автора, ещё лучше, особенно в контексте серверных действий, серверных функций и получения данных. Автор считает, что работа с TanStack Start при использовании TypeScript — настоящее удовольствие.

Получение данных и мутации

Оба фреймворка позволяют запускать код на сервере, но используют разные подходы. Next.js долгое время был единственным фреймворком с поддержкой React Server Components (RSC): компоненты страниц по умолчанию рендерятся только на сервере, никогда не перерисовываются на клиенте, что позволяет помещать код получения данных (например, обращения к базе данных) прямо в компоненты без утечки на клиент. TanStack Start использует паттерн загрузчиков (как в Remix): компоненты маршрутов рендерятся и на сервере, и на клиенте (предварительно на сервере, обновляются на клиенте), поэтому серверный код нельзя помещать в функции компонентов. Вместо этого используются загрузчики, которые могут вызывать функции, обёрнутые 'createServerFunction', помечая их как выполняемые только на сервере, но вызываемые с клиента. Для мутаций Next.js использует серверные действия с директивой 'use server', вызываемые через хуки вроде useActionState. TanStack Start продолжает использовать createServerFunction с хуком useServerFunction для обёртки серверных функций, делая их вызываемыми с клиента с автоматической обработкой редиректов.

Кэширование и стабильность

Кэширование в Next.js агрессивное и потенциально сложное, это одна из самых проблемных тем (подробно рассматривается в курсе автора по Next.js). Преимущество — потенциально хорошее кэширование для пользователей по умолчанию, но легко 'выстрелить себе в ногу'. TanStack Start имеет хорошие настройки по умолчанию: менее агрессивное кэширование, консистентное между разработкой и продакшеном. Он кеширует данные при навигации между маршрутами на определённый период, избегая избыточных запросов, но не пытается кешировать всё на разных уровнях. Это облегчает жизнь разработчику, но для максимальной производительности требуется самостоятельная настройка заголовков кэширования. По стабильности оба получают два плюса: Next.js более зрелый, но был довольно глючным последние годы (вылеты dev-сервера), хотя значительно улучшился; тысячи приложений работают в продакшене. TanStack Start на стадии релиз-кандидата с некоторыми проблемами (странные вылеты, сообщения об ошибках), но для своего статуса довольно стабилен; есть работающие продакшен-приложения вроде buildmygraphic.com.

Готовые решения и развёртывание

По готовым решениям Next.js определённо лучше: встроенный компонент для оптимизации изображений, встроенная поддержка интернационализации. У TanStack Start этого нет, и неясно, планируется ли. Можно использовать сторонние пакеты, но если встроенные решения важны — Next.js лучший выбор. По развёртыванию Next.js создан Vercel: развёртывание на Vercel очень простое и гладкое (три плюса), всё оптимизировано. Исторически развёртывание на собственных серверах было сложным, но команда Next.js проделала работу по улучшению документации, поэтому теперь это возможно без особых проблем (два плюса для других провайдеров). TanStack Start получает два плюса (или три, в зависимости от взгляда): есть официально поддерживаемые партнёры (Cloudflare, Netlify) с хорошей документацией и, вероятно, гладким развёртыванием. Для развёртывания на VPS с BUN или Node документация сложновата, автор столкнулся с решаемыми, но времязатратными проблемами. Когда появится хорошее руководство с лучшими практиками, развёртывание станет проще.

Community Posts

View all posts