Я не переходил с CRA на Next - вот почему

Начну с того, что я большой поклонник Next.js. Это прекрасная среда для создания приложений React, особенно когда вам нужен рендеринг на стороне сервера (SSR). Однажды я напишу статью, в которой расскажу обо всех достоинствах этого фреймворка, но, к счастью, многие люди уже этим занимаются.

Вместо этого я сейчас объясню, почему я перенес один из своих многочисленных побочных проектов с Next.js на Create React App.

Примечание. Если вас не интересует предыстория, прокрутите вниз и сразу переходите к заключению.

Начать бесплатно

Когда у вас много сторонних проектов (которые не приносят вам денег), хорошо, если вы можете разместить их бесплатно. У меня есть проект Ruby on Rails, размещенный в личном домене на Heroku, который уже стоит мне более 30 долларов в месяц, и это нормально - если у вас только один проект или этот проект делает тебе немного денег ...

Самое замечательное в создании приложения React с Firebase и Firestore заключается в том, что вы можете создать приложение с полным стеком и запустить его без каких-либо затрат (за исключением собственного доменного имени). Я сделал это с такими сторонними проектами, как FlowReads и MakerMove. Я также сделал React Milkshake, шаблон для создания приложений с этим стеком. Для нового побочного проекта я использовал тот же подход, но с Nextjs, и, хотя он хорошо работает, я столкнулся с одной проблемой.

Развертывание на Vercel

Лучшее место для развертывания вашего приложения Nextjs - это Vercel (ранее Zeit). Хотя вы можете начать бесплатно, мне пришлось перейти на групповой план (начиная с 20 долларов в месяц), если я хотел, чтобы мой текущий проект продолжал работать.

С Next.js вы можете выбрать, хотите ли вы, чтобы ваши страницы создавались статически или отрисовывались на сервере. Если ваша страница отображается на сервере, это означает, что во время сборки для вашей страницы создается бессерверная функция. Команда Zeit просто решила ограничить количество бессерверных функций до 12, а в моем приложении было 14 страниц. Это означало, что я больше не мог развертывать это приложение - из-за этого ограничения оно вылетало из строя во время процесса сборки. Я могу понять решение ограничить количество бессерверных функций на уровне бесплатного пользования, но самая неприятная часть этого заключается в том, что мой сайт уже был развернут. После того, как Zeit добавил это ограничение, я не мог вносить изменения без обновления!

Вы можете подумать: «Но почему вы рендерируете каждую страницу на сервере? Разве нельзя просто статически обслужить хотя бы пару страниц? " Это то, что также рекомендовала Zeit, и это именно то, что я хотел. Единственная проблема в том, что с моей текущей реализацией (с использованием Redux) я не могу. Позволь мне объяснить.

SSR против SSG

С Next.js вы можете использовать getIntialProps (или начиная с версии 9.3 getServerSideProps и getStaticProps) внутри компонентов вашей страницы, которые определяют, должна ли страница быть отрисована на сервере или статически сгенерирована (подробнее об этом здесь). Если вам не нужны какие-либо данные внутри вашей страницы, они будут генерироваться статически, но когда вы используете getInitialProps внутри _app.js все ваши страницы обрабатываются сервером. Вы получите это предупреждающее сообщение при создании приложения: Вы отказались от автоматической статической оптимизации из-за getInitialProps на страницах / _app.

Теперь, когда вы используете Redux в качестве библиотеки управления состоянием, вы, вероятно, используете next-redux-wrapper, поэтому вам не нужно реализовывать что-либо сложное, чтобы синхронизировать состояние клиента в хранилище с сервером и т. Д. По крайней мере, это то, что я сделал , и вот в чем проблема: эта библиотека вызывает getInitialProps для вашего _app.js файла, поэтому все ваши страницы будут реализовывать рендеринг на стороне сервера.

Честно говоря, моему приложению не требовался серверный рендеринг, потому что все находится за экраном входа в систему. Я в основном использовал Next.js только потому, что хотел поэкспериментировать с ним. У меня, вероятно, было больше возможностей, чем просто рефакторинг моего проекта до CRA, но я подумал, что проблемы, которые могут возникнуть из-за рендеринга на стороне сервера (даже с Next.js), не стоят времени для проекта, который даже не извлекает из этого выгоду. так много. Мне также нравится размещать вещи бесплатно, пока я все еще нахожусь в стадии разработки, а с Next.js я не уверен, что смогу.

Заключение

Если вы используете redux в своем приложении Nextjs (с next-redux-wrapper) и имеете более 12 маршрутов, вам нужно будет перейти на групповой план, если вы разместите свой проект на Zeit.

Если вам не нужен SSR, вы используете redux и хотите разместить его бесплатно, вы, вероятно, не захотите использовать Next.js. Кроме того, если вы хотите использовать SSG-параметры Next.js, вам не следует использовать Redux.

В противном случае я могу порекомендовать вам попробовать Next.js, потому что это действительно хороший фреймворк!