Когда лучше использовать SSR?

Когда использовать SSR (Server-Side Rendering)

Что такое SSR

SSR — это рендеринг HTML на сервере и отправка готовой страницы клиенту. Затем браузер подключает JavaScript (процесс hydration) для интерактивности. В отличие от CSR (Client-Side Rendering), где весь рендеринг происходит в браузере.

Основные преимущества SSR

// Пример: Next.js SSR
// pages/posts/[id].js

export async function getServerSideProps(context) {
  const { id } = context.params;
  
  // Получаем данные на сервере
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();
  
  return {
    props: { post },
    revalidate: 60 // ISR: переvalidation каждые 60 сек
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Преимущества:

1. SEO — поисковики видят готовый HTML с содержимым
2. Быстрая первая отрисовка (FCP) — нет пустой страницы
3. Легче для браузеров — меньше JavaScript для выполнения
4. Безопасность — можно скрывать токены на сервере
5. Работает без JS — базовое содержимое видно при отключённом JS

Когда использовать SSR

// 1. БЛОГ или КОНТЕНТ-САЙТ (высокие требования к SEO)
// → SSR или SSG (Static Generation)

// 2. ДИНАМИЧЕСКИЙ КОНТЕНТ (новости, товары)
// → SSR с кешированием

export async function getServerSideProps({ params }) {
  const product = await fetchProductFromDB(params.id);
  
  return {
    props: { product },
    // Кеш на 1 час для не очень часто меняющихся данных
    revalidate: 3600
  };
}

// 3. СТРАНИЦЫ ЗАВИСЯЩИЕ ОТ COOKIES (авторизация)
// → SSR, чтобы отправить нужный HTML

export async function getServerSideProps(context) {
  const { req } = context;
  const token = req.cookies.authToken;
  
  if (!token) {
    return {
      redirect: {
        destination: '/login',
        permanent: false
      }
    };
  }
  
  const user = await fetchUser(token);
  return { props: { user } };
}

// 4. REAL-TIME ДАННЫЕ (цены, акции)
// → SSR с минимальным кешем

export async function getServerSideProps() {
  const prices = await fetchLivePrices();
  
  return {
    props: { prices },
    revalidate: 10 // Обновляем каждые 10 секунд
  };
}

SSR vs SSG vs ISR

// SSG (Static Generation) — рендеринг во время build
// ✅ Быстрая доставка (CDN)
// ✅ Низкие требования к серверу
// ❌ Данные статичные до следующего build

export async function getStaticProps() {
  const posts = await fetchAllPosts();
  return {
    props: { posts },
    revalidate: 86400 // Перестроить через 24 часа
  };
}

// ISR (Incremental Static Regeneration) — гибрид
// ✅ Статичная доставка + обновление на фоне
// ✅ Масштабируемо для тысяч страниц
// ✅ Свежие данные через revalidate

export async function getStaticProps({ params }) {
  return {
    props: { data: await fetchData(params.id) },
    revalidate: 3600 // Переvalidation каждый час
  };
}

// SSR — рендеринг на каждый запрос
// ✅ Всегда свежие данные
// ✅ Может работать с динамическими параметрами
// ❌ Медленнее (нужен сервер)
// ❌ Больше нагрузки на сервер

export async function getServerSideProps(context) {
  return {
    props: { data: await fetchData(context.params.id) }
  };
}

Минусы SSR и когда их избежать

// ❌ SSR МЕДЛЕННЫЙ для:
// 1. Приватных админ-панелей (редкие посетители)
// 2. Интерактивных приложений (SPA лучше)
// 3. Часто обновляемых данных (высокая нагрузка)

// Пример: Админ-панель → используй SPA (CSR)
import { useEffect, useState } from 'react';

export default function AdminDashboard() {
  const [stats, setStats] = useState(null);
  
  useEffect(() => {
    // Получаем данные на клиенте
    fetch('/api/admin/stats')
      .then(r => r.json())
      .then(setStats);
  }, []);
  
  return <div>{stats ? `Users: ${stats.users}` : 'Loading...'}</div>;
}

// ❌ CSR ПЛОХОЙ для:
// 1. SEO критичных страниц
// 2. Медленных сетей (много JS)
// 3. Старых браузеров (много полифилов)

Гибридный подход (рекомендуется)

// Next.js 13+ App Router с кешированием
// pages/ → SSG
// api/ → SSR по мере необходимости
// app/ → компоненты можно выбирать

// Пример: Блог с комментариями
// Пост: SSG (статичный контент)
export const revalidate = 86400;

export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(post => ({ id: post.id }));
}

// Комментарии: CSR (часто обновляются)
import { useEffect, useState } from 'react';

function Comments({ postId }) {
  const [comments, setComments] = useState([]);
  
  useEffect(() => {
    fetch(`/api/posts/${postId}/comments`)
      .then(r => r.json())
      .then(setComments);
  }, [postId]);
  
  return <div>{/* comments */}</div>;
}

Стратегия выбора

┌─────────────────────────┐
│ Выбор рендеринга        │
└────────────┬────────────┘
             │
    ┌────────┴────────┐
    │                 │
    ▼                 ▼
 Контент зависит от  Данные на каждый
 пользователя/        запрос?
 времени?
    │                 │
    │ Да              │ Да
    ▼                 ▼
 SSR/ISR        → SSR (или API + CSR)
    │
    │ Нет
    ▼
 Данные меняются
 редко?
    │
    ├─ Да   → SSG (статичный)
    └─ Нет  → ISR (кеш + реvalidate)

Практический пример с кешем

// pages/products/[id].js
// Производительность: быстро как SSG, но данные не совсем старые

export async function getStaticProps({ params }) {
  try {
    const product = await fetchProduct(params.id);
    
    return {
      props: { product },
      revalidate: 3600 // Перестроить через час
    };
  } catch (error) {
    // Fallback для новых товаров
    return {
      notFound: true,
      revalidate: 60 // Проверить снова через минуту
    };
  }
}

Выводы

1. Используй SSR для SEO-критичного контента (блоги, новости)
2. Используй SSG/ISR для статичного контента (экономит ресурсы)
3. Используй CSR для динамических приложений (админки, чаты)
4. Комбинируй подходы — блог на SSG + комментарии на CSR
5. Помни о производительности — SSR медленнее, нужны ресурсы
6. Кеширование — ISR даёт лучше всё (скорость + свежесть)