CSR (Client-Side Rendering)

1// CSR (Client-Side Rendering) 방식
2'use client';
3 
4import { useQuery } from '@tanstack/react-query';
5 
6export default function CSRPage() {
7  const { data, isLoading, error } = useQuery({
8    queryKey: ['posts'],
9    queryFn: () => fetch('/api/posts').then(res => res.json()),
10  });
11 
12  if (isLoading) return <div>로딩 중...</div>;
13  if (error) return <div>에러 발생!</div>;
14 
15  return (
16    <ul>
17      {data.posts.map(post => (
18        <li key={post.id}>{post.title}</li>
19      ))}
20    </ul>
21  );
22}