Next.js数据获取指南3：并行、顺序、条件请求与客户端用法

export default async function Page() {
  const [postsRes, usersRes] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/posts'),
    fetch('https://jsonplaceholder.typicode.com/users'),
  ]);
    const posts = await postsRes.json();
  const users = await usersRes.json();
    return (
    <>
      <h2>Posts</h2>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <h2>Users</h2>
      <ul>
        {users.map((user: any) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  );
}

export default async function Page() {
  const userRes = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await userRes.json();
    const postsRes = await fetch(
    `https://jsonplaceholder.typicode.com/posts?userId=${user.id}`
  );
  const posts = await postsRes.json();
    return (
    <>
      <h2>{user.name}의 게시글</h2>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </>
  );
}

export default async function Page({ searchParams }: { searchParams: { userId?: string } }) {
  let posts = [];
    if (searchParams.userId) {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts?userId=${searchParams.userId}`
    );
    posts = await res.json();
  }
    return (
    <>
      <h2>게시글 목록</h2>
      {posts.length > 0 ? (
        <ul>
          {posts.map((post: any) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <p>게시글이 없습니다.</p>
      )}
    </>
  );
}

'use client';
import { useEffect, useState } from 'react';
export default function Page() {
  const [posts, setPosts] = useState<any[]>([]);
    useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then(setPosts);
  }, []);
    return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

'use client';
import useSWR from 'swr';
const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default function Page() {
  const { data, error, isLoading } = useSWR(
    'https://jsonplaceholder.typicode.com/posts',
    fetcher
  );
    if (isLoading) return <p>로딩 중입니다...</p>;
  if (error) return <p>데이터를 불러오는 데 실패했습니다.</p>;
    return (
    <ul>
      {data.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}