[Программирование] NextJS и Create-React-App. В чем разница? (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Публикуем новый перевод для начинающих React-разработчиков. Надеемся, статья поможет при выборе подходящего инструмента для вашего следующего проекта.
Когда речь идет о создании новых проектов на React, перед нами стоит очевидный выбор: NextJS или Create-React-App. Gatsby практически перестал использоваться из-за медленных сборок при масштабировании. Кроме того, NextJS становится всё более удобным генератором статических сайтов.
Фотография Артема Сапегина на Unsplash
В этой статье мы рассмотрим преимущества и недостатки NextJS и Create-React-App, а также обсудим, какие сценарии использования подходят для каждого из них.
Create-React-App
Create-React-App — это набор инструментов, позволяющий создавать новые приложения на React. CRA сохраняет зависимости, такие как webpack и babel внутри react-скриптов. Create-React-App упрощает работу с транспайлерами и бандлерами.
Это значит, что обновить эти «скрытые» зависимости совсем несложно. Необходимо подождать нового релиза react-скриптов и обновиться. Нам не придется возиться с исправлением критических изменений в webpack-конфигурации.
Преимущества использования Create-React-App
Не-упрямый инструмент (unopinionated)
Можно использовать любые библиотеки, нет никаких правил и рекомендаций. Выбор библиотеки для роутинга также остается на ваше усмотрение.
Create-React-Apps отрисовывается на стороне клиента
Поскольку мы рендерим Create-React-Apps на стороне клиента, деплой выполняется легко. Мы можем разместить приложение на любом файловом хостинге, например, на S3. С CSR-приложениями намного проще работать!
Недостатки Create-React-App
Cложно настроить
Здесь нет встроенного способа кастомизации приложения. Если вам нужно настроить webpack-конфигурацию, единственный вариант — использовать сторонний инструмент, например, craco или eject. При этом после выполнения команды eject вы потеряете почти все преимущества от использования Create-React-App.
Он абстрагирует сложность
Create-React-App отлично работает до тех пор, пока не придется делать то, что он не поддерживает. Будет тяжко! Скрывая babel- и webpack-конфигурации, Create-React-App упрощает начало работ. Однако это мешает разработчикам узнавать больше о том, как работают эти жизненно важные инструменты.
Негативно влияет на SEO
Поскольку мы рендерим Create-React-Apps на стороне клиента, инструмент сложен для реализации SEO. Create-React-Apps не стоит использовать для e-commerce или маркетинговых задач.
NextJS
Не совсем корректно сравнивать NextJS и Create-React-App, потому что NextJS — нечто большее. В то время как CRA — просто инструмент для создания шаблонов React-приложений, NextJS — это фреймворк для создания React-приложений. Прямо из коробки NextJS предоставляет рендеринг на стороне сервера, создание статических сайтов, serverless-функции и многое другое. Это целый набор инструментов, который дает нам всё необходимое для создания эффективных веб-приложений.
Хотите продвинуться еще дальше при использовании NextJS? Попробуйте HappyKit.
HappyKit обеспечивает NextJS-приложениям повторяющиеся задачи (CRON-таски), очень простую аналитику и флаги функций. Подписаться на бета-версию можно здесь!
Преимущества использования NextJS
NextJS — молниеносный!
Благодаря рендерингу на стороне сервера и генерации статических сайтов, NextJS-приложения работают значительно быстрее. Next берет на себя заботу об оптимизации производительности по умолчанию.
Легкий процесс деплоя
Vercel (компания, создавшая NextJS) упрощает развертывание full-stack React-приложений. Пара щелчков мышью и вы получаете профессиональный пайплайн для деплоя. Он включает предварительные развертывания и развертывание на проде.
NextJS обеспечивает роутинг
NextJS предоставляет быстрый и простой способ создания API в приложениях. Если ваше приложение работает со сторонними API, в таком случае часто нужен собственный API для прокси-запросов и хранения токенов. Роутинг NextJS идеально для этого подходит.
Легко настроить
NextJS позволяет настраивать конфигурации babel или webpack. Добавить webpack-загрузчики или babel-плагины очень просто!
Недостатки использования NextJS
NextJS — упрямый (opinionated) фреймворк
В NextJS есть только один способ работы с маршрутами, и вы не можете его настраивать под себя. NextJS ограничен своим роутом на основе файла, а динамические маршруты возможны только при использовании NodeJS-сервера.
Когда стоит использовать NextJS?
При создании лендинга
NextJS отлично подходит для создания лендинга и реализации других маркетинговых задач.
Когда SEO имеет значение
При создании сайтов для электронной коммерции, поисковая оптимизация важна как никогда. Благодаря рендерингу на стороне сервера, NextJS выделяется и в этом отношении.
При создании веб-сайтов
Рендеринг приложения на стороне сервере избавляет клиентов от необходимости выполнять рендеринг на их устройствах. Для пользователей более медленных устройств это может привести к более быстрой загрузке.
Когда стоит использовать Create-React-App
При создании gated-приложения
Если ваше приложение доступно только для аутентифицированных пользователей, оно теряет большую часть преимуществ рендеринга на стороне сервера. В этом случае CSR-приложения работают нормально, их проще и дешевле размещать на хостинге.
При создании веб-приложений
Веб-приложения в целом меньше выигрывают от рендеринга на стороне сервера. Обычно такие приложения используются пользователями повторно, и мы можем применить кеширование, чтобы обеспечить молниеносную загрузку без затрат и хлопот, связанных с SSR.
Надеемся, что эта статья помогла вам решить, подходят ли NextJS и Create-React-App для вашего следующего проекта. Оба этих инструмента очень круты для создания React-приложений. Победителя выбрать не получится: для некоторых случаев лучше использовать NextJS, а для других — Create-React-App.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Malcolm Laing
===========Похожие новости:
- [Разработка мобильных приложений, Разработка под Android] Как безболезненно мигрировать с RxJava на Kotlin Coroutines+Flow
- [Разработка веб-сайтов, JavaScript, Программирование, Интерфейсы] Фронтендеры — герои. Yehuda Katz объясняет почему (перевод)
- [Программирование, Системное программирование, Реверс-инжиниринг] Планировщик Windows? Это очень просто
- [Программирование, Java, Компиляторы] Java HotSpot JIT компилятор — устройство, мониторинг и настройка (часть 2)
- [Ненормальное программирование, Программирование, Алгоритмы, Prolog, Искусственный интеллект] Проблема логических языков программирования
- [JavaScript, Программирование, Учебный процесс в IT, Карьера в IT-индустрии, Читальный зал] Библиотека Frontend-разработчика, часть 3: Литература уровня «Middle» и выше
- [Программирование микроконтроллеров] STM32 Assembler Editor: Гора так и не сдвинулась с места, Магомед идет к ней
- [Промышленное программирование, Программирование микроконтроллеров] Программирование Modbus RTU Master на примере Simatic S7-1200 и ПЧ Sinamics V20
- [Программирование, Алгоритмы, Компиляторы] Модификация исполняемого кода как способ реализации массивов с изменяемым границами
- [Программирование, Читальный зал] Дао программирования (перевод)
Теги для поиска: #_programmirovanie (Программирование), #_next.js, #_react, #_blog_kompanii_timeweb (
Блог компании Timeweb
), #_programmirovanie (
Программирование
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 25-Ноя 19:48
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Публикуем новый перевод для начинающих React-разработчиков. Надеемся, статья поможет при выборе подходящего инструмента для вашего следующего проекта.
Когда речь идет о создании новых проектов на React, перед нами стоит очевидный выбор: NextJS или Create-React-App. Gatsby практически перестал использоваться из-за медленных сборок при масштабировании. Кроме того, NextJS становится всё более удобным генератором статических сайтов.  Фотография Артема Сапегина на Unsplash В этой статье мы рассмотрим преимущества и недостатки NextJS и Create-React-App, а также обсудим, какие сценарии использования подходят для каждого из них. Create-React-App Create-React-App — это набор инструментов, позволяющий создавать новые приложения на React. CRA сохраняет зависимости, такие как webpack и babel внутри react-скриптов. Create-React-App упрощает работу с транспайлерами и бандлерами. Это значит, что обновить эти «скрытые» зависимости совсем несложно. Необходимо подождать нового релиза react-скриптов и обновиться. Нам не придется возиться с исправлением критических изменений в webpack-конфигурации. Преимущества использования Create-React-App Не-упрямый инструмент (unopinionated) Можно использовать любые библиотеки, нет никаких правил и рекомендаций. Выбор библиотеки для роутинга также остается на ваше усмотрение. Create-React-Apps отрисовывается на стороне клиента Поскольку мы рендерим Create-React-Apps на стороне клиента, деплой выполняется легко. Мы можем разместить приложение на любом файловом хостинге, например, на S3. С CSR-приложениями намного проще работать! Недостатки Create-React-App Cложно настроить Здесь нет встроенного способа кастомизации приложения. Если вам нужно настроить webpack-конфигурацию, единственный вариант — использовать сторонний инструмент, например, craco или eject. При этом после выполнения команды eject вы потеряете почти все преимущества от использования Create-React-App. Он абстрагирует сложность Create-React-App отлично работает до тех пор, пока не придется делать то, что он не поддерживает. Будет тяжко! Скрывая babel- и webpack-конфигурации, Create-React-App упрощает начало работ. Однако это мешает разработчикам узнавать больше о том, как работают эти жизненно важные инструменты. Негативно влияет на SEO Поскольку мы рендерим Create-React-Apps на стороне клиента, инструмент сложен для реализации SEO. Create-React-Apps не стоит использовать для e-commerce или маркетинговых задач. NextJS Не совсем корректно сравнивать NextJS и Create-React-App, потому что NextJS — нечто большее. В то время как CRA — просто инструмент для создания шаблонов React-приложений, NextJS — это фреймворк для создания React-приложений. Прямо из коробки NextJS предоставляет рендеринг на стороне сервера, создание статических сайтов, serverless-функции и многое другое. Это целый набор инструментов, который дает нам всё необходимое для создания эффективных веб-приложений. Хотите продвинуться еще дальше при использовании NextJS? Попробуйте HappyKit. HappyKit обеспечивает NextJS-приложениям повторяющиеся задачи (CRON-таски), очень простую аналитику и флаги функций. Подписаться на бета-версию можно здесь! Преимущества использования NextJS NextJS — молниеносный! Благодаря рендерингу на стороне сервера и генерации статических сайтов, NextJS-приложения работают значительно быстрее. Next берет на себя заботу об оптимизации производительности по умолчанию. Легкий процесс деплоя Vercel (компания, создавшая NextJS) упрощает развертывание full-stack React-приложений. Пара щелчков мышью и вы получаете профессиональный пайплайн для деплоя. Он включает предварительные развертывания и развертывание на проде. NextJS обеспечивает роутинг NextJS предоставляет быстрый и простой способ создания API в приложениях. Если ваше приложение работает со сторонними API, в таком случае часто нужен собственный API для прокси-запросов и хранения токенов. Роутинг NextJS идеально для этого подходит. Легко настроить NextJS позволяет настраивать конфигурации babel или webpack. Добавить webpack-загрузчики или babel-плагины очень просто! Недостатки использования NextJS NextJS — упрямый (opinionated) фреймворк В NextJS есть только один способ работы с маршрутами, и вы не можете его настраивать под себя. NextJS ограничен своим роутом на основе файла, а динамические маршруты возможны только при использовании NodeJS-сервера. Когда стоит использовать NextJS? При создании лендинга NextJS отлично подходит для создания лендинга и реализации других маркетинговых задач. Когда SEO имеет значение При создании сайтов для электронной коммерции, поисковая оптимизация важна как никогда. Благодаря рендерингу на стороне сервера, NextJS выделяется и в этом отношении. При создании веб-сайтов Рендеринг приложения на стороне сервере избавляет клиентов от необходимости выполнять рендеринг на их устройствах. Для пользователей более медленных устройств это может привести к более быстрой загрузке. Когда стоит использовать Create-React-App При создании gated-приложения Если ваше приложение доступно только для аутентифицированных пользователей, оно теряет большую часть преимуществ рендеринга на стороне сервера. В этом случае CSR-приложения работают нормально, их проще и дешевле размещать на хостинге. При создании веб-приложений Веб-приложения в целом меньше выигрывают от рендеринга на стороне сервера. Обычно такие приложения используются пользователями повторно, и мы можем применить кеширование, чтобы обеспечить молниеносную загрузку без затрат и хлопот, связанных с SSR. Надеемся, что эта статья помогла вам решить, подходят ли NextJS и Create-React-App для вашего следующего проекта. Оба этих инструмента очень круты для создания React-приложений. Победителя выбрать не получится: для некоторых случаев лучше использовать NextJS, а для других — Create-React-App. =========== Источник: habr.com =========== =========== Автор оригинала: Malcolm Laing ===========Похожие новости:
Блог компании Timeweb ), #_programmirovanie ( Программирование ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 25-Ноя 19:48
Часовой пояс: UTC + 5