Как создавать статические сайты с React – CloudSavvy IT

реагировать часто используется для создания динамических веб-приложений, которые реагируют на ввод данных пользователем, но это также весьма полезно для статических сайтов. Сайты React могут быть предварительно созданы в процессе сборки, чтобы сэкономить драгоценные миллисекунды при загрузке страницы.

Что такое статический сайт?

Статические сайты – это HTML, который доставляется пользователю напрямую, а не генерирует страницу для каждого запроса. Например, эта статья, которую вы читаете, была динамически сгенерирована WordPress, говорящим с базой данных, что заставило код PHP отображать абзацы HTML.

реагировать это популярный фреймворк, используемый для создания динамических веб-приложений. Он разбивает HTML на файлы компонентов в формате JSX и использует JavaScript для динамического рендеринга страниц. Это очень полезно, но есть одна проблема – время загрузки намного больше, чем у основных страниц без JavaScript. Реагировать работает, загрузив bundle.js файл на клиенте, который выдает страницу, но это требует времени. Время загрузки страницы напрямую влияет на взаимодействие с пользователем, и на таких важных сайтах, как целевые страницы, каждая миллисекунда может напрямую влиять на доход.

Чтобы это исправить, в React есть пара сторонних инструментов для создания статических сайтов. Основная идея заключается в том, что вместо рендеринга на стороне клиента он рендерится на компьютере разработчика во время процесса сборки, тем самым экономя время загрузки. Затем вы берете HTML-код этого статического сайта и работаете как обычная веб-страница.

Тогда возникает вопрос: зачем все эти усилия использовать полнофункциональный JavaScript-фреймворк, такой как React, для не-веб-приложения, которое не изменится? Ну, хотя страница не меняется для каждого запроса пользователя, веб-страницы обычно не остаются неизменными с течением времени. Большинство компаний будут обновлять свои сайты часто, например, когда вы выпускаете новый продукт, запускаете рекламную акцию или просто хотите обновить свой внешний вид.

Преимущество, которое предлагает React, заключается в гораздо более простом обновлении кода по сравнению с отсутствием инфраструктуры. Если вы просто делаете свой сайт с HTML и CSS, вам нужно будет проделать большую работу, чтобы внести небольшие изменения в стили, и вам нужно будет проделать большую работу, чтобы внести большие изменения в шаблоны. С React, даже если вы используете один и тот же компонент несколько раз, вам просто нужно обновить один файл компонента, и он будет применять изменения везде, где вы используете его в своем проекте.

Конечно, это не для всех, так как для правильного использования React требуется немало знаний JavaScript. В качестве альтернативы, если вы просто хотите создать простой веб-сайт, который не будет проблематичным для обновления, вам следует взглянуть на систему управления контентом (CMS), например Squarespace или даже WordPress,

Существует несколько конкурирующих платформ React Static, которые часто предоставляют дополнительную функциональность и дополнительный контроль, который полезен для больших производственных приложений. Гэтсби очень популярен, как 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вы найдете начало рендеринга. Router Компонент отдает каждую страницу в /src/pages/в зависимости от URL. Конфигурация для этого обрабатывается в static.config.js,

На самом деле вы можете иметь динамические маршруты в вашем приложении – любой маршрут, настроенный с помощью Компонент не будет зависеть от статического рендера.

Чтобы запустить приложение, вы можете запустить сервер разработки:

npm run start

Чтобы запустить сборку для развертывания на вашем веб-сервере, выполните run build:

npm run build

Выходные файлы будут в /dist/, Разумеется, вы найдете каждую HTML-страницу, которая будет отображаться заранее, причем любые динамические страницы все еще загружают двоичные файлы React.