Введение
В этом сообщении блога мы рассмотрим, как реализовать рендеринг на стороне сервера (SSR) с помощью Redux в ваших приложениях React для предварительной загрузки начального состояния. Предварительно загрузив состояние вашего приложения, вы можете улучшить его производительность и удобство для пользователей.
Что такое рендеринг на стороне сервера (SSR)?
Рендеринг на стороне сервера — это метод, который позволяет вам визуализировать ваше приложение React на сервере перед его отправкой клиенту. Это предоставляет клиенту полностью отображаемую HTML-страницу, которую можно немедленно отобразить, не дожидаясь запуска клиентского JavaScript.
Преимущества использования SSR с Redux
- Быстрая начальная загрузка. За счет рендеринга приложения на сервере пользователи могут быстрее просматривать контент, поскольку им не нужно ждать, пока загрузится и выполнится клиентский JavaScript.
- Улучшенная поисковая оптимизация. Поисковые системы могут лучше индексировать и ранжировать ваши страницы, поскольку они получают полностью отображаемый HTML-контент.
- Улучшение взаимодействия с пользователем. Состояние предварительной загрузки помогает сократить количество "скачков" содержимого и изменения макета при загрузке приложения, обеспечивая более плавное взаимодействие с пользователем.
Настройка базового приложения React с Redux
Давайте настроим базовое приложение React с Redux, прежде чем углубляться в SSR. Мы будем использовать популярную команду create-react-app для создания нового проекта:
npx create-react-app redux-ssr-example cd redux-ssr-example
Теперь установите необходимые пакеты Redux:
npm install redux react-redux
Реализация SSR с помощью Redux
В этом разделе мы реализуем SSR для нашего приложения React. Сначала установите необходимые зависимости:
npm install express
Затем создайте новый файл с именем server.js в корне вашего проекта и добавьте следующий код:
const express = require("express");
const path = require("path");
const fs = require("fs");
const { renderToString } = require("react-dom/server");
const { createStore } = require("redux");
const { Provider } = require("react-redux");
const App = require("./src/App").default;
const rootReducer = require("./src/reducers");
const app = express();
app.use(express.static(path.join(__dirname, "build")));
app.get("/*", (req, res) => {
const store = createStore(rootReducer);
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
);
const preloadedState = store.getState();
const finalHtml = `
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Redux SSR Example</title>
<link href="/static/css/main.css" rel="stylesheet">
</head>
<body>
<div id="root">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
/</g,
"\\u003c"
)}
</script>
<script src="/static/js/main.js"></script>
</body>
</html>
`;
res.send(finalHtml);
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
Этот код настраивает сервер Express для обслуживания вашего приложения React. Он создает хранилище Redux, отображает приложение в строку и встраивает предварительно загруженное состояние в ответ HTML.
Состояние предварительной загрузки для ваших приложений React
Чтобы использовать предварительно загруженное состояние в клиентском приложении React, измените файл src/index.js следующим образом:
import React from "react";
import { hydrate } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./reducers";
import App from "./App";
const preloadedState = window.__PRELOADED_STATE__;
delete window.__PRELOADED_STATE__;
const store = createStore(rootReducer, preloadedState);
hydrate(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
Здесь мы используем hydrate вместо ReactDOM.render, чтобы присоединить прослушиватели событий к отображаемому сервером HTML. Мы также получаем предварительно загруженное состояние от window.__PRELOADED_STATE__ и передаем его как начальное состояние createStore.
Теперь обновите раздел scripts в файле package.json, чтобы включить серверный скрипт:
"scripts": {
"start": "node server.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Наконец, создайте приложение React и запустите сервер:
npm run build npm start
Ваше серверное приложение React с предварительно загруженным состоянием Redux теперь запущено и работает! Посетите https://localhost:3000, чтобы увидеть свое приложение в действии.
Заключение
В этом сообщении блога мы рассмотрели преимущества рендеринга на стороне сервера с помощью Redux и способы его реализации в приложении React. Предварительно загрузив состояние, вы можете улучшить производительность вашего приложения, SEO и общее взаимодействие с пользователем. Обладая этими знаниями, вы теперь можете создавать более эффективные и надежные приложения React, используя Redux и рендеринг на стороне сервера.
