Изучите основные сильные стороны, уникальные предложения и потенциальные проблемы Next.js, Astro и Remix, чтобы решить, что использовать для вашего следующего проекта.
Введение
Навигация по ландшафту современной фронтенд-разработки может быть похожа на путешествие в джунгли, заполненные новыми библиотеками и фреймворками. Выделяются три многообещающих гиганта: Next.js, Astro и Remix. Каждый из этих интерфейсных фреймворков предлагает мощные функции и уникальные подходы, но какой из них будет доминировать в вашем следующем проекте?
Сегодня в нашем колизее веб-разработки мы сталкиваем этих тяжеловесов друг с другом. Мы углубимся в их основные сильные стороны, уникальные предложения и потенциальные проблемы, помогая вам решить, кто из претендентов заслуживает короны в вашем стеке технологий. Пристегнитесь для окончательного вскрытия интерфейсных фреймворков!
Что такое Астро?
Astro — это современная веб-инфраструктура, построенная на React и конструкторе статических сайтов, который требует минимального количества JavaScript или вообще не требует его для создания молниеносных, высокопроизводительных веб-сайтов с современным интерфейсом разработчика. Он позволяет создавать веб-сайты с использованием компонентов пользовательского интерфейса из ваших любимых фреймворков пользовательского интерфейса JavaScript, таких как React, Svelte, Vue и других.
Веб-сайты Astro полностью статичны, без кода JavaScript. Когда для запуска компонента (например, карусели изображений, темного и светлого режима) требуется код JavaScript, Astro загружает только этот компонент и все необходимые зависимости. Остальная часть сайта по-прежнему представляет собой статичный облегченный HTML. Ознакомьтесь с учебным пособием Astro по началу работы, чтобы получить отличное представление об игре.
- Astro более гибок: вы можете создавать пользовательский интерфейс с любой популярной библиотекой компонентов (React, Preact, Vue, Svelte, Solid и другие) или с синтаксисом компонентов Astro, похожим на HTML, похожим на HTML + JSX.
- Astro может строить статически через SSG или развертывать в средах SSR через адаптеры: Deno, Vercel без сервера, Netlify без сервера и Node.js, и это еще не все.
Что такое Next.js?
Next.js — это фреймворк React с открытым исходным кодом для быстрого создания серверных приложений React. Он добавляет структуру и функции, а также управляет инструментами и настройками React, необходимыми для вашего приложения.
Его можно использовать для решения общих требований к приложениям, таких как маршрутизация, поиск данных и интеграция. Next.js был создан, чтобы предоставить простую в использовании среду разработки, которая сократит время и усилия, необходимые для разработки полноценных веб-приложений, поддерживающих SSR, и улучшит работу конечных пользователей и разработчиков. Документация — отличное место для начала, если вы хотите начать работу с этим фреймворком.
Что такое Ремикс?
Remix — это нативная полнофункциональная среда JavaScript для создания современных, быстрых и устойчивых пользовательских интерфейсов. Он объединяет клиент и сервер с веб-стандартами, поэтому вы можете меньше думать о коде и больше о своем продукте. (по данным официального сайта remix.run)
💡 Кроме того, для сложных проектов, включающих многократное использование одних и тех же компонентов, рассмотрите возможность использования центра управления компонентами, такого как Bit. С Bit вы можете извлекать компоненты из своей кодовой базы и использовать их во всем проекте с помощью простой команды, уменьшая дублирование кода и минимизируя шаблоны.
Узнайте больше здесь:
Ключевая особенность
Астро
- Нулевая конфигурация: любая описанная конфигурация будет обрабатываться нашей командой
astro addCLI (т. е. добавить поддержку Svelte с помощьюastro add svelte). - Astro не зависит от пользовательского интерфейса: это означает, что вы можете использовать свою собственную структуру пользовательского интерфейса (BYOF).
- Простота в использовании: цель Astro — сделать его доступным для каждого веб-разработчика. Astro был разработан, чтобы чувствовать себя знакомым и доступным независимо от уровня навыков или опыта веб-разработки.
- Быстрый по умолчанию: веб-сайт Astro может загружаться на 40 % быстрее и на 90 % меньше JavaScript, чем сайт, созданный с помощью самой популярной веб-инфраструктуры React.
- Сначала сервер: Astro максимально использует рендеринг на стороне сервера, а не рендеринг на стороне клиента.
- На основе контента: уникальная ориентация Astro на контент позволяет Astro идти на компромиссы и предоставлять непревзойденные функции производительности, которые не имеют смысла для реализации веб-фреймворков, ориентированных на приложения.
- Полнофункциональный, но гибкий: Astro — это универсальная веб-инфраструктура со всем необходимым для создания веб-сайта. Astro включает в себя синтаксис компонентов, маршрутизацию на основе файлов, обработку активов, процесс сборки, объединение, оптимизацию, выборку данных и многое другое. Вы можете создавать отличные веб-сайты, даже не выходя за рамки основного набора функций Astro.
Ремикс
- Маршруты: как и другие фреймворки, Remix позволяет разработчикам управлять различными маршрутами своих веб-проектов с помощью файлов JavaScript/TypeScript, содержащих функции-обработчики. Мы можем генерировать маршруты на нашем веб-сайте для создания файлов, которые следуют иерархии файловой системы наших проектов, создавая аналоговые URL-адреса для наших страниц. Маршруты Remix работают с использованием функции частичной маршрутизации, предоставляемой React-Router.
- Вложенные компоненты: Remix позволяет управлять вложенными страницами и компонентами. Мы можем создать файл для обработки определенного маршрута и, на том же уровне в файловой системе, папку с тем же именем. Все файлы, которые мы создадим внутри этой папки, будут вложенными компонентами родительского маршрута, а не отдельными страницами.
- Обработка ошибок. Вложенные компоненты имеют еще одно преимущество: если при отображении определенного компонента возникает ошибка, она не влияет на другие вложенные части страницы.
- Формы: Поскольку Remix ориентирован на веб-стандарты, он использует собственные методы (POST, PUT, DELETE, PATCH) для обработки форм вместо использования для этого JavaScript.
- Загрузчики и действия: Remix предоставляет два разных типа функций для создания динамического содержимого на стороне сервера. Функции загрузчика обрабатывают HTTP-запросы GET на сервере, в основном используемые для получения данных из разных источников.
Следующий
- Асинхронные компоненты и выборка данных. Асинхронные компоненты — это новый метод получения данных для компонентов, отображаемых на сервере, представленный в Next.js 13. Мы можем отображать асинхронные компоненты с помощью промисов с помощью async и await.
- Серверные компоненты React: Серверные компоненты позволяют нам выполнять и отображать компоненты React на стороне сервера, что приводит к более быстрой доставке, меньшему пакету JavaScript и более низким затратам на визуализацию на стороне клиента.
app/Каталог для маршрутизации на основе файлов (бета-версия): Маршруты можно указать, используя структуру каталога вашего проекта. Просто поместите точку входа в каталогpagesи создайте новый маршрут.- Молниеносная сборка: в Next.js 13 представлен новый сборщик JavaScript, Turbopack, объявленный преемником Webpack. Имейте в виду, что Turbopack в настоящее время находится в альфа-версии и не готов к производству.
- Встроенная поддержка CSS и Sass: поддержка любой библиотеки CSS-in-JS.
- Статический экспорт: Next.js позволяет экспортировать полностью статический сайт из вашего приложения с помощью следующей команды экспорта.
Увлажнение
Гидратация — это метод JavaScript на стороне клиента для преобразования статической страницы HTML в динамическую страницу. Это обеспечивает приятный пользовательский интерфейс, отображая отображаемый компонент на странице, но с присоединенными обработчиками событий. Гидратация происходит перед взаимодействием пользователя со статическими страницами. В результате страдает пользовательский опыт.
Астро
Astro справляется с этим с помощью метода, известного как частичная гидратация. Метод загрузки отдельных компонентов только при необходимости с сохранением оставшейся части страницы в виде статического HTML называется частичной гидратацией. Дизайн острова имеет решающее значение для этого процесса, потому что он способствует небольшому вовлечению.
- Сравнение производительности Next.js и Astro В разделе «Сравнение производительности Next.js и Astro» в большинстве случаев веб-сайты Astro загружаются значительно быстрее, чем веб-сайты Next.js.
- Astro автоматически удаляет ненужный JavaScript со страницы, увлажняя только отдельные компоненты, которые в нем нуждаются.
- Это замедляет загрузку страниц и ухудшает производительность вашего сайта.
Next.js
Next.js также не допускает частичной гидратации. В Next.js есть экспериментальная поддержка веб-страниц, отличных от JavaScript, но нет поддержки гидратирующих компонентов.
- Next.js не поддерживает частичную гидратацию и вместо этого заставляет пользователя загружать и повторно гидратировать всю страницу в браузере, даже если большая часть содержимого страницы статична.
- Next.js имеет экспериментальную поддержку полностью статических страниц без JavaScript.
- Однако веб-сайт не поддерживает увлажнение отдельных компонентов.
Ремикс
Remix не поддерживает частичную гидратацию. Есть предположения, что Remix будет работать с новыми функциями приостановки React 18, но Remix не допускает частичной гидратации.
Скорость загрузки
Астро
Astro быстрый, в основном предназначенный для скорости. Стратегия островной архитектуры помогает в SEO, потому что она занимает высокие позиции в поисковых системах на сайте. Он предлагает фантастический пользовательский интерфейс и имеет меньше стандартного кода. Он поддерживает большинство библиотек и фреймворков CSS и обеспечивает отличную основу для поддержки стилей.
Ремикс
Remix утверждает, что поиск данных ускоряется за счет параллельной загрузки данных на сервер. Remix может выполнять предварительный рендеринг страниц на сервере, поскольку он поддерживает рендеринг на стороне сервера. В отличие от Remix, Astro предоставляет статически связанный HTML-файл с минимальным JavaScript или без него.
Почему Remix перезаписывается быстро?
- Вместо кэширования документов с помощью SSG или SWR эта версия кэширует данные на границе Redis.
- Он также запускает приложение на периферии с помощью Fly.io.
- Быстрая оптимизация образа Маршрут ресурсов, который записывает в постоянный том.
- Это собственный CDN. Возможно, несколько лет назад это было сложно сделать, но ландшафт серверов значительно изменился за последние несколько лет и становится только лучше.
Почему порт Remix быстрый?
- Remix не поддерживает SSG, поэтому мы использовали директиву кэширования HTTP stale-while-revalidate (SWR, не путать с пакетом загрузки клиента SWR от Vercel).
- Результат тот же: статичный документ на краю (даже на той же CDN, Vercel’s). Разница в том, как туда попадают документы. Вместо того, чтобы извлекать все данные и отображать страницы в статические документы во время сборки/развертывания, кеш загружается, когда вы получаете трафик.
- Документы обслуживаются из кэша и повторно проверяются в фоновом режиме для следующего посетителя.
Next.js
Next.js может похвастаться функциями рендеринга на стороне сервера и статических сборок. Next.Js также включает в себя несколько готовых методов для извлечения данных.
Почему Next.js быстрый?
- Домашняя страница использует генерацию статических сайтов (SSG) с помощью getStaticProps.
- Во время сборки Next.js извлекает данные из Shopify, отображает страницу в HTML-файл и помещает ее в общедоступный каталог.
- Когда сайт развернут, статический файл обслуживается на периферии (из CDN Vercel), а не на исходном сервере в одном месте.
- Когда приходит запрос, CDN обслуживает файл.
- Загрузка данных и рендеринг уже были выполнены заранее, поэтому посетитель не оплачивает стоимость загрузки + рендеринга.
- CDN распространяется глобально, близко к пользователям (это «край»), поэтому запросы на статически сгенерированные документы не должны проходить весь путь до одного исходного сервера.
ССР
Рендеринг на стороне сервера (SSR) относится к процессу предварительного рендеринга одностраничных приложений на стороне клиента на сервере с последующей отправкой полностью обработанной страницы по запросу пользователя. Рендеринг на стороне сервера важен, потому что приложения, отображаемые на стороне сервера, оптимизированы для SEO и быстры. Приложения, поддерживающие рендеринг на стороне сервера, обычно связаны с сокращением времени загрузки страницы.
Astro, Remix и Next.js предлагают рендеринг на стороне сервера (SSR) для создания разметки и содержимого наших страниц с веб-сервера перед отправкой их клиенту.
Простота использования
У Next.js, Astro и Remix короткая кривая обучения. Поскольку все они основаны на React, вам нужно только базовое понимание React, чтобы настроить Next.js, Astro и Remix. Все они имеют удобную для разработчиков документацию, что упрощает их использование и настройку.
Next включает команду CLI «create-next-app» для быстрого запуска приложения Next.js. Для начальной загрузки приложения Astro используйте команду «create astro@latest», тогда как Remix использует команду «create-remix@latest» для приложений Remix.
Заключение
Когда мы опускаем занавес на этом эпическом противостоянии интерфейсных фреймворков, становится ясно, что Next.js, Astro и Remix обладают солидным преимуществом. Выбор между ними заключается не в том, чтобы найти «лучший» фреймворк, а в том, чтобы определить, какой из них наиболее точно соответствует потребностям вашего проекта, опыту вашей команды и вашим долгосрочным целям.
Next.js отличается обширным набором функций, сильным сообществом и отличным опытом разработчиков. Astro впечатляет своим ориентированным на производительность подходом и гибкостью компонентов. Remix, с другой стороны, выделяется своими надежными возможностями маршрутизации и выборки, предлагая свежий взгляд на загрузку данных.
Подумайте о характере вашего проекта и способности вашей команды изучить каждый из этих фреймворков. В этой постоянно развивающейся области фронтенд-разработки нет универсального ответа. Корона достается платформе, которая органично вписывается в вашу уникальную головоломку и помогает создавать масштабируемые, высокопроизводительные и удобные в сопровождении приложения.
Помните, сила инструмента в руках его владельца. Итак, вооружитесь правильными знаниями, мудро выбирайте свое оружие и идите к созданию фантастических веб-приложений. До нашей следующей технической встречи.
Удачного кодирования! 🚀
Создавайте приложения с повторно используемыми компонентами, как Lego
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
