Как создавать статические веб-сайты с помощью React
React часто используется для создания динамических веб-приложений, которые реагируют на пользовательский ввод, но он также весьма полезен для статических сайтов. Сайты React можно даже предварительно сгенерировать в процессе сборки, чтобы сэкономить драгоценные миллисекунды при загрузке страницы.
Что такое статический сайт?
Статические сайты — это HTML-код, который доставляется пользователю напрямую, а не генерирует страницу для каждого запроса. Например, эта статья, которую вы читаете, вместо этого была динамически сгенерирована WordPress, взаимодействующим с базой данных, что заставило код PHP отображать абзацы HTML.
React — популярный фреймворк, используемый для создания динамических веб-приложений. Он разбивает HTML на файлы компонентов, используя формат JSX, и использует JavaScript для динамического рендеринга страниц. Это очень полезно, но есть одна проблема — время загрузки намного больше, чем у обычных страниц без JavaScript. React работает, загружая файл bundle.js на клиенте, который отображает страницу, но это требует времени. Время загрузки страницы напрямую влияет на взаимодействие с пользователем, а на таких важных сайтах, как целевые страницы, каждая миллисекунда может напрямую влиять на доход.
Чтобы это исправить, в React есть пара сторонних инструментов для создания статических сайтов. Основная идея заключается в том, что вместо рендеринга на стороне клиента он рендерится на машине разработчика в процессе сборки, тем самым экономя время загрузки. Затем вы берете HTML-код этого статического сайта и обслуживаете его как обычную веб-страницу.
Тогда возникает вопрос, зачем прилагать все эти усилия, чтобы использовать полноценный JavaScript-фреймворк, такой как React, для не-веб-приложения, которое не собирается меняться? Ну, хотя страница не меняется по каждому запросу пользователя, веб-страницы обычно не остаются неизменными с течением времени. Большинство компаний будут часто обновлять свои сайты, например, всякий раз, когда вы выпускаете новый продукт, проводите рекламную акцию или просто хотите обновить что-то для нового вида.
Преимущество, которое предлагает React, заключается в гораздо более простом обновлении кода по сравнению с отсутствием использования фреймворка. Если вы просто делаете свой сайт с помощью HTML и CSS, вам нужно будет проделать больше работы, чтобы внести небольшие изменения в стиль, и вам нужно будет проделать большую работу, чтобы внести большие изменения в шаблоны. С React, даже если вы используете один и тот же компонент несколько раз, вам просто нужно обновить один файл компонента, и он будет применять изменения везде, где вы используете его в своем проекте.
Конечно, это не для всех, так как для правильного использования React требуется немало знаний JavaScript. В качестве альтернативы, если вы просто хотите создать простой веб-сайт, который не составит труда обновить, вам следует изучить систему управления контентом (CMS), такую как SquareSpace или даже WordPress.
Существует пара конкурирующих фреймворков «React Static», которые часто предоставляют дополнительную функциональность и дополнительный контроль, которые полезны для больших производственных приложений. Gatsby очень популярен, как и Next.js. В этом руководстве мы будем использовать react-static, который просто обеспечивает простой и легкий способ создания статических сайтов и удобен для начинающих.
Примечание перед тем, как мы начнем: поскольку рендеринг происходит на стороне клиента (если только вы не используете рендеринг на стороне сервера), React технически «статичен» для вашего веб-сервера. Файлы, которые вы размещаете на своем веб-сервере, не изменяются в ответ на запросы, как это делает PHP. Однако это в значительной степени технический аспект, потому что страницы по-прежнему отображаются динамически, только на клиенте.
Использование React-Static
react-static довольно прост в использовании. Во-первых, вам нужно установить Node.JS и NPM на свой компьютер. react-static – это просто пакет NPM, который можно установить глобально:
npm i -g react-static
Затем вы можете запустить инструмент создания проекта:
react-static create
Дайте вашему проекту имя и выберите шаблон для использования. «Базовый» вариант — это стандартный JS, но есть также вариант TypeScript, который многие люди предпочитают стандартному JavaScript для больших проектов. Если вы больше знакомы со статически типизированными языками, выберите TypeScript, в противном случае выберите «базовый».
Это займет секунду, чтобы установить некоторые зависимости NPM и настроить проект. Основные файлы находятся в папке /src/, причем index.jsx — это корень приложения, а App.jsx — основной маршрутизатор. который определяет, какие страницы видит пользователь. В /dist/ вы упорядочите вывод сборки (после ее запуска), которую вы поместите на свой веб-сервер.
В App.jsx вы найдете начало рендеринга. Компонент Маршрутизатор обрабатывает каждую страницу в /src/pages/ в зависимости от URL-адреса. Конфигурация для этого обрабатывается в static.config.js.
На самом деле вы можете иметь динамические маршруты в своем приложении — любой маршрут, настроенный с помощью компонента
Чтобы запустить приложение, вы можете запустить сервер разработки:
npm run start
Чтобы запустить сборку для развертывания на веб-сервере, выполните run build:
npm run build
Выходные файлы будут в /dist/. Вы, конечно, обнаружите, что каждая HTML-страница обрабатывается заранее, а любые динамические страницы все еще загружают двоичные файлы React.