Когда использовать среду реагирования, такую ​​как Next или Gatsby vs Create React App

Я нахожусь в фазе быстрого прототипирования моего опыта обучения React/javascript. Мне было интересно, когда люди достигнут рамки, такой как Next.js или Gatsby.js, и стандартное приложение Create React.

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

Спасибо!

Ответы

Ответ 1

Я в одной лодке. Я начал с CRA, чтобы создать SPA, который был бы прекрасен, чтобы начать с кривой обучения. Но вскоре я понял два важных вопроса:

  1. Совместное использование в социальных сетях: я не смог изменить теги OGP для каждого маршрута. Эффект от этого заключается в том, что только базовый маршрут (правильно настроенный с тегами OGP) при совместном использовании в социальной сети может создать карту (твиттер), любой другой маршрут, который вы используете, будет в основном отображаться как пустая. Это справедливо и для Facebook и LinkedIn. См. Здесь.
  2. Оптимизация в поисковых системах: хотя было несколько статей о поисковых системах, способных правильно сканировать ваш СПА для индексации, по моему опыту это не было удовлетворительным. Например, в Google я заметил, что только домашняя страница индексируется, и она не обрабатывается правильно. Отдельные заголовки из отдельных элементов объединяются вместе. Бинг, похоже, не проиндексировал его. Может быть, Google проиндексировал его, потому что я проиндексировал домашнюю страницу с помощью Google Search Console. Это не выполнимое решение, если мне нужно повторно индексировать вручную каждую новую страницу или после обновления страницы.

Create-React-App: действительно хороший инструмент начальной загрузки, чтобы начать создавать SPA.

Gatsby/React-Static: аналогично Create-React-App, но создает вывод HTML-сборки, а значит, "предварительный рендеринг". Мне еще предстоит поэкспериментировать с этим. Я надеюсь, что это разрешит (1) и (2), так как теперь у меня теперь могут быть разные теги OGP в HTML, которые подаются со статического сервера сайта (S3/Azure Blobs/Github Pages) вместо того, чтобы их локально изменять после выборки. Я не уверен, что это будет работать. Дополнительное преимущество здесь состоит в том, что, поскольку Gatsby уже предварительно создает во время сборки, пользователь получает лучшую производительность. (Может быть, кто-то, кто испытал это с Гэтсби, может прояснить, или я отредактирую этот ответ после того, как я это сделаю.) Обновление (2/19/2018): Я могу подтвердить, что (1) решается Gatsby.js, но все еще размещается как статический Веб-сайт.

Next.js: Если Gatsby не решит (1) и (2), Next.js будет моим возвратом, чтобы создать полномасштабное приложение SSR. Проблема здесь заключается в том, что теперь мне придется использовать PaaS для размещения сайта (например, Azure Web Apps или AWS ElasticBeanStalk или Heroku) вместо статического сервиса хостинга сайтов (Azure Blob, AWS S3, Github Pages). Это будет немного дороже и немного больше работы по настройке конвейеров CI/CD.

Также см. Эти альтернативы, перечисленные в документах CRA.

Ответ 2

Недавно я очень много исследовал эту тему, особенно create-react-app vs. Gatsby.js, и я узнал, что оба инструмента позволяют сразу писать код реакции, не беспокоясь о настройке. Однако, например, Гэтсби предлагает, помимо всего прочего, рендеринг на стороне сервера во время сборки, что имеет решающее значение для SEO. Вам не нужен какой-либо сервер, который бы отображал ваши представления, что имеет место для Next.js, потому что они уже выполняются во время сборки. когда пользователь посещает ваш сайт, сначала будет загружена версия HTML, и после загрузки javascript ваш сайт станет полнофункциональным веб-приложением для реагирования.

Хорошо, что все они имеют один и тот же слой, чтобы вы могли перейти от одного инструмента к другому. вы можете проверить переход из приложения create-react-app в Gatsby.js, который подробно излагается.

Ответ 3

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

Ответ 4

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

Используйте Gatsby для одностраничного сайта быстрее и проще в развертывании. использовать Next.js при работе с REST API (наверное...)

это до вас. Хороший разработчик всегда найдет способ легко и быстро работать.