Что такое React Server Components
React Server Components (RSC) — компоненты, рендерящиеся исключительно на сервере, с zero JS bundle на клиенте. Доступ к БД, file system, secrets напрямую в компоненте (без API layer). Next.js App Router (2023+) — flagship implementation. Async by default: можно await fetch(...) прямо в component. Клиентские компоненты помечаются "use client" directive.
Ниже: подробности, пример, смежные термины, FAQ.
Подробности
- Server Component (default): async, прямой DB access, zero client JS
- Client Component: "use client" directive, hydration required
- Streaming: chunks HTML стримятся по мере ready → faster TTFB
- Server Actions: form handlers на сервере без API route
- Data cache: fetch() автоматически деduplicated + cached
Пример
async function UserCard({ id }) {
const user = await db.users.findById(id);
return <div>{user.name}</div>;
}Смежные термины
Почему нам доверяют
Как это работает
Введите URL страницы
Lighthouse анализирует
Получите CWV и советы
Почему скорость сайта важна?
Скорость загрузки напрямую влияет на конверсию, SEO-позиции и удовлетворённость пользователей. Google использует Core Web Vitals как фактор ранжирования. Каждая лишняясекунда загрузки может стоить до 7% конверсии.
Lighthouse-анализ
Анализ на основе Google Lighthouse: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (скорость отрисовки), FID (интерактивность), CLS (визуальная стабильность) — ключевые метрики Google.
Анализ ресурсов
Разбивка по типам: HTML, CSS, JavaScript, изображения, шрифты. Размер, количество запросов, блокирующие ресурсы.
Действенные советы
Конкретные рекомендации с оценкой экономии: сжатие изображений, кеширование, минификация и т.д.
Mobile vs Desktop
- Тестирование на эмуляции Moto G Power (медленный CPU)
- Сеть: 4G (1.6 Mbps, 150ms RTT)
- Строже оценивает скорость
- Google индексирует mobile-first
- Приоритет для SEO-оптимизации
- Высокая производительность CPU
- Быстрое соединение без ограничений
- Результаты обычно выше на 20-40 баллов
- Важен для B2B и корпоративных сайтов
- Используйте для baseline-сравнений
Кому это нужно
SEO-специалисты
Core Web Vitals для ранжирования
Разработчики
оптимизация производительности
Маркетологи
скорость = конверсия
DevOps
регрессия производительности
Частые ошибки
async/defer блокируют отрисовку. Переместите в конец или добавьте атрибут.Cache-Control браузер перезагружает CSS/JS при каждом визите.Лучшие практики
loading="lazy" для изображений ниже first fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> для шрифтов и CSS. Уменьшает LCP на 200-500ms.Получите больше с бесплатным аккаунтом
История проверок скорости, сравнение с конкурентами и мониторинг PageSpeed.
Зарегистрироваться (FREE)Больше по теме
Часто задаваемые вопросы
RSC vs SSR?
SSR — HTML rendering на сервере, потом full JS bundle hydrates. RSC — component code остаётся на сервере, клиент получает только payload без JS.
Поддерживают ли все React frameworks?
Next.js (App Router) — первый. Remix, TanStack Start следуют. Vanilla React не supports без framework.
Можно ли use hooks?
В Server Components — нет (no state). В Client Components — да (useState, useEffect, etc.).