Как реализовать серверный рендеринг без Nuxt.js?

2.3 Middle🔥 161 комментариев

#Vue.js#Браузер и сетевые технологии

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Серверный рендеринг (SSR) без Nuxt.js

Общеу думку что SSR доступен только с фреймворками вроде Nuxt.js неправда. В JavaScript существует несколько подходов к реализации серверного рендеринга: от Express + React до Next.js. Каждый подход имеет свои компромиссы между сложностью и контролем.

1. Express + React SSR

// server.js - Node.js сервер
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App.jsx';

const app = express();

app.get('/', (req, res) => {
  // Рендеринг компонента на сервере
  const appString = renderToString(<App />);
  
  // Отправка HTML
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>SSR App</title>
      </head>
      <body>
        <div id="app">${appString}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Этот подход дает полный контроль над рендерингом и позволяет легко интегрировать с Express middleware.

2. Hydration - оживление HTML на клиенте

// client.js - код на клиенте
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App.jsx';

// Hydration "оживляет" статический HTML
const root = hydrateRoot(document.getElementById('app'), <App />);

Hydration критично для SSR - сервер отправляет HTML, клиент добавляет интерактивность без пересоздания DOM.

3. Обработка асинхронных данных на сервере

// server.js с загрузкой данных
import express from 'express';
import { renderToString } from 'react-dom/server';

app.get('/users/:id', async (req, res) => {
  try {
    // Загружаем данные на сервере
    const response = await fetch(`https://api.example.com/users/${req.params.id}`);
    const userData = await response.json();
    
    // Передаем данные компоненту
    const appString = renderToString(
      <UserProfile user={userData} />
    );
    
    // Отправляем с начальными данными
    res.send(`
      <!DOCTYPE html>
      <html>
        <body>
          <div id="app">${appString}</div>
          <script>
            window.__INITIAL_STATE__ = ${JSON.stringify(userData)};
          </script>
          <script src="/client.js"></script>
        </body>
      </html>
    `);
  } catch (error) {
    res.status(500).send('Error loading user');
  }
});

Начальное состояние передается в глобальную переменную для гидрации клиента.

4. Vite SSR + Express

// server.js с Vite
import express from 'express';
import { createServer as createViteServer } from 'vite';
import { renderToString } from 'react-dom/server';

const app = express();
const vite = await createViteServer({
  server: { middlewareMode: true },
  appType: 'ssr'
});

app.use(vite.middlewares);

app.get('*', async (req, res) => {
  try {
    const { App } = await vite.ssrLoadModule('/src/App.jsx');
    const html = renderToString(<App />);
    
    const template = fs.readFileSync('index.html', 'utf-8');
    const finalHtml = template.replace('<!--app-html-->', html);
    
    res.status(200).set({ 'Content-Type': 'text/html' }).end(finalHtml);
  } catch (e) {
    vite.ssrFixStacktrace(e);
    res.status(500).end(e.stack);
  }
});

app.listen(3000);

Vite предоставляет встроенную поддержку SSR с горячей перезагрузкой для разработки.

5. Streaming для больших приложений

// server.js с потоковым рендерингом
import { renderToPipeableStream } from 'react-dom/server';

app.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(
    <App />,
    {
      onShellReady() {
        res.setHeader('Content-type', 'text/html');
        pipe(res);
      },
      onShellError(error) {
        res.statusCode = 500;
        res.send('<!doctype html><p>Loading...</p>');
      },
      onError(error) {
        console.error('Rendering error:', error);
      }
    }
  );
});

Потоковый рендеринг отправляет HTML по частям, улучшая Time to First Byte.

6. Обработка стилей при SSR

// server.js с CSS-in-JS
import { StyleSheetManager } from 'styled-components';
import { ServerStyleSheet } from 'styled-components';

app.get('/', (req, res) => {
  const sheet = new ServerStyleSheet();
  
  try {
    const html = renderToString(
      sheet.collectStyles(<App />)
    );
    
    const styleTags = sheet.getStyleTags();
    
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          ${styleTags}
        </head>
        <body>
          <div id="app">${html}</div>
          <script src="/client.js"></script>
        </body>
      </html>
    `);
  } finally {
    sheet.seal();
  }
});

CSS должен быть включен в HTML на сервере чтобы избежать flash of unstyled content.

7. Next.js как альтернатива (рекомендуется)

// app/page.tsx - Next.js App Router
export const metadata = {
  title: 'My App'
};

export default function Page() {
  return <div>Server-rendered content</div>;
}

// next.config.js
const nextConfig = {
  output: 'standalone' // Для Dokku deployment
};

export default nextConfig;

Next.js абстрагирует всю сложность SSR и предоставляет удобный API для разработчиков.

8. Сравнение подходов

// CUSTOM EXPRESS + REACT
Преимущества:
- Полный контроль
- Минимальные зависимости
- Просто для простых приложений

Недостатки:
- Много boilerplate кода
- Нужно настраивать routing, гидрацию, стили
- Сложно масштабировать

// VITE SSR
Преимущества:
- Быстрая разработка
- Встроенная поддержка SSR
- Hot reload

Недостатки:
- Меньше examples в сообществе
- Нужно писать свой сервер

// NEXT.JS
Преимущества:
- Все настроено из коробки
- Встроенные оптимизации
- Большое сообщество
- Image, font optimization

Недостатки:
- Менее гибкий
- Vendor lock-in

9. Проблемы и решения

// ПРОБЛЕМА: Hydration mismatch
// На сервере и клиенте разный HTML

// РЕШЕНИЕ: Использовать одинаковый код и данные
app.get('/:id', async (req, res) => {
  const data = await fetchData(req.params.id);
  
  // Передать точно такие же данные клиенту
  const html = renderToString(<Component data={data} />);
  
  res.send(`
    <script>window.__DATA__ = ${JSON.stringify(data)}</script>
    <div id="app">${html}</div>
  `);
});

// На клиенте
const data = window.__DATA__;
const root = hydrateRoot(document.getElementById('app'), 
  <Component data={data} />
);

// ПРОБЛЕМА: Медленный рендеринг
// РЕШЕНИЕ: Использовать streaming
renderToPipeableStream(app, options);

// ПРОБЛЕМА: Context API не работает на сервере
// РЕШЕНИЕ: Использовать другой способ передачи состояния
const html = renderToString(<App initialState={state} />);

10. Production deployment

// package.json
{
  "scripts": {
    "dev": "node server.js",
    "build": "vite build",
    "start": "NODE_ENV=production node server.js"
  }
}

// Докерфайл для Dokku
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm ci --production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]