1. 데이터 가져오기

서버 컴포넌트에서 데이터를 가져오는 처리 로직은 Web API인 fetch를 활용하면 됨

다음은 블로그 포스트의 리스트 데이터를 가져오는 예시

page.js


// 서버 컴포넌트에서도 async/await 키워드를 통해 비동기 요청 처리 가능
export default async function Page() {
  const data = await fetch('https://api.vercel.app/blog');
  const posts = await data.json();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

2. 로딩, 에러 처리하기

전통적인 리액트에서는 별도의 변수나 상태 값을 통해 조건부로 렌더링 UI를 관리하였음

page.js


import React, { useState } from "react";
 
function App() {
 
  // 로딩 상태를 관리하기 위한 별도의 상태 변수
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "로그아웃" : "로그인"}
      </button>
    </div>
  );
}
 
export default App;

하지만 이후 서버 컴포넌트 기반 작성 방식에서는 이 방식이 보다 간소화되었으며,

로딩 상태를 관리하기 위해서는 loading.js를 작성하면 되고, 에러 핸들링을 위해서는 error.js를 작성하면 됨 → 1.Routing/ 파트에서 진행