Пять причин перейти с React на Next.js

Программа перевода самородков React.js

Пять причин перейти с React на Next.js

Выбор неправильного фреймворка может превратиться в кошмар.

11.jpg

Это было в 2020 году, когда начался первый эпидемический карантин. Как и у людей во всем мире, у меня появляется незапланированное свободное время.

Я решил использовать это свободное время, чтобы изучить новые методы, в конечном итоге изучив React и улучшив свои навыки работы с Node.js.

Я создал платформу для ведения блога, используя React для внешнего интерфейса и сервер Node.js для внутреннего интерфейса. Платформа имеет все функции, которые вы ожидаете от стандартного приложения.

  1. Несколько вариантов входа в учетную запись (вход с помощью Google, учетная запись Twitter и т. д.).

  2. Многофункциональный редактор для написания красивых блогов.

  3. Возможность создавать черновики и редактировать опубликованные статьи.

  4. Аналитика и административная панель.

В процессе я получил некоторые ценные эмпирические знания о веб-разработке.

С точки зрения пользователя все вроде нормально, но для разработчика поддержка кода проекта — это кошмар.

Именно тогда я понял, что на самом деле означает слоган Next.js — «React framework for production».

22.jpg

Вот пять основных причин, по которым я перешел с React на Next.js.

1. React не оптимизирован для SEO

Каждый блог или производственный сайт необходимо оптимизировать для поисковых систем (SEO), за исключением некоторых сайтов, таких как панели управления или пользовательские настройки.

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

После этого я попытался использоватьReact Helmetи другие библиотеки для SEO вашего сайта React.

React не оптимизирован для SEO, потому что он не отображается на стороне сервера. Напротив, основное преимущество Next.js заключается в том, что он поддерживает рендеринг на стороне сервера.

Хорошее SEO-решение может увеличить эффективный трафик, и Next.js, похоже, является решением, которое гарантирует это.

Тем не менее, я хотел бы отметить, что клиентские приложения ReactJS могут быть просканированы ботами Google. Их можно сканировать, но производительность SEO не так хороша, как у Next.js.

Если вы хотите узнать больше о рендеринге и SEO в приложениях JavaScript, загляните в мой блог, где я освещаю эти темы простым языком. Руководство по SEO для начинающих веб-приложений JavaScript, написанное после создания нескольких веб-сайтов:Вот что я узнал об эффективном трафике и SEO — javascript.plainenglish.io

2. Проблемы с обзором AdSense

React создает одностраничное приложение (SPA), которое по сути представляет собой одну страницу, которую нужно загрузить только один раз.

Данные загружаются динамически при просмотре страниц и переходе на другие страницы.

Хотя приложения для одиноких страниц известны, что он отзывчивый и предоставления нативных приложений, у них есть недостатки.

при попытке использоватьAdSense от GoogleКогда дело доходит до монетизации сайта, я обнаружил недостаток.

Вместо того, чтобы просто обнаружить код, который они попросили меня поместить в файл index.html, AdSense, к удивлению, вообще не смог найти никакого контента на сайте.

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

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

Корень этой проблемы — отсутствие надлежащей поддержки рендеринга на стороне сервера, и Next.js может легко решить эту проблему.

3. Упрощенная навигация

Понимание навигации и маршрутизации React требует много обучения, особенно если человек ранее использовал фреймворк вроде Vue (как я).

Маршрутизация React использует метод, называемыйReact-Router-DomВ зависимости от пакета код выглядит сложным.Вот пример маршрутизации React.

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

Next.js упрощает маршрутизацию для всех этих страниц. Он обеспечивает навигацию маршрутизации на основе файловой системы, основанную на концепции страницы, которая в основном является компонентом React.

Добавление этих файлов подкачки в каталог pages автоматически делает их маршрутом.

Это значительно упрощает настройку маршрутизации, и разработчику, переходящему с Vue и Nuxt, кажется, что это легко принять.

ты сможешьздесьУзнайте больше об этом.

4. Поддержка маршрутизации API

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

ты положилpages/apiЛюбые файлы в каталоге будут считаться конечными точками API (как бессерверная функция Node.js).

Это очень полезная функция, если вам нужно запустить некоторые функции на стороне сервера, поскольку эти конечные точки не являются частью зависимостей на стороне клиента.

Например, если на вашем веб-сайте есть форма ввода, вы можете отправить запрос POST на конечную точку API, и он проверит ввод и сохранит данные в базе данных.

По сути, это позволяет создавать бессерверные функции, что позволяет мне комбинировать код Node.js и React в одном приложении Next.js.

Маршрут API внешнего интерфейса, созданный next.js, завершается NEXT с использованием самого себя.

Это может помочь, если вы планируете создать мобильное приложение и получать данные с сервера.

5. Встроенный компонент изображения

Как я упоминал ранее, я создаю сайт блога, и любой блог должен иметь не только текст, но и медиаконтент.

Глядя только на сам блог, в нем есть несколько изображений в дополнение к письменному содержанию.

Согласно документации Next.js, изображения составляют 50% содержимого страницы..

Как правило, размер медиа-файлов имеет ограничение, например, 25 МБ.

Кроме того, некоторые загруженные изображения не находятся в области просмотра пользователя, то есть пользователю приходится прокручивать вниз, чтобы увидеть изображения.

Поэтому необходимо учитывать множество факторов, таких как отложенная загрузка, сжатие, размер и формат.

Next.js решает все эти проблемы, используя компоненты изображений и автоматическую оптимизацию изображений, которая заменяет HTML.<img>Этикетка.

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

Кроме того, Next.jsnext/imageКомпонент использует новейшие форматы, такие как WebP, который уменьшает размер изображения по запросу, а WebP на 30% легче, чем аналог JPEG.

Кроме того, эти оптимизации выполняются по запросу, поэтому время сборки не влияет, а изображения извне также оптимизируются.

Резюме этой статьи

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

Однако это не означает, что React подходит для любого типа веб-сайтов. Как и у других фреймворков, у React есть свои недостатки.

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

Переключение с React на Next работает, но если вы только начинаете, выбирайте Next вместо React с умом.

Следует отметить, что также не рекомендуется использовать Next.js в каждом проекте и полностью отказываться от React.

Каждый веб-сайт и приложение создаются со своими конкретными намерениями и целями, которые могут сыграть решающую роль в выборе правильных фреймворков и библиотек.

К сожалению, в моем случае, после создания сайта полностью на React, я понял, что должен использовать Next.js вместо React по вышеуказанным причинам.

Надеюсь, вы научитесь чему-то на моих ошибках и сможете выбрать подходящий фреймворк.

Спасибо за прочтение!

Для получения дополнительной информации, пожалуйста, посетитеplainenglish.io.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории