Сводка

  • React великолепен… но у него есть некоторые недостатки.
  • Веб-приложения могут получить больше преимуществ от использования Next.js вместо React из-за улучшенного процесса разработки, производительности и поисковой оптимизации.
  • Remix — это фреймворк, который сделает ваше приложение доступным для пользователей почти мгновенно, пока загружаются данные. Это благодаря новой функции React 18, потоковой передаче.
  • После перестройки простого блога в Astro вы можете уменьшить размер своего сайта более чем на 90% — представьте, сколько вы сэкономите, создав более сложный сайт с гораздо большим объемом работы.
  • Вы можете выбрать, хотите ли вы, чтобы ваш компонент был интерактивным при загрузке страницы, когда он был виден, или даже на определенных размерах экрана с помощью Astro.

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

Итак, что нам теперь делать? К счастью, существуют различные решения проблем React. Хотя не все из них учтены, подавляющее большинство. Каждый фреймворк имеет свои преимущества, которые мы обсудим.

Next.js

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

Кроме того, NextJS поддерживает такие функции, как автоматическое разделение кода, маршрутизация, горячая перезагрузка и многие другие. Некоторые веб-приложения могут получить больше преимуществ от использования Next.js вместо React из-за улучшенного процесса разработки, производительности и поисковой оптимизации. Это упрощает поисковым системам индексирование веб-сайтов, ускоряет их загрузку и дает разработчикам более эффективный подход к разработке веб-сайтов. Кроме того, его проще использовать, чем React, при разработке сложных веб-приложений, потому что он предоставляет мощные возможности из коробки, такие как автоматическое разделение кода и маршрутизация, но при этом требует простого обучения.

Выгоды

Улучшение SEO

Несмотря на то, что Google утверждает, что его бот-индексатор правильно анализирует одностраничные приложения, вы наверняка получите бонусные баллы за статически сгенерированные страницы, поскольку они загружаются быстрее и не зависят от JavaScript так сильно, как SPA.

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

Взгляните на разницу между vercel.com и режимом входа в систему на facebook.com, когда вы отключили JavaScript. В первом сценарии вам будут представлены два разных логотипа, и страница не будет загружаться должным образом. Во втором сценарии вам будет показана вся страница, но некоторые анимации будут отключены.

Сторонняя экосистема пакетов

Next.js имеет чрезвычайно большой набор доступных сторонних пакетов. Когда вам нужно добавить определенную функциональность, есть большая вероятность, что есть библиотека, которая добавит желаемую функцию. Аутентификация? Далее-авт. ПВА? Следующий ПВА. Интернационализация? Следующий-i18следующий. Мы могли бы продолжить, но мы думаем, что вы поняли суть.

Управление созданием страниц

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

Когда приложение можно запускать только в браузерах, одна из самых важных функций не будет доступна пользователям. Помимо прочего, вы не сможете обрабатывать запросы, включающие конфиденциальные ключи. В дополнение к этому преобразование форматированного текста в HTML также будет происходить на локальных компьютерах пользователей. Это значительный объем JavaScript, который необходимо отправить. Используя Next.js, вы можете выполнять всю свою работу на собственных серверах. Это будет эффективнее, а пользователи будут вам благодарны.

Общие варианты использования

Next.js — самый универсальный и самый популярный среди фреймворков React. Вы не ошибетесь, выбрав его, но в некоторых случаях вместо этого выбирайте Remix или Astro.

Руководство по миграции



Переход на Next.js: переход с приложения Create React | Next.js
Это руководство поможет вам понять, как перейти от существующего невыгруженного проекта Create React App к Next.js…nextjs.org



Ремикс

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

Remix позволяет разработчикам работать с веб-стандартами, такими как HTTP, HTML и JavaScript, вместо того, чтобы абстрагироваться от них. Он уменьшает объем данных, отправляемых по сети, за счет использования модели сервер/клиент, но при этом допускает прогрессивное улучшение, поэтому пользователи могут использовать приложение без включенного JavaScript. Remix упрощает изучение веб-разработки в целом, поскольку его API упрощают работу со стандартными технологиями, не скрывая их от глаз.

Выгоды

Потоковая передача

Remix — это фреймворк, который сделает ваше приложение доступным для пользователей почти мгновенно, пока загружаются данные. Это благодаря новой функции React 18 — потоковой передаче. Проще говоря, речь идет о показе заполнителя перед отображением правильного контента. Это указывает на то, что что-то происходит, и дает пользователям правильную обратную связь.

Загрузчики

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

Правильно оформленные формы

Реактивные формы часто нарушают привычный способ работы форм. Вы правильно это прочитали. Разработчики ремиксов позаботились о том, чтобы вы могли обрабатывать пользовательский ввод, работая с сетью, а не против нее. Это необходимо для того, чтобы формы также работали с включенным JavaScript. Для сравнения, скорее всего, формы Next не будут работать без JS.

Благодаря мутациям Remix вам не придется ни о чем беспокоиться. JS включен или выключен, не имеет значения.

Общие варианты использования

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

Руководство по миграции



Ремикс | Миграция с React Router
Если вам нужна версия TL;DR вместе с репозиторием с описанием упрощенной миграции, ознакомьтесь с нашим примером React…remix.run



Астро

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

После перестройки простого блога в Astro вы можете уменьшить размер своего сайта более чем на 90% — представьте, сколько вы можете сэкономить, создав более сложный веб-сайт с гораздо большим количеством операций.

Выгоды

Принесите свой фреймворк

С Astro вам не нужно выбирать, какой фреймворк вам больше всего нравится. Vue, Solid, Svelte, Lit и другие будут работать.

React — это, конечно, круто, но не всегда лучше. Иногда вам может понадобиться выбрать другую библиотеку. Тот, который, возможно, легче, реактивен или делает что-то еще лучше, чем библиотека Facebook.

Частичное увлажнение

Статический генератор, популярный среди большого веб-сообщества, контролирует, когда определенные компоненты становятся интерактивными.

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

Вы можете выбрать, хотите ли вы, чтобы ваш компонент был интерактивным при загрузке страницы, когда он был виден, или даже на определенных размерах экрана с помощью Astro. Может быть, вы просто хотите загрузить что-то на клиенте. У вас есть контроль здесь.

Легче и меньше JavaScript

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

Общие варианты использования

Маркетинговые целевые страницы, блоги, списки агентов по недвижимости. В общем, это сайт, на котором не будет

Руководства по миграции



Перенесите существующий проект в Astro
Готовы преобразовать свой сайт в Astro? Советы по миграции см. в одном из наших руководств. Обратите внимание, что многие из этих страниц являются незавершенными…docs.astro.build



Несмотря на то, что текущая версия 2.х, а не 1.х, это видео от Джека Харрингтона до сих пор актуально.

Заключение

React — это логичное решение для создания веб-сайтов, но у него есть свои недостатки, такие как большой размер библиотеки, медленное время загрузки и не такое быстрое, как ожидалось. Для решения этих проблем существуют различные решения, такие как Next.js, Remix или Astro.

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

Не существует единой рамки для всех. С предварительным рендерингом даже React SPA может хватить для самых простых случаев использования. Если вы заботитесь о своих пользователях, вам следует искать лучшее техническое решение после тщательного выбора лучшего инструмента для работы. Разработчики JavaScript стремятся следовать трендам так же быстро, как меняются времена года, но все упомянутые нами фреймворки не подведут, стабильны и проверены. Если вы хотите узнать больше о переводе вашего большого одностраничного приложения на фреймворк, не стесняйтесь обращаться к нам.

Первоначально опубликовано на https://www.itmagination.com.