Какие знаешь виды рендеринга?

Виды рендеринга в веб-разработке

Рендеринг — это процесс преобразования данных и компонентов в HTML, который отправляется в браузер. Существует несколько основных подходов, каждый с собственными преимуществами и недостатками.

1. Server-Side Rendering (SSR)

Определение: Полный HTML генерируется на сервере перед отправкой в браузер.

// Next.js пример
export default function Page({ data }) {
  return <div>{data.title}</div>;
}

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  return { props: { data } };
}

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

• SEO оптимизация (поисковики видят полный HTML)
• Быстрая первоначальная загрузка (First Contentful Paint)
• Безопасность (логика на сервере)
• Работает без JavaScript

Недостатки:

• Нагрузка на сервер
• Медленнее для пользователя при навигации
• Требует перезагрузки для каждой страницы

2. Client-Side Rendering (CSR)

Определение: HTML генерируется в браузере после загрузки JavaScript.

// React пример
import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);
  
  return <div>{data?.title}</div>;
}

export default App;

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

• Меньше нагрузки на сервер
• Быстрая навигация между страницами
• Лучше для интерактивных приложений
• Можно работать офлайн

Недостатки:

• Плохой SEO (пустая страница при первой загрузке)
• Медленнее First Contentful Paint
• Требует JavaScript
• Мерцание контента

3. Static Site Generation (SSG)

Определение: HTML генерируется во время сборки, результаты кэшируются.

// Next.js пример
export default function Page({ data }) {
  return <div>{data.title}</div>;
}

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return {
    props: { data },
    revalidate: 3600 // ISR: переделать каждый час
  };
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }],
    fallback: 'blocking'
  };
}

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

• Отличный SEO
• Максимальная скорость (pre-rendered HTML)
• Малая нагрузка на сервер
• Dapat работать на CDN

Недостатки:

• Подходит только для статичного контента
• Нужна пересборка при изменении данных
• Медленнее при частых обновлениях

4. Incremental Static Regeneration (ISR)

Определение: Комбинация SSG и SSR. Статичные страницы обновляются в фоне.

// Next.js
export async function getStaticProps() {
  return {
    props: { /* данные */ },
    revalidate: 60 // Пересоздать через 60 секунд
  };
}

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

• SEO как при SSG
• Скорость как при SSG
• Автоматические обновления

Недостатки:

• Данные могут быть слегка устаревшими
• Требует поддержки платформы

5. Progressive Enhancement

Определение: Базовая функциональность работает без JavaScript, улучшения добавляются поверх.

<!-- Базовая функциональность -->
<form action="/submit" method="POST">
  <input type="text" name="query" />
  <button type="submit">Search</button>
</form>

<script>
// Улучшение: AJAX вместо перезагрузки
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  // Отправить AJAX запрос
});
</script>

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

• Работает на всех браузерах
• Хорошая производительность
• Лучше для SEO

Недостатки:

• Требует больше разработки
• Может быть медленнее на мощных устройствах

6. Hybrid Rendering

Определение: Комбинация разных методов для разных частей приложения.

// Next.js App Router

// SSG для блога
export async function getStaticProps() {
  const posts = await db.getPosts();
  return { props: { posts } };
}

// SSR для персонального кабинета
export async function getServerSideProps(context) {
  const user = await auth.getUser(context);
  return { props: { user } };
}

// CSR для интерактивного компонента
function InteractiveChart() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/chart').then(r => r.json()).then(setData);
  }, []);
  return <Chart data={data} />;
}

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

• Оптимальная производительность для разных сценариев
• Лучший пользовательский опыт
• SEO и интерактивность

Недостатки:

• Сложнее в разработке
• Требует хорошего понимания подходов

Сравнительная таблица

Выбор подхода

Используй SSG для:

• Блогов
• Документации
• Статичных сайтов
• Каталогов товаров

// Идеально подходит
export async function getStaticProps() {
  const posts = await db.getAllPosts();
  return { props: { posts } };
}

Используй SSR для:

• Персональных кабинетов
• Динамичного контента, зависящего от пользователя
• Критичной свежести данных

// Нужна свежесть данных
export async function getServerSideProps(context) {
  const user = await auth.getUser(context);
  const data = await db.getUserData(user.id);
  return { props: { data } };
}

Используй CSR для:

• Single Page Applications
• Приложений с высокой интерактивностью
• Когда SEO не критичен

// Полностью интерактивное приложение
function Dashboard() {
  const [data, setData] = useState(null);
  // ...
}

Вывод

Нет одного «правильного» подхода. Выбор зависит от:

• Типа контента — статичный или динамичный
• Требований SEO — нужен ли нам поисковый трафик
• Нагрузки на сервер — сколько пользователей
• Интерактивности — насколько интерактивно приложение

Модные современные фреймворки (Next.js, Nuxt, SvelteKit) позволяют комбинировать подходы для оптимального результата.