Все статьи
Веб-разработка5 января 2024 г.8 мин

React Server Components: Полное руководство

Глубокое погружение в Server Components: когда использовать, как работают, и какие преимущества дают.

ReactServer ComponentsNext.js

React Server Components: Полное руководство

Server Components — это новая парадигма в React, которая меняет подход к построению приложений.

Что такое Server Components?

Server Components выполняются только на сервере и не увеличивают размер JavaScript-бандла клиента.

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

**Server Components подходят для:**

  • Получения данных из базы
  • Доступа к backend-ресурсам
  • Хранения секретов (API ключи)
  • Тяжёлых зависимостей
  • **Client Components нужны для:**

  • Интерактивности (onClick, onChange)
  • Хуков состояния (useState, useEffect)
  • Browser APIs
  • Пример использования

    // Server Component (по умолчанию в Next.js App Router)

    async function BlogPosts() {

    const posts = await db.posts.findMany();

    return (

    <ul>

    {posts.map(post => (

    <li key={post.id}>{post.title}</li>

    ))}

    </ul>

    );

    }

    Вывод

    Server Components — мощный инструмент для оптимизации производительности React-приложений.

    *React
    *Next.js
    *TypeScript
    *Node.js
    *PostgreSQL
    *Tailwind CSS
    *Prisma
    *Vercel
    *GraphQL
    *Docker
    *AWS
    *Supabase
    *React
    *Next.js
    *TypeScript
    *Node.js
    *PostgreSQL
    *Tailwind CSS
    *Prisma
    *Vercel
    *GraphQL
    *Docker
    *AWS
    *Supabase

    Контакты

    Готовы начать проект?

    Оставьте заявку и мы свяжемся с вами для обсуждения деталей

    Быстрый ответ

    Отвечаем на заявки в течение 2-х часов в рабочее время

    Бесплатная консультация

    Обсудим ваш проект и предложим оптимальное решение

    Точная оценка

    Детальный расчёт сроков и стоимости проекта

    Или напишите напрямую