Выбор неправильного фреймворка может стать кошмаром
Это был 2020 год, и первая блокировка только началась. Как и у людей со всего мира, у меня появилось незапланированное свободное время.
Я решил посвятить это свободное время изучению новых технологий и в итоге изучил React и отточил свои навыки Node.js.
Я создал платформу для ведения блогов, используя React во внешнем интерфейсе и сервер Node.js в качестве внутреннего. Платформа имеет все функции, которые вы ожидаете от готового к работе приложения:
- Несколько вариантов входа (вход через Google, Twitter и т. Д.).
- Многофункциональный редактор для написания красивых блогов.
- Возможность создавать черновики и редактировать опубликованные сообщения.
- Аналитика, а также админка.
Но именно здесь я извлек некоторые из самых важных уроков, связанных с веб-разработкой.
С точки зрения пользователя все выглядело хорошо, но с точки зрения разработчика поддерживать кодовую базу было кошмаром.
Именно тогда я понял, что на самом деле означает слоган Next.js «React Framework for Production».
В первую очередь было 5 основных причин, по которым я перешел с React на Next.js.
1. React не оптимизирован для SEO
Каждый блог или готовый к работе сайт должен быть оптимизирован для поисковых систем, за исключением некоторых сайтов, таких как панель управления или пользовательские настройки.
Прошел почти год, а большинство блогов моего сайта React до сих пор не появляются в поиске Google, даже если я специально ищу с помощью URL и других инструментов.
Это после того, как я изо всех сил старался сделать React SEO-дружественным, используя библиотеки вроде React Helmet.
Плохие результаты SEO у React связаны с тем, что он не обрабатывается на сервере. С другой стороны, основным преимуществом Next.js является то, что он поддерживает рендеринг на стороне сервера.
Для увеличения органического трафика требовалось хорошее SEO, и Next.js, казалось, был решением, которое это гарантировало.
Однако я хотел бы отметить, что это неправда, что клиентские приложения ReactJS не сканируются роботами Google. Они есть, но SEO не так хорош, как у Next.js.
Если вы хотите подробно прочитать о рендеринге и SEO в приложениях на JavaScript, загляните в мой блог, где я освещаю эти темы на языке непрофессионала.
2. Проблемы с одобрением AdSense
React создает одностраничные приложения (SPA), которые по сути представляют собой одну страницу, загружаемую один раз.
Когда вы перемещаетесь по странице и переходите к другим страницам, данные загружаются динамически.
Хотя СПА известны своей скоростью, отзывчивостью и создают атмосферу нативного приложения, у них есть свои недостатки.
Я столкнулся с одним из недостатков, когда пытался монетизировать сайт с помощью Google's AdSense.
AdSense просто не обнаружил код, который они просили меня вставить в файл index.html, и когда это произошло неожиданно, ему не удалось найти никакого содержания на сайте.
Это связано с тем, что блоги загружаются динамически, и AdSense должен видеть подлинное содержание, прежде чем разрешить вашему сайту показ рекламы.
Простым поиском в Google я обнаружил, что это обычная проблема для многих сайтов SPA.
Эта проблема возникает из-за отсутствия надлежащей поддержки рендеринга на стороне сервера - еще одну вещь, которую Next.js может легко исправить.
3. Более простая навигация
Понимание навигации и маршрутизации в React требует от человека крутого обучения, особенно если человек работает с такими фреймворками, как Vue (например, я).
Маршрутизация в React использует пакет React-Router-Dom, и на первый взгляд код может показаться устрашающим. Вот пример того, как выглядит маршрутизация в React.
Поскольку мой сайт был многофункциональным, у меня было множество страниц от ожидаемого блога и страницы входа до страницы часто задаваемых вопросов и условий обслуживания.
Next.js упростил маршрутизацию для всех этих страниц. Он предлагает маршрутизатор на основе файловой системы, построенный на концепции страниц, а страница в основном является компонентом React.
Добавление этих файлов «page» в каталог «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 решает все эти проблемы с помощью компонента изображения Next.js и автоматической оптимизации изображений, который заменяет HTML-тег <img>.
При его использовании изображения по умолчанию загружаются лениво, и браузеры учитывают размеры изображения, оставляя поле пустым до тех пор, пока изображение не будет загружено. Это предотвращает случайное появление изображения и улучшает взаимодействие с пользователем.
Кроме того, компонент Next.js «next / image» уменьшает размер изображения по требованию с использованием новейших форматов, таких как WebP, который на 30% легче, чем его аналог в формате JPEG.
Более того, эта оптимизация выполняется по запросу, поэтому время сборки не затрагивается, а образы из внешних источников также оптимизируются.
Заключение
React - самый популярный фреймворк и, без сомнения, обязательный к изучению в книге каждого веб-разработчика.
Однако это не означает, что React подходит для всех типов сайтов. Как и любой другой фреймворк, у React есть свои подводные камни.
Next.js, созданный на основе React, призван предоставить решения некоторых проблем React, а также облегчить общую разработку за счет внедрения встроенных решений для некоторых современных проблем.
Переключение с React на Next возможно, но если вы только начинаете, разумно выбрать Next вместо React, а не переходить позже.
При этом не рекомендуется использовать Next.js для каждого проекта и полностью отказываться от React.
Каждый веб-сайт и приложение создаются с конкретными намерениями и целями, которые могут сыграть жизненно важную роль при выборе правильной структуры и библиотек.
К сожалению, в моем случае я понял, что цели веб-сайта после того, как я полностью построил его в React, только чтобы обнаружить, что мне следовало использовать Next.js вместо React по причинам, описанным выше.
Надеюсь, вы кое-что узнали из моей ошибки и сможете выбрать подходящий фреймворк.
Спасибо за прочтение!
Больше контента на plainenglish.io
