⭐⭐⭐⭐⭐ SSR без Next.js: Как использовать серверный рендеринг в React без Next.js

Серверный рендеринг (SSR) для React набирает популярность благодаря таким инструментам, как Next.js, который предоставляет готовые возможности для создания серверного рендеринга. Однако реализовать SSR можно и без использования Next.js, что даёт разработчикам полный контроль над процессом и настройками. В этой статье разберёмся, как запустить серверный рендеринг React с нуля, используя Node.js и Express. Такой подход позволит вам улучшить производительность приложения и SEO, не прибегая к готовым фреймворкам.

Зачем нужен SSR и когда стоит его применять

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

Реализация серверного рендеринга с помощью Express и React

Первым шагом будет создание простого сервера на базе Express и настройка SSR с помощью библиотеки react-dom/server. Установим все необходимые зависимости:

npm init -y
npm install express react react-dom react-dom/server

Создадим файл server.js, который будет выполнять роль сервера и рендерить React-компоненты на стороне сервера. Основной код для настройки выглядит следующим образом:

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./src/App').default;

const app = express();

app.get('/', (req, res) => {
  const appHTML = ReactDOMServer.renderToString(<App />);
  res.send(`
    <html>
      <head>
        <title>SSR без Next.js</title>
      </head>
      <body>
        <div id="root">${appHTML}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Сервер запущен на http://localhost:3000'));

Здесь мы используем ReactDOMServer.renderToString для рендеринга компонента App в HTML-строку. Таким образом, при заходе на корневой маршрут пользователь получает готовую HTML-страницу, что улучшает показатели SEO и скорости загрузки.

Подготовка клиентской стороны и настройка Webpack

Чтобы приложение работало на клиенте, нам необходимо настроить клиентскую сборку с помощью Webpack. Установим нужные зависимости:

npm install webpack webpack-cli webpack-node-externals @babel/core @babel/preset-env @babel/preset-react babel-loader

Теперь создадим файл webpack.config.js с конфигурацией для сборки клиентского и серверного кода:

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

module.exports = [
  {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        }
      ]
    }
  },
  {
    entry: './server.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'server.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        }
      ]
    }
  }
];

Теперь настроим инициализацию React на клиентской стороне в файле src/index.js, используя метод hydrate:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

Метод ReactDOM.hydrate позволяет React использовать уже готовую HTML-разметку на клиенте, делая её интерактивной. Этот процесс синхронизирует серверный и клиентский рендеринг.

Преимущества и недостатки подхода SSR без Next.js

Серверный рендеринг без использования Next.js даёт разработчикам больше возможностей для управления архитектурой проекта и повышает гибкость настройки. Вот несколько ключевых преимуществ:

Полный контроль над серверной частью и конфигурацией приложения;
Гибкость в настройке маршрутизации и управления состоянием.

Однако следует учитывать и ограничения:

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

Подход SSR без Next.js может быть полезен для опытных разработчиков, нуждающихся в гибкой настройке сервера и полной свободе в разработке. Если вас интересует углублённое изучение SSR и React, ознакомьтесь с курсами для React-разработчиков или просмотрите вакансии для React разработчиков, где навыки серверного рендеринга могут быть востребованы.

Поделиться этим постом