Next.js 14 App Router vs Pages Router что выбрать в 2024

[lonelygoblin]

Начинаю новый проект — SaaS-дашборд с авторизацией, несколько ролей, SSR нужен. Долго сидел на Pages Router, знаю его хорошо. Смотрю на App Router — вроде будущее, но столько жалоб на кеширование, на то что всё сломано. Реально ли уже использовать App Router в проде или лучше подождать пока устаканится?

[Version]

Перешли на App Router полгода назад в небольшой команде (3 фронта). Честно — первые 2 недели боль, особенно разобраться с Server Components и тем, что нельзя просто взять useState где попало. Потом щёлкнуло. Сейчас не хотим обратно. Основной профит — меньше клиентского JS, fetch прямо в компонентах без useEffect, layout-ы вложенные реально удобны.

[depechie]

Главная засада App Router — кеширование. В 14.x оно было агрессивным до невозможности, реально были баги когда данные не инвалидировались. В 15-й версии многое пересмотрели, стало лучше. Если стартуешь новый проект сейчас — бери App Router сразу, но потрать день на чтение доки по caching именно в той версии Next.js которую используешь, потому что между минорными версиями поведение менялось.

[FpgaDev]

У меня другой опыт — взял App Router для pet-проекта и потом переписал на Pages Router. Причина: экосистема. Куча библиотек для авторизации, аналитики, UI-компонентов просто не были готовы к Server Components. Постоянно вылезало 'use client' везде и весь смысл терялся. Для SaaS с кастомной авторизацией сейчас всё равно смотрел бы на next-auth v5 (beta) — там App Router поддержка нормальная.

[pleki]

Если проект долгосрочный — App Router, Vercel туда вкладывает всё. Pages Router уже фактически legacy, новые фичи туда не добавляют. Да, порог вхождения выше, но через год будешь рад что не начал с устаревшего подхода. Только учти: middleware, i18n и некоторые паттерны с куками работают немного иначе, заложи время на это.

[tsav]

Конкретно под SaaS-дашборд с ролями — смотри на Parallel Routes и Intercepting Routes в App Router, это реально меняет как строишь UI для разных ролей и модальные окна. В Pages Router такого нет и городить это руками больно. Это один из аргументов почему стоит страдать с App Router сейчас.

[sergeyserov]

@depechie, про кеширование в 15-й версии — подтверждаю, там fetch перестал быть cached by default и надо явно писать { cache: 'force-cache' } или использовать unstable_cache. Это сломало много туториалов написанных под 14.x. Кто стартует сейчас — читайте changelog именно 15-й, а не первые попавшиеся статьи с Medium, они зачастую описывают поведение которого уже нет.

[Rhemix]

@FpgaDev, боль с 'use client' везде — это обычно симптом того, что взяли библиотеку которая не поддерживает Server Components, и вынуждены обернуть её в клиентский компонент. Решение которое помогло нам: делать тонкие client-обёртки только вокруг интерактивной части, а данные тянуть в Server Component выше и пробрасывать пропсами. Тогда большая часть дерева остаётся серверной и смысл App Router не теряется.

[coder_vlad]

Для SaaS-дашборда с несколькими ролями ключевое что не упомянули — middleware в App Router позволяет редиректить и переписывать URL до рендеринга, это удобно для роль-based routing без лишнего кода в каждом layout. Плюс Parallel Routes дают показывать разный UI для разных ролей в одном URL без дублирования страниц. Это именно тот кейс где App Router бьёт Pages Router конкретно и ощутимо.