Next.js로 API를 제공할 수 있다.

APIs are an intermediary layer between your application code and database. There are a few cases where you might use an API:

• If you're using third-party services that provide an API.
• If you're fetching data from the client, you want to have an API layer that runs on the server to avoid exposing your database secrets to the client.

근데 위는 적당히 지나가는 부분이고,

제일 중요한 것은 Server Components이다.

.com/dashboard에서 .com/dashboard/a로 이동했다고 하자. 새로운 Component들을 보여줘야 될 것이다. Vue 방식이라면 브라우저에서 XMLRequest를 통해서 API Response를 불러와 Component에 집어 넣었을 것이다. 하지만 React Server Components는 서버에서 Component 함수가 돌아간다: 필요한 데이터베이스 쿼리를 날리고, 이를 바탕으로 RSC Payload라는 것을 만들어서 응답한다. 그러면 .com/dashboard/a에서 이것을 가지고 할 것을 한다.

Server Components

Client Component의 경우, 컴포넌트 내에서 Promises나 async/await을 사용할 수 있다.

'use client';
import { useState } from 'react';

function Search() {
  const [results, setResults] = useState([]);

  // ✅ async function INSIDE the component — totally fine
  async function handleSearch() {
    const res = await fetch('/api/search');
    setResults(await res.json());
  }

  return <button onClick={handleSearch}>Search</button>;
}