Что такое рендеринг?

Что такое рендеринг

Рендеринг (rendering) — это процесс преобразования кода (HTML, CSS, JavaScript) в визуальное представление, которое видит пользователь в браузере. Это одна из ключевых концепций в веб-разработке.

Основные виды рендеринга

1. Server-Side Rendering (SSR)

Описание: HTML генерируется на сервере и отправляется клиенту полностью готовым.

Процесс:

1. Браузер запрашивает страницу
2. Сервер выполняет код (React, Vue, etc.)
3. Сервер генерирует HTML
4. Сервер отправляет готовый HTML
5. Браузер отображает страницу
6. JavaScript гидратизирует компоненты

Пример с Next.js:

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

function PostPage({ posts }) {
  return (
    <div>
      {posts.map(post => <h2 key={post.id}>{post.title}</h2>)}
    </div>
  );
}

Плюсы SSR:

• ✅ Отличный SEO (поисковики видят готовый HTML)
• ✅ Быстрая первая загрузка контента (FCP)
• ✅ Работает без JavaScript

Минусы SSR:

• ❌ Нагрузка на сервер
• ❌ Сложнее в разработке
• ❌ Time to Interactive медленнее

2. Client-Side Rendering (CSR)

Описание: Браузер загружает пустой HTML + JavaScript, JS генерирует HTML в браузере.

Процесс:

1. Браузер загружает пустой HTML и JS бандл
2. JavaScript выполняется в браузере
3. JS код генерирует HTML динамически
4. Страница отображается

Пример с React (CRA):

// index.html отправляется пустой
// Весь рендеринг происходит в браузере

function App() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    fetch('/api/posts')
      .then(r => r.json())
      .then(setPosts);
  }, []);
  
  return (
    <div>
      {posts.map(post => <h2 key={post.id}>{post.title}</h2>)}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Плюсы CSR:

• ✅ Быстрая навигация между страницами
• ✅ Интерактивность (SPA)
• ✅ Меньше нагрузка на сервер

Минусы CSR:

• ❌ Плохой SEO (контент загружается после JS)
• ❌ Медленная первая загрузка
• ❌ Не работает без JavaScript

3. Static Site Generation (SSG)

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

Процесс:

1. На этапе build генерируются все HTML файлы
2. Статические файлы загружаются на CDN
3. Браузер просто скачивает готовые HTML файлы

Пример с Next.js:

export async function getStaticProps() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json());
  
  return {
    props: { posts },
    revalidate: 3600 // ISR: перегенерировать через час
  };
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }],
    fallback: 'blocking' // генерировать новые пути по запросу
  };
}

function PostDetail({ post }) {
  return <h1>{post.title}</h1>;
}

Плюсы SSG:

• ✅ Максимальная производительность (статические файлы)
• ✅ Отличный SEO
• ✅ Минимум нагрузки на сервер
• ✅ Легко масштабировать (CDN)

Минусы SSG:

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

Цикл рендеринга в браузере

HTML парсинг → DOM построение → CSS парсинг → CSSOM построение
↓
Рендер-дерево → Layout (переток) → Paint (рисование) → Composite (композиция)
↓
Пиксели на экране

Этапы:

1. Parse HTML — браузер читает HTML
2. Build DOM — создаёт дерево элементов
3. Parse CSS — читает стили
4. Build CSSOM — дерево стилей
5. Render Tree — комбинирует DOM + CSSOM
6. Layout — вычисляет позиции и размеры элементов
7. Paint — рисует пиксели (фон, текст, границы)
8. Composite — слои объединяются

Оптимизация рендеринга

1. Предотвращение ненужных рендеров в React:

// Использование React.memo
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

// useMemo для дорогих вычислений
const memoized = useMemo(() => computeExpensive(data), [data]);

// useCallback для стабильных функций
const handleClick = useCallback(() => {
  doSomething();
}, []);

2. Ленивая загрузка изображений:

<img src="image.jpg" loading="lazy" />

3. Виртуализация длинных списков:

import { FixedSizeList as List } from 'react-window';

<List width={400} height={600} itemCount={1000} itemSize={35}>
  {({index, style}) => (
    <div style={style}>{items[index]}</div>
  )}
</List>

4. CSS containment для изоляции:

.component {
  contain: layout style paint;
  /* Браузер не пересчитывает стили/layout для других элементов */
}

Production рендеринг в Next.js (modern approach)

// Комбинируем лучшее из всех подходов

// Статический контент
export const revalidate = 3600; // ISR: regenerate every hour

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

export default function Page({ params }) {
  return <PostDetail id={params.id} />;
}

Современный Frontend рендеринг — это баланс между SSR (SEO, производительность), CSR (интерактивность) и SSG (масштабируемость). Правильный выбор стратегии зависит от типа приложения и требований к SEO.