[Next.js] - Next.js에서 서버사이드 렌더링 이해하기 / API 핸들러와 페이지 컴포넌트의 역할

🚪 들어가며

Next.js에서는 서버사이드 렌더링(SSR)을 통해 사용자가 페이지에 접근하기 전에 서버에서 데이터를 미리 가져와 페이지를 렌더링할 수 있습니다. 이 과정에는 두 가지 중요한 요소가 작동합니다

1. API 핸들러 (@api/article.ts)
2. 페이지 컴포넌트 (@pages/community/index.tsx)

이 두 요소가 어떻게 상호작용하여 동적 콘텐츠를 효율적으로 제공하는지 살펴보자 ⭐️

1. @api/article.ts

역할: API 핸들러
기능: 클라이언트의 GET, POST, DELETE 요청을 처리하고, 외부 API나 데이터베이스와 상호작용하여 필요한 데이터를 가져오거나 수정합니다.

이는 백엔드에서 데이터 처리를 담당합니다.

• 예시: getArticles() 함수는 게시글 목록을 가져와 JSON 형식으로 반환합니다.

export const getArticles = async (
  page: number,
  res: NextApiResponse
): Promise<void> => {
  try {
    const response = await axiosInstance.get<ArticleListResponse>('/articles', {
      params: { page, pageSize: 10, orderBy: 'recent' },
    });
    res.status(200).json(response.data); // 게시글 목록과 totalCount를 반환
  } catch (error) {
    console.error('게시글을 가져오는데 실패했습니다:', error);
    res.status(500).json({ message: '게시글을 가져오는데 실패했습니다' });
  }
};

 

2. @pages/community/index.tsx

역할: Next.js 페이지 컴포넌트
기능: getServerSideProps 함수를 사용하여 페이지가 요청될 때마다 서버에서 API 핸들러(@api/article.ts)를 통해 데이터를 가져옵니다.

가져온 데이터는 props로 변환되어 페이지 컴포넌트에 전달되고 렌더링됩니다.

• getServerSideProps 함수에서 API 핸들러로부터 데이터를 요청하는 방식은 다음과 같습니다

export const getServerSideProps: GetServerSideProps = async (context) => {
  const page = parseInt(context.query.page as string) || 1;

  try {
    const response = await axiosInstance.get<ArticleListResponse>('/articles', {
      params: { page, pageSize: 10, orderBy: 'recent' },
    });

    return {
      props: {
        articles: response.data.list,
        totalCount: response.data.totalCount,
        page,
      },
    };
  } catch (error) {
    return { props: { articles: [], totalCount: 0, page } };
  }
};

 

 

---

서버사이드 렌더링 과정 요약

1. 클라이언트 요청: 사용자가 /community 페이지에 접근합니다.
2. 서버 사이드 데이터 패칭
   • getServerSideProps 함수가 호출되어 서버에서 데이터를 요청합니다.
   • 이 과정에서 @api/article.ts에 정의된 API 핸들러가 실행되어 필요한 데이터를 가져옵니다.
3. 데이터 반환: API 핸들러가 데이터를 JSON 형식으로 반환합니다.
4. 렌더링: getServerSideProps가 반환한 데이터를 props로 페이지 컴포넌트에 전달하여 UI를 렌더링합니다.
5. 클라이언트에 응답: 완성된 HTML이 클라이언트에 전송되어 사용자는 즉시 콘텐츠를 확인할 수 있습니다.

 

💬 느낀점 - Next.js에서 데이터 처리와 UI 렌더링의 분리

이번 작업은 눈이 번쩍 뜨이는 경험이었다. 처음에는 @api/article.ts와 @pages/community/index.tsx가 둘 다 API를 호출하고 있어서, 대체 뭐가 다르지? 하는 생각이 머릿속에 가득했다.

 

하지만 그 차이를 이해하고 나니, 두 파일의 분업 구조가 얼마나 중요한지 깨닫게 되었다.

@api/article.ts는 데이터를 처리하는 주방의 요리사 같은 역할이었다. 이 파일이 모든 재료(데이터)를 다듬고, 조리해서 준비된 요리를 만들어낸다.

API 요청이 들어오면 그때그때 필요한 데이터들을 가져오거나 수정하고, 클라이언트에게 적절한 응답을 제공한다. 이 파일이 없었다면, 내 페이지는 데이터를 어떻게 처리할지 몰라 우왕좌왕했을 거다.

 

반면에 @pages/community/index.tsx는 이제 요리를 테이블에 올리는 서빙 담당처럼, 사용자가 페이지에 접속하면 그 즉시 깔끔하게 준비된 정보를 보여준다. getServerSideProps 함수가 서버에서 데이터를 패칭해오고, 그 데이터를 기반으로 페이지가 렌더링된다.

즉, 사용자는 페이지를 로드하는 순간 준비된 요리를 바로 맛볼 수 있는 셈이다. 덕분에 페이지 로딩 속도는 빨라지고, 사용자 경험은 더 매끄러워졌다. 처음엔 이런 구조가 조금 난해하게 느껴졌지만, 점차 작업하면서 이 방식의 강점을 몸소 체험하게 됐다.

데이터 처리와 UI 렌더링의 분리는 코드의 복잡성을 줄이고, 유지 보수도 더 용이하게 만들었다. 마치, 방 안이 어지러울 때 모든 물건을 제자리에 놓으니 공간이 정돈되는 느낌이랄까.

 

이번 작업을 통해 SSR(서버사이드 렌더링)의 진정한 가치를 다시 한 번 깨닫게 됐다. 이제 더 복잡한 작업도 이와 같은 패턴을 적용해 나갈 수 있을 것 같다.

이런 경험을 토대로 앞으로는 더 깔끔하고 효율적인 코드 작성을 목표로 삼아야겠다는 결심을 하게 됐다.

되돌아보면, 처음엔 조금 혼란스러웠던 구조가 이제는 명확해졌고, 앞으로 더 복잡한 작업도 이와 같은 방식으로 해결할 수 있을 것 같다.

이번 작업을 통해 얻은 이 깨달음을 앞으로 더 나은 코드 작성에 활용해야겠다.