// app/page.tsx — Server Component по умолчанию
import { db } from '@/lib/db' // ✅ Директ импорт на сервере

export default async function ProductPage() {
  // ✅ Прямой запрос к БД без API слоя
  const products = await db.query('SELECT * FROM products')

  return (
    

      
Каталог товаров
      {products.map(p => (
        
      ))}
    
  )
}

// app/product/[id]/page.tsx — Server Component
import { AddToCartButton } from './AddToCartButton' // Client Component
import { db } from '@/lib/db'

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await db.products.findUnique({ where: { id: params.id } })

  return (
    

      
{product.name}
      
{product.description}
      {/* ✅ Только кнопка — клиентский компонент */}
      
    
  )
}

// components/Modal.tsx — Client Component
'use client'

export function Modal({ children, trigger }: { children: React.ReactNode, trigger: React.ReactNode }) {
  const [open, setOpen] = useState(false)
  return (
    <>
       setOpen(true)}>{trigger}
      {open && 
{children}
}
    
  )
}

// app/page.tsx — Server Component
import { Modal } from '@/components/Modal'
import { ProductList } from './ProductList' // Server Component

export default function Page() {
  return (
    
      {/* ✅ ProductList рендерится на сервере, но показывается в клиентском модале */}
      
    
  )
}

// next.config.js
module.exports = {
  experimental: {
    ppr: true, // Включаем Partial Prerendering
  },
}

// app/page.tsx
import { Suspense } from 'react'
import { StaticHeader } from './StaticHeader' // Статический компонент
import { DynamicReviews } from './DynamicReviews' // Динамический компонент

export default function Page() {
  return (
    <>
      {/* ✅ Предрендерится при сборке */}
      

      {/* 🔄 Стримится при запросе с fallback */}
      }>
        
      
    
  )
}

// 1. Параллельная маршрутизация (существующий код работает)
app/
├── (marketing)/     # Новые страницы на App Router
│   ├── page.tsx
│   └── about/page.tsx
├── api/             # API Routes остаются в pages/api/
└── ...

pages/               # Старые страницы работают без изменений
├── index.tsx
├── about.tsx
└── api/

// app/error.tsx — Error Boundary для сегмента
'use client'

export default function ErrorBoundary({ error, reset }: { error: Error, reset: () => void }) {
  return (
    

      
Что-то пошло не так
      Попробовать снова
    
  )
}

// app/not-found.tsx — 404 страница
export default function NotFound() {
  return (
    

      
Страница не найдена
      На главную
    
  )
}

// app/loading.tsx — Показывается автоматически при загрузке
export default function Loading() {
  return 
Загрузка...
}

// Или гранулярно с Suspense
import { Suspense } from 'react'

}>