Статические сайты — это пережиток прошлого, появившийся до того, как CMS захватили интернет. Но сегодня они успешно возрождаются с помощью генераторов статических сайтов и современных фреймворков, таких как React, Vue и Angular.
Используя возможности современных фреймворков с такими инструментами, как Webpack и передовые возможности CSS, генераторы статических сайтов (SSG) позволяют без особых усилий создавать красивые сайты с пользовательским контентом.
Рассмотрим несколько популярных генераторов статических сайтов на основе React, которые можно использовать для создания красивых и содержательных сайтов.
1. Gatsby
Gatsby был выпущен в 2015 году и является, вероятно, самым популярным в мире генератором статических сайтов для React. Сам сайт ReactJS фактически сделан на Gatsby. Итак, почему Gatsby так популярен?
Во-первых, он прекрасно сочетается с экосистемой React, от компонентов React до технологий Webpack и CSS. Он также имеет богатую экосистему плагинов, которая позволяет легко получать и использовать данные (через GraphQL) от сторонних сервисов и через API.
Gatsby также прост в развертывании и работает очень быстро, с почти нулевым временем загрузки, если был правильно собран и развернут. Gatsby имеет различные стартеры, шаблоны и даже может работать (в некоторой степени) в соответствии с рекомендациями PWA .
2. React static
Столкнувшись с подводными камнями в других генераторах статических сайтов для React, таких как Gatsby и Next.js, группа специалистов из React Static была настроена на создание лучшего, более простого опыта разработки. Это означает более прямую и понятную передачу данных из источника в route, лучшее разделение для шаблонов React и многое другое.
React static отличается более короткой кривой обучения (никакого синтаксиса, только React и JS), более простым пайплайном благодаря управлению всеми данными, запросами и сопоставлением данных в одном месте, без проблем с динамическими данными и их колокацией.
Так же, как в Gatsby и Next, вы получаете PWA-подобный, быстрый, оптимизированный для SEO и очень производительный статический веб-сайт. Несмотря на то, что в настоящее время у React static нет богатой экосистемы Gatsby или резервной копии Zeit, React-static — это простой, прямой и менее затратный способ создать статический сайт на React.
3. Next.js
Создатели Zeit разработали и представили проект Next.js. Это облегченный фреймворк для статических и серверных приложений React, которая также работает как SSG для React.
Команда next export позволяет запускать приложение Next.js как статическое приложение без необходимости использования сервера Node.js. Она предварительно отрендерит все страницы в HTML, основываясь на сопоставлении ключа pathname объекту страницы, который вызыватеся exportPathMap. По умолчанию next exportне требует настройки конфигурации, и
по умолчанию сгенерирует exportPathMap,содержащий пути к страницам внутри каталога pages. Это означает, что вы можете разработать приложение, используя возможности Next.js (автоматическое разделение кода и т. д.), а затем экспортировать его практически как статический веб-сайт.
Однако изоморфный подход Next.js не всегда полностью совместим с рабочим процессом и может создавать проблемы при попытке экспорта статики, от раздутых пакетов до проблем маршрутизации.
4. Cuttlebelle
Cuttlebelle — это менее известный, но очень крутой генератор статических сайтов на React, созданный с целью лучшего разделения проблем редактирования и написания кода. Он позволяет использовать один макет для каждой части страницы и четко отделяет контент от кода. Cuttlebelle можно расширять компонентами React, что открывает множество возможностей.
По сути, вы можете создать макет для каждой части страницы, а затем объединить их для создания статической страницы. Создавайте шаблоны с помощью JSX, создавайте макет, извлекайте данные из сторонних API, тестируйте с помощью Jest и размещайте в любом месте.
5. Jekyll и React
Несмотря на то, что Jekyll немного старомоден и не предназначен для React, он по-прежнему остается наиболее широко используемым SSG в мире, в основном для блогов и сайтов электронной коммерции. Частично этот успех можно объяснить очень быстрой миграцией с других платформ в Джекилл с использованием импортеров . Он построен на Ruby и интегрируется в GitHub Pages и имеет очень богатую экосистему тем, шаблонов и плагинов. Он даже предоставляет бесплатный хостинг веб-сайтов на GitHub Pages.
В мире React Jekyll соревнуется с большой тройкой, приведенной выше. Однако союз Jekyll и React действительно возможен.
6. Hugo внутри приложения React
Hugo — это невероятно быстрый фреймворк для создания статических сайтов, очень гибкий и кроссплатформенный. Hugo поддерживает различные типы контента, таксономии, меню, динамический контент на основе API и многое другое без использования сторонних плагинов. Для него доступно более 100 тем.
В отличие от Gatsby, Hugo с React не работает из коробки. Тем не менее, блог Hugo может работать внутри более крупного приложения React. Это означает, что вы можете пользоваться превосходной производительностью (и SEO) Hugo в приложении React. Некоторые даже объединяют Hugo с Gatsby.
7. Phenomic
Phenomic — это фреймворк, созданный для того, чтобы сделать работу SSG похожей на создание полноценного приложения: это модульный компилятор сайта, который позволяет использовать свой собственный рендерер (React), сборщик (Webpack) и др.
Phenomic создан для сайтов с высокой SEO-эффективностью и быстрым UX. В то время как ресурсы в экосистеме ограничены, авторы предоставили шаблон блога create-React-app и набор плагинов . Пользователи React могут использовать методы, поддерживаемые через новый withInitialPropsHOC, для использования любых данных ( REST API, GraphQL API для CMS и т. д.) через static async getInitialProps(). Этот API содержит другой новый метод для предварительного рендеринга, который называется static async getAllPossibleUrls(). Пример шаблона для Phenomic с React.
8. Antwar
Созданный основателем SurviveJS , Antwar — это статический движок сайта с поддержкой блогов, созданный на основе React и Webpack. Он создан быстрым, расширяемым и дружественным. Как и сам Webpack, Antwar построен поверх конфигураций: antwar.config.jsописывает, как сопоставить контент с сайтом. Он связывает макеты с контентом и позволяет вам определять пользовательские страницы, где это необходимо. Вы можете развернуть Antwar на GitHub pages (и автоматизировать через Travis).
