Как работают Server Components (RSC) в Next.js

// Серверный компонент (по умолчанию)
// Выполняется на сервере, код не попадает в бандл
import { db } from '@/lib/db'

export default async function ProblemsCount() {
  const count = await db.problem.count()
  return <p>Задач на Hack Frontend: {count}</p>
}

// Клиентский компонент
// Помечаем директивой 'use client'
'use client'

import { useState } from 'react'

export default function LikeButton() {
  const [liked, setLiked] = useState(false)

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? 'Убрать лайк' : 'Лайкнуть'}
    </button>
  )
}

// app/problems/page.tsx (серверный)
import { db } from '@/lib/db'
import { ProblemList } from './problem-list'

export default async function ProblemsPage() {
  const problems = await db.problem.findMany({
    orderBy: { difficulty: 'asc' }
  })

  return <ProblemList problems={problems} />
}

// app/problems/problem-list.tsx (клиентский)
'use client'

import { useState } from 'react'

export function ProblemList({ problems }) {
  const [filter, setFilter] = useState('all')

  const filtered = filter === 'all'
    ? problems
    : problems.filter(p => p.difficulty === Number(filter))

  return (
    <div>
      <select onChange={e => setFilter(e.target.value)}>
        <option value="all">Все</option>
        <option value="1">Легкие</option>
        <option value="2">Средние</option>
        <option value="3">Сложные</option>
      </select>
      <ul>
        {filtered.map(p => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  )
}

// Клиентский компонент-обертка
'use client'

import { useState } from 'react'

export function Accordion({ title, children }) {
  const [open, setOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setOpen(!open)}>{title}</button>
      {open && children}
    </div>
  )
}

// Серверный компонент использует клиентскую обертку
import { Accordion } from './accordion'
import { db } from '@/lib/db'

export default async function FAQ() {
  const items = await db.faq.findMany()

  return (
    <div>
      {items.map(item => (
        <Accordion key={item.id} title={item.question}>
          <p>{item.answer}</p>
        </Accordion>
      ))}
    </div>
  )
}