📖 SSG(Static Site Generation)와 API 호출의 흐름: 빌드 시점과 런타임 시점의 차이

SSG(Static Site Generation)는 페이지를 빌드할 때 데이터를 미리 불러와서 정적 HTML 파일로 생성하는 방식입니다. 빌드 시점에 API를 호출하여 데이터를 가져오는 방식과 사용자가 페이지에 접근할 때 API를 호출하는 런타임 시점에 대해 혼동할 수 있습니다. 이 글에서는 그 차이를 명확히 설명하고, 크롬 개발자 도구의 네트워크 탭에서 왜 실제 API 요청이 보이는지에 대해 설명합니다.

1. 빌드 시점에 데이터 호출

SSG에서는 빌드 시점에 페이지에 필요한 데이터를 미리 호출하고, 이 데이터를 바탕으로 정적 HTML 파일을 생성합니다. 이때 API 요청은 빌드 과정 중에만 발생하며, 빌드 후에는 이미 데이터가 HTML 파일에 포함되므로 사용자가 해당 페이지를 요청할 때 API 호출이 이루어지지 않습니다.

예를 들어, Next.js에서 getStaticProps를 사용하여 빌드 시점에 데이터를 가져오고, 이 데이터를 정적 HTML에 포함시킵니다. 사용자가 /products/[id] 페이지에 접근하면, 이미 생성된 HTML을 제공받습니다.

2. 런타임 시점에 API 호출

하지만 회원가입이나 로그인과 같은 동적인 작업은 빌드 시점에 포함되지 않습니다. 사용자가 버튼을 클릭하거나 폼을 제출할 때, 클라이언트 측에서 실제로 서버에 API 요청을 보내는 런타임 API 호출이 발생합니다.

예를 들어, 회원가입 폼을 제출할 때 /api/register와 같은 POST 요청이 발생하며, 이 요청은 서버와 실제로 연결되어 데이터를 처리하게 됩니다.

3. 왜 네트워크 탭에 API 요청이 보이는가?

빌드 시점에 API 호출로 데이터를 가져오고, 이를 정적 HTML에 포함시켰기 때문에 페이지가 로드될 때 API 호출이 발생하지 않지만, 회원가입과 같은 동적인 작업에서는 여전히 런타임 시점에 API 호출이 발생합니다. 이때 네트워크 탭에 API 요청이 보이는 이유는 사용자가 인터랙션을 통해 데이터를 처리하는 시점에서 클라이언트가 실제로 API를 호출하기 때문입니다.

결론

• 빌드 시점 API 호출: 페이지를 빌드할 때 필요한 데이터를 미리 호출하여 정적 HTML을 생성하며, 사용자가 페이지를 접근할 때는 이미 포함된 데이터를 제공받습니다.
• 런타임 API 호출: 동적인 작업(예: 회원가입, 로그인 등)을 할 때는 런타임에서 API를 호출하여 데이터를 서버와 실시간으로 주고받습니다.
• 네트워크 탭에서 보이는 요청: 사용자가 페이지를 렌더링한 후, 동적인 작업을 처리할 때 발생하는 API 호출은 실제 서버와 연결되어 요청이 네트워크 탭에 보입니다.

SSG와 런타임에서의 API 호출 차이를 이해하면, 웹 애플리케이션이 어떻게 데이터를 처리하고 렌더링하는지 더 잘 파악할 수 있습니다.