9 генераторов статических сайтов на React в 2019

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Статические сайты — это пережиток прошлого, появившийся до того, как 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).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll to top