// app/posts/page.tsx — this is a Server Component
// No 'use client' directive → runs only on the server

interface Post {
  id: number
  title: string
  body: string
}

async function getPosts(): Promise<Post[]> {
  // Direct database access, or any server-side call
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5', {
    next: { revalidate: 3600 }, // ISR: revalidate every hour
  })
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts() // ✅ top-level await — no useEffect needed

  return (
    <main>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

'use client'
// Everything in this file (and its imports) goes to the browser bundle

import { useState } from 'react'

interface LikeButtonProps {
  initialCount: number
}

export function LikeButton({ initialCount }: LikeButtonProps) {
  const [count, setCount] = useState(initialCount)

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      ❤️ {count}
    </button>
  )
}

// app/posts/[id]/page.tsx — Server Component
import { LikeButton } from '@/components/LikeButton' // client component
import { db } from '@/lib/db'

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await db.post.findUnique({ where: { id: params.id } })
  const likes = await db.like.count({ where: { postId: params.id } })

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      {/* Server renders initialCount; client handles clicks */}
      <LikeButton initialCount={likes} />
    </article>
  )
}

import { Suspense } from 'react'
import { ProductList } from './ProductList'   // slow DB query
import { RecommendedItems } from './Recommended' // even slower ML call

export default function ShopPage() {
  return (
    <main>
      <h1>Our Store</h1>

      {/* Streams in when the DB query resolves */}
      <Suspense fallback={<p>Loading products…</p>}>
        <ProductList />
      </Suspense>

      {/* Streams in independently — doesn't block ProductList */}
      <Suspense fallback={<p>Loading recommendations…</p>}>
        <RecommendedItems />
      </Suspense>
    </main>
  )
}

// ClientShell.tsx — client component for interactive wrapper
'use client'
import { useState } from 'react'

export function ClientShell({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true)

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

// page.tsx — server component
import { ClientShell } from './ClientShell'
import { SlowServerContent } from './SlowServerContent' // server component

export default function Page() {
  return (
    <ClientShell>
      {/* SlowServerContent renders on the server, result passed as children */}
      <SlowServerContent />
    </ClientShell>
  )
}