Что такое гидратация в React?
Гидратация (hydration) в React – это процесс, при котором клиентская часть приложения "оживляет" (или "гидратирует") статически сгенерированный HTML-код, полученный с сервера. Этот процесс позволяет React взять на себя управление рендерингом интерфейса, добавляя интерактивность и динамическое поведение на уже существующую разметку.
Как это работает?
Пример серверного рендеринга с использованием
ReactDOMServer:// server.js
const express = require('express');
const React = require('react');
const { renderToString } = require('react-dom/server');
const App = require('./App');
const app = express();
app.get('/', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
<script src="/client.bundle.js" defer></script>
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Сервер запущен на http://localhost:3000');
});
ReactDOM.hydrate.Пример гидратации на клиенте:
// client.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.hydrate(<App />, document.getElementById('root'));
Зачем нужна гидратация?
- Улучшение производительности: Поскольку сервер уже отправляет готовый HTML, пользователи могут сразу видеть содержимое, тогда как JavaScript будет загружаться и выполнять свои функции позже.
- SEO: Серверный рендеринг и гидратация делают ваше приложение более доступным для поисковых систем.
- Интерактивность: Гидратация позволяет React "оживить" страницы, добавляя интерактивные элементы, такие как кнопки и формы.
Примечания
Гидратация — это важный аспект использования React для создания производительных и интерактивных веб-приложений. Понимание этого процесса поможет вам создавать более быстрые и удобные интерфейсы.