Как стартовать новый проект в 2023 году?

Показать описание

Совсем не давно вышел Vite конкурент create-react-app, но он не появился в рекомендациях на сайте React, но так же и create-react-app убрали из рекомендаций. Попробуем вместе разобраться, как стартовать проект в 2023 году!

Поддержать Айти Синяка можно здесь:

00:00 Анонс темы
00:44 create-react-app и Vite не бест практис
01:24 Что же рекомендует React team?
03:18 А как же SPA?
04:25 Спасательный круг от Дэна Абрамова
05:25 Тестируем спасательный круг
08:30 Итоги
10:10 Подписывайтесь!

-------------------------

Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Комментарии

Супер Синяк👍
Низкий поклон тебе и твоим помощникам❤

IT-Svyatoslav

Ещё следует отметить, что у некста есть 2 подхода к разработке: app (RSC) router и page router. На странице документации некста есть выбор нужного варианта. Ещё больше вариантов, ещё больше путаницы.

dyingroseband

1. Nextjs после первого открытия страницы (любой) ведет себя как spa с динамическими модулями. При переходе страница не перегружается, а перерисовывается.
2.Нужно было дочитать доку про динамический роут, когда можно указать что делать если такого файла в папке нет, вот там можно и указать что любой путь будет открывать основной компонент, а дальше уже делаешь что хочешь в этом компоненте.

arman-

Спасибо большое! Просто кайф. А что думаете про Solid JS?

go_better

И точно так же добавят i18n решения(react-i18next / next-i18next) для next с export. Или не добавят. Ой.🧐

animekontororu

SSR и SPA это не противоположные вещи, это тёлое и мягкое. Приложение может являться SPA как с SSR, так и без SSR. Рекомендую разобраться в терминах SPA/MPA, CSR/SSR.

yauhenitsur

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

А эта прегенерация роутов нужна немного для другого, например у тебя есть разные языки на сайте которые просто вписаны в путь, это тоже динамический роут, но их ограниченное количество, тогда ты можешь сгенерировать для них статический html уже на этапе билда используя get static path. При этом ты все еще можешь получить параметр с роута в пропсы и сделать запрос за данными так же как это делается в спа.

Считаю что ты вводишь в заблуждение в этом моменте

upd. Это же прям в гисте Дэна есть

aspirine

а что мешает самому настроить веб пак и не юзать CRA or Vite?

WebBestMaster

У vite постоянно какие-то проблемы. Немогу настроить react-testing-library в нем. Если можете снимите пожалуйста видео о тестировании и настройках этой библиотеки в vite+react

velikorossnationalist

Еще интересно, что у Remix тоже недавно появился SPA-mode, что на выходе даёт приложение как vite + react-router, но с фишками Remix (например, file-based роутинг, автоматический код-сплитинг роутов, предзагрузка роутов через Link и т.п)

Xelson

Спасибо за разбор, как всегда интересно.
Коммент и лайк для продвижения видоса.

ДмитрийКузьмин-шс

А что если докинуть react-router в nextjs и использовать только pages/index как <App /> ?

IlyaLyskov

Насколько я знаю, CRA превратят в Launcher, а Next.js с Pages роутером позволяет по сути имитировать работу SPA при помощи <Link /> компоненты. 🤔

AmadeusTwi

Мне лично очень нравится vite. Хотя мое мнение ой какое не экспертное, но всё же :D

krypton

в nginx настроить просто что бы читал все файлы html в папке с проектом, вот в 23м начал чисто MPA использовать

timwin

Сколько помню CRA его всегда не рекомендовали, используйте свою сборку для SPA, по сути это настройка webpack, остальное это доп настройки как раз под нужны проекта. Если не нужен SPA то next js кажется хорошим решением.

Elijah_Pavlov

я так понял видео про статический генератор сайтов(типа хостинга github pages)?
или это как модули в ангуляр, когда фунционал разбит на отдельные js файлы?

alexs

Можно создать один [...pages].tsx в папке pages, это редирект со всех роутов в этот файл. И здесь юзать react router вместо Next router. Только зачем?? В чем смысл делать SPA, если Next с SSR в разы лучше?

aleksandrnikitin

Про динамический роутинг - год назад столкнулся с этим в nuxt, ты просто статику отдаешь и все, ведь видно из файлов, что они создались под конкретный id. Поэтому либо спа, либо сервак поднятый, иначе никак. Для статичных сайтов только пойдет, которые один раз сделали и забыли

anton-trofimov

Разве приложение next js на фронте не работает как spa?

liganshow