Сегодня делюсь своим опытом использования фреймворков Gatsby JS и Next JS.
Gatsby JS:
GatsbyJS - генератор статических сайтов. Он выполняет предварительную сборку и в результате возвращает статические файлы (HTML, CSS, JS). Это означает, что серверная часть выполняет работу на стороне сервера один раз на этапе сборки (кроме случаев, когда клиент в браузере запрашивает API).
Особенности:
- Поддержка создания статических сайтов
- Поддержка рендеринга на стороне клиента
- Использование GraphQL для обработки данных
- Обширная поддержка собственных плагинов и плагинов сообщества.
- Используется: reactjs.org, www.figma.com
Мои наблюдения:
- Отличная платформа для создания статических страниц.
- Из коробки поддержка Оптимизация изображений, Разделение кода (загрузка пакета JavaScript страниц на основе запроса / навигации пользователя).
- Возможности PWA предоставляются встроенными плагинами. Эти библиотеки действительно хороши и пользуются большой поддержкой сообщества gatsby.
- Инкрементальная статическая сборка может использоваться для создания динамического веб-сайта. Но в настоящее время он поддерживает только облачный хостинг gatsby.
- Для получения данных из API он сильно зависит от Graph QL. Несмотря на то, что этого можно избежать, для некоторых функций, таких как Оптимизация изображений и некоторых плагинов, требуется Graph QL.
Мои рекомендации:
Экосистема Gatsby сильно зависит от Graph QL. Одного лишь знания React JS команде разработчиков недостаточно для создания веб-сайта с помощью Gatsby. С точки зрения производительности, у него будет меньше времени на отрисовку контента, и он будет загружаться быстро, поскольку страница будет готова во время сборки. Мы рекомендуем Gatsby JS, если варианты использования предназначены только для создания статических сайтов.
Следующий JS
Next.js - это JavaScript-фреймворк, созданный Vercel. Он позволяет создавать рендеринг на стороне сервера и статические веб-приложения с помощью React.
Особенности:
- Поддержка рендеринга на стороне сервера
- Поддержка создания статических сайтов
- Поддержка рендеринга на стороне клиента
- Динамический сайт
- Инкрементальная генерация статических сайтов
- Использование: marvel.com, hulu.com
Мои наблюдения:
- Надежная платформа для создания статических и обслуживающих боковых страниц. Хорошая поддержка сообщества.
- Из коробки поддержка Оптимизация изображения, Разделение кода (загрузка пакета javascript страниц на основе запроса / навигации пользователя).
- Функции PWA не предоставляются по умолчанию. Необходимо использовать библиотеку с открытым исходным кодом, например - https://github.com/shadowwalker/next-pwa#readme - Подключиться к предварительному просмотру и https://github.com/hanford/next-offline - Подключиться к предварительному просмотру. . Эти библиотеки действительно новые и не особо поддерживаются следующей командой js.
- Постепенное создание статического сайта - действительно хорошая возможность сделать статический сайт динамичным.
- Зависимость сервера node js: Next js позволяет экспортировать ваше приложение в статический HTML, который можно запускать автономно без необходимости использования сервера Node.js. Но это предназначено для сценариев, когда ни одна из наших страниц не требует серверных данных или дополнительных данных.
Мои рекомендации:
Мы можем рекомендовать Next JS только в том случае, если у нас есть допустимые варианты использования как для создания статических сайтов, так и для генерации на стороне сервера. Для генерации обслуживающей стороны на сервере должен быть запущен узел js. Страницы, созданные на этой платформе, будут загружаться быстрее, и на первую отрисовку контента потребуется меньше времени. Мы также рекомендуем создать «гибридное» приложение Next.js, используя статическую генерацию для нескольких страниц и используя рендеринг на стороне сервера для других. Мы также можем использовать рендеринг на стороне клиента вместе со статической генерацией или рендерингом на стороне сервера. Это означает, что некоторые части страницы могут быть полностью обработаны клиентским JavaScript.
Приятного чтения!
