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

Спасибо что уже 2 года с нами!)

Ну старый подход с pages оставлен скорее для совместимости и миграции я думаю

да, всего 5 стратегий отрисовки пользовательского интерфейса) не большинство людей будет интересовать CSR (client side rendering - SPA), SSR (server side rendering - с папками pages...) и новый RSC (react server component - с папкой app и стримингом и кешированием запросов - тут будьте аккуратны, можно поймать интересный баг)

Можно линку на гист?

@@palyanytsia В обычном спа на реакте без некста как решаются динамические роуты? Ты получаешь с урла userId и делаешь запрос 'backend/user/${userId} и потом рендеришь на странице В некс как спа, как показал синяк в видосе это делается точно так же, тебе не надо мапить все айди в функцию что бы сделать страницу под каждого юзера, в page передается значение динамического роута как параметер автоматически, тебе даже не надо его как то доставать. Потом ты делаешь fetch(userID) или как угодно иначе. Все абсолютно так же как в обычном СПА, ноль разницы и ноль проблем Гист есть в описании видео синяка, я не уверен что могу вставлять ссылки. Там немного старый некст но суть таже ты получаешь с роута айди, делаешь запрос и рендеришь его на странице. Динамически как в СПА. Дэн как раз это и показал своим постом.

Спасибо, обязательно перечитаю доку)

"будет открывать основной компонент, а дальше уже делаешь что хочешь в этом компоненте" - т.е. вы предлагаете туда другой роутер ещё запихать? смысл тогда от next как-то теряется немного

так вроде и не противопостовлял их никто тут)

@@it-sin9k На 02:27: "Получается, реакт-команда перестала рекомедовать SPA, пользуйся SSR". На 03:21 противопоставление снова. На 03:35. И так далее. Собственно, видео кишит "А что же выбрать, SPA или SSR", что является ложной дихотомией.

@@it-sin9k вы в видео и противопоставили, у вас путаница в понятиях, которую вы разносите на вашу аудиторию, теперь каждый второй зритель канала тут пишет SPA vs SSR, что полный бред

Ты душнила просто

@@yauhenitsur1708там пользуясь, а не прямое указание, глухня

а можно подробнее про Launcher?

это не у vite проблемы, а у тебя

А как связаны вит и тесты?

изначально я прочитал твит Дэна про как сделать SPA на Next.js и провел эксперимент, а потом поделился, что нарыл) Я думал, мб они запилили замену SPA полноценную, но пока кажется что нет

@@it-sin9k я видел раньше вроде похожее, в рамках видео про seo для spa wpa , то есть без сервер рендеринга ssr. генерится куча статики для индексации поисковиком короче.

@@it-sin9k вспомнил, видео было про Astro js, и его медод GetStaticPaths и то, как он из него генерит статический сайт SPG.

интересно есть ли там ограничения. Например работают ли динамические роуты

@@it-sin9k судя по документации, ограничений на динамические роуты нет. Оно и не мудрено, реакт-роутер ведь изначально клиентский, в отличии от роутера некста

Не webpack, а babel на swc. А в последнем Next.js (13) в деве как experimental feature доступна замена webpack на turbopack (аналог vite от разработчиков webpack)

Не то чтобы некст сложный но и "очень простой" тоже не про него не в части трудности а в части именно простоты (отсутствия лишнего) Переписал когда был хайп по нексту свой проект с КРА на некст.... да в начале казалось что писать больше но зато вот тебе одна фича вот другая... в итоге поигравшись переписал все на отдельные бекенд и фронт т.к. ССР мне на проекте нафиг не нужен и соотвесно все связанные фичи некста становятся лишними и мешаются под пальцами кодера)) ну и плюс отдельные специфичные некстовские траблы с кешем и пр

а зачем тогда NextJS?)

ну тут несколько поинтов: насколько хороши вы в настройке веб пака, так как я видел много неудачных настроек webpack, а так же второе на все это требуется дополнительное время, которого вечно не хватает)

@@it-sin9k я не хвастаюсь, но я юзаю вебпак с первой версии и всегда настраиваю его сам, так что мне это не проблема, я не понимаю почему у других это проблема (( куча туториалов на Ютубе, да и начиная с 4ой версии вебпак стал реально дружелюбнее для пользователя

Спасибо!) Думаю проблема в том, что мы не запускали никакой рекламы на канал) чисто органически растем))

nextjs - это и есть spa, но с ssr

в смысле "не рекомендовали", ссылка на crа висела на официальном сайте Реакта и в туториале там же crа как раз РЕКОМЕНДОВАЛСЯ 😁

@@alenache1 Не рекомендовался пользователями которые столкнулись с проблемой кастомизации настроек под свой проект.

@@Elijah_Pavlov а в чем проблема скачанное через crа кастомизировать под себя? удалить что не надо, докачать что надо, джейсон переписать?

@@alenache1 И зачем тогда нужен cra? 😁 Не проще ли сразу под себя настроить?

вот я и вглядывался в этот Гист так и не понял, что там было не так. Можете чуть подробнее раскрыть тему, как сделать динамические роуты?

так там же в самом гисте написано: But if you look at what Next.js generated, it's an HTML file per route: out/index.html out/404.html out/stuff/[id].html So you'd need to teach your static server to do this rewrite: rewrite / to out/index.html rewrite /stuff/whatever to out/stuff/[id].html Но я повторюсь, это не совсем то, что было в CRA и могу предложить не пытаться натянуть сову на глобус и просто не использовать в нексте SSR, если уж так не хочется, и будет вам из коробки SPA c кучей возможностей. А сверху еще досыпать nx

чем он тебе нравится, расскажи плиз :)

помню эти времена, когда были десятки шаблонов стартовых) и create-react-app стал серебрянной пулей) а теперь опять))

@@it-sin9k тут всё дело только в том, что на сайте реакт рекомендуют. Был рекомендован CRA, поэтому популярность, несмотря на то, были ли более удачно сделанные другие шаблоны, или нет.

не) в те времена мы выбирали CRA не потому что на сайте был указан, а то что все сборки быстро устаревали, а за CRA присматривали, постоянно развивали, и уверенность была в том, что поддержка будет) но вот поддержка и закончилась)

так же как и с ним) Абрамов был далеко не главным ментейнером. Он скорее был публичным лицом

@@user-yw9wx4lv2w если так так это хорошо

Vite хорошая штука, но SPA это не только React, а "нормальное" - понятие растяжимое. Next вполне справляется, просто на видео выше это незаметно.

а почему сложно его развернуть на своем хостинге? по идее в CI в докер засунул и через докер хаб заливай куда хочешь

@@it-sin9k Мое субьективное ощущение - основанное на практическом опыте и чтении очень куцой документации которую Версел дает для развертывания на своих серверах. Оговорюсь что развертывал я под pm2 - на 2$ VPS от ОVH - куда Докер влезть не может по системным требованиям.

смотря что вы вкладываете в фразу spa

@@it-sin9k то, что при роутинге по странице, я не запрашиваю html у сервера, собственно и релоад страницы не происходит. Я имел ввиду, что в браузере приложение на next js работает как обычное react приложение

при стандартном использовании да) только первый экран загружается с помощью html, а потом все по классике)

Да, можно) но если у тебя 1000-чи пользователей, интересно сколько оно будет билдить приложение) а потом 1000-чи товаров) 1000-чи услуг и т.д.)

@@it-sin9k да, у меня на одном проекте 1200 статей, то билдится минут 15

@@igorkushnir4966 прикольный опыт)

Буквально читал другой коммент, где описывали проблемы Vite и юнит тестирования :( Но с большего я согласен, что все проблемы люди решили)

@@it-sin9k странно. В экосистеме Vite есть Vitest, который обычно очень хвалят

@@it-sin9k откровенно говоря в том комментарии проблема в человеке, а не в инструменте. Вит не запускает тесты. Да, есть витест, но это лишь юнит тест фрекймворк для вита, никто не мешает использовать тот же джест, к примеру. Но самое главное другое: я уже использовал вит в двух проектах, в обоих ставил витест и тестинг лайбрари, и всё работает без каких-либо проблем.

@@it-sin9k какие могут быть проблемы vite с юнит тестированем? Это как связано может быть?

@@izzei-1614 мб нет нужных дополнительных либ, если с jest'a переезжали + вижу проблему, что vite сейчас ~0.34 версии, к 1.0 много breaking changes может случиться, а jest +- стабильный.

SPA более мощный, гибкий и быстрый, а SSR нужен только для Google бота. SSR уменьшает время первой загрузки, но увеличивает время всех последующих загрузок.

@@paemox Откуда такой поинт, что он последующие загрузки увеличивает?

@@izzei-1614 Нет, React Query позволяет более гибко кешировать данные чем Next.js.

@@paemox React Query кеширует данные только на клиенте. Раз уж упомянули, то его и в Next js использовать можно (нужно). У него есть интеграция под Next.js, что позволяет сделать комбинацию SWR (кеш на клиенте) + ISR (кеш динамических роутов на сервере). Доп. слой кеша на сервере как ни крути ускорит загрузку страницы за счёт уже пререндереной части (или даже полной страницы) HTML.

@@paemox Не стоит недооценивать важность SSR, несколько знакомых писали проекты изначально на SPA, без него т.к. думали что в их случае ну точно лишнее, в итоге в одном месте он все таки понадобился. Какой выход из этой ситуации? Либо писать ещё одну апку как микросервис либо переписывать на Next или ему подобные ВСЁ приложение. А можно было просто стартануть с Next изначально. Я не говорю что минусов у него нету. Один большой минус есть, и это скорость hot reload в разработке, до 2 сек на больших проектах. Ну и наверно в каких-то супер редких случаях он будет вреден. В остальном в 2023 Next js это база

а Remix команда делает еще react-router-dom, мне кажется у них больше точек соприкосновения)

У меня есть видео) где я пытался сделать тоже самое на продакшен проекте)) и тоже самое получил в итоге))

а что вы называете логотипом?) и совместный проект с кем? а прокачать в каком направлении? именно сборки?

@@it-sin9k на футболке ведущего логотип самурайский, поэтому и предположил. проект хочу сделать круче, чтобы показать квалификацию, на что способен.

логотип на майке просто картинка из интернета) А проект прокачать со стороны сборки можно в данном случае только если сделать eject и изучать как работает webpack и улучшать использование лодеров :)

@@it-sin9k спасибо. но не сборку хочется качать. а внутреннюю реализацию.

@@romanmed9035 посмотри видео про паттерны на канале, может натолкнет на какие то мысли :) ru-vid.com/group/PLz_dGYmQRrr8tvi1XGFxLJilUCQQQNj9K

А можете поделиться подробнее как ведете проект?

Как решаете озвученную синяком проблему динамических роутов?

Слышал есть способ использовать React Router, а для SSG - Next.js, но не пробовал. Интерестно, как вы реализовали это?

Мое мнение: это ужасный использования nextjs, потому что в нем возможности конфигурации нулевые, прямо как у cra

@@it-sin9k я думаю прямо так, как это написано в документации некста :) по крайней мере мы так делаем

Да, все больше вакансий вижу на Next.js. Я бы присмотрелся)

Можно) раньше так и делали) и всех это так утомляло, что начали пилить темплейты готовые для старта, а потом выпустили create-react-app, который был самым топовым темплейтом и все на него подсели)

Топчик)

о боже не обновляли СПА - пиздец... депрессия что же делать??????? как наркоманы ей Богу, если инструмент исправно выполняет свои обязанности это не значит что им надо перестать пользоваться только потому что нет каких-то обновлений.

​@@Maxim9575ну че ты к шутке пристал, а

@@Maxim9575 "исправно выполняет" ну тут бы я поспорил))

У меня на жквери СПАшки легко получались. Императивненькие такие.

Прикольно) надо поизучать)

Давно существует, если ничего координально не поменялось, объединяет все минусы SPA и все минусы SSR, нет индексации поисковиками и есть сложная связка, единственный плюс не надо думать об апи.

​@@oWeRQ666 не надо думать об API - сомнительный плюс

@@artemos_tver Это решение для бекендеров, которые привыкли собирать все данные в кучу и рендерить их через шаблоны, как переходный вариант - может подойти, начинать с этого явно не стоит.

Опять в MVC скатываться, нет уж увольте.

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

свой велосипед всегда можно сделать если есть желание)

так то оно так) вопрос только в том, что мир не стоит на месте и выходят новые вебпаки esbuild и т.д. и т.п. и вопрос как скоро cra станет устаревшим)

@@it-sin9k а cra не получивший этих изменений не сможет запускать приложение?

сможет) но вот вышел esbuild, который может запускать проект намного быстрее. А CRA на webpack висит, и уже будет сомнение выбрать кастомную сборку с esbuild или старый добрый CRA поставить) уже выбор не всегда в пользу CRA)

@@it-sin9k ну знач политика в сторону упомянутых фреймворков как след ступень разв реакт

Надо будет познакомиться с этим фреймворком) Что то новенькое!)

Хорош)

У React Router более гибкий роутинг чем в Next, также есть в разработке TanStack Router.

@@paemox О, TanStack Rouer топ. Вообще, будущее за такими роутерами как он, имхо.

Astro быстрее Next JS

@@user-ty8ms7md5x JavaScript быстрее Astro.

ахахахахха

С htmx будет лапши еще больше. Задолбаешься поддерживать. Бросай пока не поздно.

Rust для бека - не слишком ли запарно? Менеджить память вручную это излишне для веб-сервера

я вообще про MPA рассказывал) почему путаница?)

@@it-sin9k Next.js - это не MPA, а SPA, а вы говорили о нем в противовес SPA, хотя он и есть SPA

мысль хорошая) только тот же вебпак выпускает новые версии и хотелось бы, чтобы как и ранее CRA обновлялся тоже до новых версий, а не начинать новый проект, делать eject и сразу допиливать руками миграцию на новую версию webpack

Удачи с CRA на проде. Только если это не админка

Это решение для SSG, поэтому не удивительно, что для CSR оно кривое))

> ну ты хоть минут 5 потрать доки глянуть стартовые ну зачем же так грубо, я понимаю, что это комментарии к RU-vid, но неужели тыкать и грубить незнакомым людям уже считается хорошей идеей? > На этой же странице рекомендация вита.. Разве это похоже на рекоммендацию? If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup, we can’t stop you-go for it! Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more. Скорее похоже на то что, если все что мы рекоммендуем вам не подходит, то есть сборщики соберите себе продукт сами.

СЕО

не) как то вообще не хочется)

На текущем проекте (легаси) окромя геморроя от самописного вебпака ничего не получил.

Как будто года два назад видел тебя под видосами it камасутры. Как твои дела? Я рад что ты вкатился)))

@@aleksandrkim550 🤝 Норм вроде! Сейчас dart&flutter осваиваю ))

так что они на Next.js фейсбук перегоняют?)

@@it-sin9k возможно, мы же не знаем бэклог их разработки

@@it-sin9k Next.js это и есть SPA, вы путаетесь в понятиях

Девченки туда ходят, говорят

а вы сами себе лайк ставите под каждым комментарием) а 2 новых коммента и уже кто-то лайкнул))

вы какая мартыха интересно?

че к чему

@@grenadier4702 *Да.*

так во Vue тоже самое) везде неудобно)

@@it-sin9k ничего подобного, там свой CRA из коробки идёт и никто его вдруг дропать не собирается

я скорее о других проблемах) о миграции с Vue 2 на Vue 3, или миграции с Vuex на penia) много жалоб слышал на больших проектах)

почему же тогда он такой популярный?) и только не говорите, что вот Vue это не поделка, а продуманный взрослый продукт))

@@it-sin9k не знаю как относится vue к популярности react, но это факт, react невероятно популярный и с этим приходится считатся, почему? Это реторический вопрос, так сложилось и не более того. Нет ни одной здравой причины на это, объективно-здравой причины, как бы кто какой инструмент не любил

ну почему же, я помню когда появился React и почему на него мы перешли целой компанией еще в 2014 году. Backbone перестал быть популярным, у него были большие проблемы. AngularJS быстро набрал популярность и подмял рынок под себя огромный, но он был неудобным и там было много проблем. Потом зарелизи React, где были демки с замерами скорости, и он был намного быстрее (спасибо виртуальному ДОМу). И это очень сильно впечатляло. И самое главное после деректив AngularJS 1, компоненты React выглядели невероятно удобно. В итоге Angular был настолько плох, что при всей невероятной популярности, проекты начали массово мигрировать на React. А потом вышел вообще Angular 2. Где обратная совместимость была потеряна очень сильно. И это еще раз напомнило людям, что React хорош. И вот я мигрирую уже с какой-то древней версии React на 18-ую и по сей день нет проблем с миграциями. Что не скажется о Angular или о миграции Vue 2 на Vue 3. В итоге, другие продукты пока не очень конкурентно способны. Лично мое такое видение :)

@@it-sin9k да, вполне вероятно так и было, VDOM выигрывал у Angularjs да и сам react был несомненно проще и вот этом я и вижу проблему react как овер -раздутого продукта, он как был шаблонизатор, так по сути и остался. Когда речь заходит о реальном state-менеджменте на крупном проекте, сложность и бойлерплейты становятся основной часть react приложения. И выходит абсолютно обратная ситуация, даже на винильном JS многие вещи пишутся проще чем на реакт, особено когда речь заходит о сетевом общении. VDOM это давно не киллер фича, реакт объективно ужасен в произодительности и это факт, они все улучшают вроде как этот момент. Обратная совместимость это здорово, но как я сказал прежде, это шаблонизор-библиотека, 2 из 4 основных модуля которого идут как нешние ресурсы, там нечему ломаться при обновлении. Получается картина неероятно популярного продукта, построеного на костылях и работающего не лучшим образом, я не вижу причин для его подобного терражирования, КРОМЕ, как сарафанного радио с тех времен, когда он был лучшим вариантом. Инстурменты давно шагнули вперед и Angular уже давно тет что был, хоть и не без недостатков. На мой взгляд в текущий момент React это каламбур, если не сказать цирк, в нем ведь даже реактивности нет ;) Но люди будут его продвигать и продвигают.

ч0рд! скорей бы узнать что же такое программирование?! так интригующе!

@@it-sin9k да зачем оно) Без него крепче будешь спать, поверь))

Ого! А вот и высокомерный скуф пожаловал в гости! Скажи, тебе нравится С#? Кстати, ты, наверное, тру-кодер, да? Ну там ООП, солид, чистый код и тд. Рест-апишку уже написал? Все? Ну молодец! Геттеры сеттеры не забыл где надо поставить?? Фух! Ну красава! А вообще смешно с таких додиков, которые мнят только свою область трушной.

@@grenadier4702 смешно с додиков, которые в 2023 метаиронию не выкупают и агрятся, как малолетки. А ты вот технологии и парадигмы перечисляешь зачем? Это что-то заоблачное для тебя что ли? Ну база и база.

а как бы вы описали?

Интересно, а что же он тогда? Не ради ли SSR прихотей Vercel Дэн согласился на убогие серверные компоненты, где даже такая БАЗА как контекст не доступен?

@@badcoder1337 Причем тут Ден? Он ушел из реакт тимы и уже не относится к ней. Ден был лишь реакт-адвокатом и общался хорошо с комьюнити.

@@it-sin9k Некст может быть как и SPA, без использование файлового роутера. Некст и как генератор статики может использовать с режимами SSG, ISR.

@@popuguytheparrot_ если не ошибаюсь, он мейнтейнер новой документации по реакт, то есть имеет к реакту непосредственное отношение