React Server Components

// app/feed/page.tsx — Server Component (no directive)
import LikeButton from "./LikeButton";

async function getFeed() {
  const r = await fetch("https://api.example.com/feed", {
    cache: "no-store",
  });
  if (!r.ok) throw new Error("feed failed");
  return r.json() as Promise<{ id: string; text: string }[]>;
}

export default async function FeedPage() {
  const posts = await getFeed();
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>
          {p.text}
          <LikeButton postId={p.id} />
        </li>
      ))}
    </ul>
  );
}

// app/feed/LikeButton.tsx — Client Component
"use client";
import { useState } from "react";

export default function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked((v) => !v)}>
      {liked ? "♥" : "♡"}
    </button>
  );
}