React 18 서버 컴포넌트(Server Components) 개념과 활용법

components/ServerComponent.js

 

// Next.js의 App Router 방식 (app 폴더 기반)
export default async function ServerComponent() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();

  return (
    <div>
      <h1>서버 컴포넌트 예제</h1>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
}

 

app/page.js

import ServerComponent from './ServerComponent';

export default function HomePage() {
  return (
    <div>
      <ServerComponent />
    </div>
  );
}

 

서버 컴포넌트를 활용하면 클라이언트에서 API 요청을 줄이고 렌더링 속도를 개선할 수 있음