Мы — техническая команда WeTal.com и любим пробовать что-то новое как можно чаще. Миграция обычно представляет собой огромную задачу, но у нас были серьезные проблемы с SEO, и мы подошли к моменту, когда React не мог нас продвинуть. Вот наш большой опыт перехода на NextJS.

Поэтому в прошлом месяце мы перенесли WeTal из приложения Create React в приложение Next Js. Вот некоторые извлеченные уроки с плюсами и минусами. Причина, по которой мы перестроили нашу платформу I Next, заключалась в поисковой оптимизации. Нам было сложно индексировать страницы в Google с помощью React, и Next решил наши проблемы, поэтому мы решили потратить 2–3 недели на перестройку сайта.

Next ничем не отличается от React. Он очень похож по структуре и построен на основе React. Тем не менее, полезно знать основное различие.

Визуализация и производительность на стороне сервера

Одно из ключевых различий между ReactJS и Next.js заключается в том, что Next.js предоставляет встроенные возможности рендеринга на стороне сервера (SSR), а ReactJS — нет. Если вы проверите исходный код на нашей следующей странице, вы увидите весь код, напечатанный на странице. В то время как с React вы видите только сценарий JavaScript, но не видите никакого ценного контента.

Это оптимально для производительности и SEO и производительности, поскольку Next создает настоящие страницы. Next.js упрощает реализацию SSR, в то время как с ReactJS вам придется настраивать его вручную. SRR означает, что страница отображается из бэкэнда как настоящая страница, что значительно улучшило нашу SEO и производительность.

SEO

Очевидным преимуществом Next является SEO. Когда каждая страница находится на стороне сервера и отображает HTML, с SEO лучше работать. Примером того, что работает сегодня, является то, что когда мы публикуем страницу с платформой Next JS, например. на Facebook Facebook просто читает первое изображение, заголовок и описание страницы,

Мы не могли заставить React читать уникальное изображение или текст каждой страницы — он всегда печатал изображение WeTal по умолчанию и слоган по умолчанию. Next JS решил эту проблему: каждая страница получила свое уникальное изображение с текстом, используя HTML. Возможно, в React есть какой-то способ решить эту проблему, но для нас это было неочевидно, в то время как Next решает это из коробки.

Маршрутизация

Еще одно важное различие между двумя фреймворками — их подход к маршрутизации. ReactJS не поставляется со встроенной системой маршрутизации, поэтому разработчики должны использовать сторонние библиотеки, такие как React Router, для обработки маршрутизации на стороне клиента. Напротив, Next.js имеет встроенную систему маршрутизации, которая упрощает маршрутизацию на стороне клиента и поддерживает более динамичные параметры маршрутизации.

Хостинг

Мы использовали Vercel в качестве хостинга для нашего интерфейса Next JS, который является чрезвычайно гибким инструментом. В несколько кликов наш внешний интерфейс был запущен с тестовым URL-адресом, который быстро подключался к нашему домену wetal.com. С React мы использовали AWS, и для размещения внешнего интерфейса на S3 потребовалось гораздо больше шагов.

Маршрутизация на основе файловой системы

Next.js также предоставляет уникальную функцию, такую ​​как маршрутизация на основе файловой системы, которая позволяет разработчикам легко и интуитивно организовывать свой код и страницы. Каждый файл становится маршрутом — то есть URL-адресом с тем же именем. Если ваша страница /my-profile/john, то файловая структура в вашем коде тоже такая, и Next автоматически создает эту страницу, что упрощает запуск и навигацию. С ReactJS разработчикам приходится вручную настраивать маршрутизацию и файловую структуру.

Встроенные функции

Next.js поставляется с несколькими встроенными функциями, недоступными в ReactJS, включая автоматический обмен кодом, оптимизированные изображения и бессерверные функции. Эти функции могут помочь повысить производительность и масштабируемость приложений, а также сократить объем ручной настройки, необходимой разработчику.

Суть в том, что мы влюбились в Next JS и его преимущества и будем продолжать создавать все наши платформы в Next. Перейти на Next из React очень просто. Мы обновим эту запись в блоге, если заметим очевидные недостатки, но пока мы очень довольны преимуществами.