Установка и использование React на сервере

alexei28/02/2026 - 09:12
Установка и использование React на сервере

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

Преимущества серверного рендеринга React

Серверный рендеринг имеет ряд весомых плюсов:

  • SEO Оптимизация. Поисковые роботы лучше воспринимают предварительно сформированные страницы, содержащие готовый HTML-код, а не чистый JavaScript-контент.
  • Производительность. Пользователи получают готовую страницу быстрее, особенно на устройствах с низкой производительностью или плохим интернет-соединением.
  • Повышение доступности. Даже при отключённом JavaScript приложение сохраняет работоспособность и отображает базовую структуру интерфейса.
  • Пользовательский опыт. Реактивность React сочетается с быстрым начальным рендером, обеспечивая плавный переход от серверного представления к интерактивному клиенту.

Однако важно учитывать, что серверный рендеринг требует дополнительной нагрузки на сервер, увеличивает сложность приложения и может привести к проблемам совместимости, если реализация выполнена некорректно.

Что понадобится для начала работы?

Прежде чем приступить к разработке приложения с серверным рендерингом, убедитесь, что у вас установлены следующие инструменты:

  • Node.js версии 14+ (рекомендуемая LTS-версия).
  • NPM или Yarn для управления зависимостями.
  • Редактор кода (например, Visual Studio Code, WebStorm или Sublime Text).
  • Базовая настройка среды разработки, включая терминал командной строки.

Шаг 1. Настройка окружения

Начнём с подготовки рабочей среды. Выполните следующую последовательность действий:

  1. Создайте новый каталог для вашего проекта:

    
mkdir server-side-react-app
cd server-side-react-app

  2. Инициализируйте проект с помощью npm или yarn:

    
npm init -y
# Или
yarn init -y

  3. Установите необходимые зависимости:

    
npm install react react-dom express @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-node-externals html-webpack-plugin
# Или
yarn add react react-dom express @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-node-externals html-webpack-plugin

Мы установили следующие пакеты:

  • react, react-dom — ядро библиотеки React и модуль для взаимодействия с DOM.
  • express — популярный фреймворк для Node.js, позволяющий создавать HTTP-сервер.
  • @babel/core, @babel/preset-env, @babel/preset-react, babel-loader — инструменты Babel для преобразования современного JSX и ECMAScript кода в версию, поддерживаемую всеми браузерами.
  • webpack, webpack-cli, webpack-node-externals, html-webpack-plugin — сборщик проектов, обеспечивающий создание бандлов, готовых к работе на сервере.

Шаг 2. Создание базовой структуры приложения

Организуем файлы проекта следующим образом:


server-side-react-app/
├── src/
│   ├── App.jsx
│   └── index.js
├── public/
│   └── index.html
├── package.json
├── .babelrc
├── webpack.config.js
└── README.md

Основные файлы:

  • src/App.jsx — корневой компонент React.
  • src/index.js — точка входа для серверного рендера.
  • public/index.html — шаблон HTML-файла.
  • package.json — файл конфигурации пакетов.
  • .babelrc — конфигурационный файл для Babel.
  • webpack.config.js — конфигурация сборщика Webpack.

Шаг 3. Наполнение файла App.jsx

Реализуем простейший интерфейс приложения:


import React from 'react';

export default function App() {
  return (
    <div className="app-container">
      <h1>Привет, мир!</h1>
      <p>Это моё первое серверное React-приложение.</p>
    </div>
  );
}

Данный компонент отображает простое приветствие. Далее настроим серверный рендеринг.

Шаг 4. Серверный рендеринг в файле index.js

Откроем файл src/index.js и напишем основную логику серверного рендеринга:


import path from 'path';
import fs from 'fs';
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import React from 'react';
import App from './App';

const PORT = process.env.PORT || 3000;
const app = express();

// Читаем шаблонизированный HTML-файл
const templatePath = path.resolve(__dirname, '../public/index.html');
const templateHtml = fs.readFileSync(templatePath, 'utf8');

// Функция для вставки серверного рендера в шаблон
const renderPage = (content) => {
  return templateHtml.replace('<!-- app -->', content);
};

// Основной роутер для отображения приложения
app.get('*', (req, res) => {
  const appString = ReactDOMServer.renderToString(<App />);
  const fullHtml = renderPage(appString);
  res.send(fullHtml);
});

// Запуск сервера
app.listen(PORT, () => console.log(`Сервер запущен на порте ${PORT}`));

Что здесь происходит:

  • Мы загружаем основной HTML-шаблон из файла public/index.html.
  • Затем заменяем специальный комментарий <!-- app --> результатом рендеринга нашего React-компонента.
  • Отправляем полную HTML-страницу клиенту.

Шаг 5. Настройка Webpack и Babel

Настроим Babel и Webpack для правильной компиляции и сборки проекта.

Файл .babelrc

Создаем файл .babelrc с параметрами трансформации кода:


{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Babel автоматически преобразует современный синтаксис и JSX в совместимый код.

Файл webpack.config.js

Создаём конфигурацию Webpack:


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './src/index.js',
  target: 'node',
  externalsPreload: true,
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      inject: false
    })
  ],
  externals: [nodeExternals()]
};

Основные опции:

  • Входной файл (entry) — ./src/index.js.
  • Выходной файл (output.filename) — bundle.js.
  • Тип целевой среды (target) — node.
  • Исключены внешние модули (externals), которые устанавливаются глобально.

Шаг 6. Старт проекта

Наконец, запускаем приложение командой:


npm start
# Или
yarn start

Если всё сделано правильно, вы увидите сообщение в консоли о старте сервера, а по адресу http://localhost:3000 откроется ваше первое серверное React-приложение.

Важные советы и рекомендации

  • Используйте уникальные ключи для всех повторяющихся элементов, это ускоряет работу виртуального DOM.
  • Помните, что серверный рендеринг добавляет нагрузку на сервер, поэтому убедитесь, что инфраструктура способна выдержать ожидаемый трафик.
  • Старайтесь минимизировать объём передаваемых данных путём оптимизации ресурсов и уменьшением размера бандлов.
  • Применяйте кэширование промежуточных результатов рендеринга, чтобы снизить нагрузку на сервер.

Заключение

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

Headless Drupal с React: полное руководство по современной веб-разработке