[Next.js vs React] 요청 흐름 차이

Next.js를 처음 배우면 "Next.js는 서버를 거쳐서 데이터를 가져온다" 라는 개념이 헷갈릴 수 있습니다.
그렇다면 일반 React와 Next.js의 요청 흐름을 비교하면서 차이점을 살펴보겠습니다.

■ 일반 React (CSR) 요청 흐름

React는 기본적으로 CSR(Client-Side Rendering) 방식입니다.
즉, 브라우저에서 HTML을 먼저 띄운 후, 필요한 데이터를 백엔드에서 가져와서 화면을 업데이트하는 방식이에요.

브라우저 (React 앱) → 백엔드 (API 서버)

📌 CSR 방식 요청 흐름

1. 사용자가 페이지에 접속
2. 브라우저가 React 앱을 실행
3. React가 fetch 또는 axios로 백엔드 API를 호출
4. 백엔드가 데이터를 응답하면, React가 화면을 업데이트

즉, 데이터 요청이 클라이언트(브라우저)에서 실행된다는 것이 핵심입니다.

■ Next.js (SSR) 요청 흐름

Next.js는 기본적으로 SSR(Server-Side Rendering) 방식을 지원합니다.
즉, Next.js 서버에서 먼저 HTML을 생성한 후, 브라우저에 전달하는 방식이에요.

Next.js 서버 (SSR) → 백엔드 (API 서버)
         ↓
브라우저 (렌더링된 HTML 수신)

📌 SSR 방식 요청 흐름

1. 사용자가 페이지에 접속
2. Next.js 서버가 먼저 실행되어 데이터를 백엔드 API에서 가져옴
3. 백엔드가 데이터를 응답하면, Next.js 서버가 이를 이용해 완성된 HTML을 생성
4. 브라우저는 Next.js 서버가 보낸 HTML을 받아 즉시 화면을 표시

즉, Next.js SSR을 사용하면, 브라우저가 직접 API를 호출하지 않고, Next.js 서버가 API와 통신한 후 결과를 브라우저에 전달합니다.

■ Next.js가 일반 React와 다른 이유

일반 React(CSR)에서는 브라우저가 직접 백엔드에 API 요청을 보냅니다.
반면, Next.js(SSR)를 사용하면 Next.js 서버가 먼저 API 요청을 처리한 후, 완성된 HTML을 브라우저에 전달합니다.

이 차이 때문에 Next.js SSR에서는 sessionStorage, window, document 같은 브라우저 전용 API를 직접 사용할 수 없는 것이죠.

📌 결론

1. 일반 React(CSR)는 브라우저에서 실행되며, 클라이언트가 직접 API 요청을 보냅니다.
2. Next.js(SSR)는 Next.js 서버가 먼저 실행되어 API와 통신한 후, 브라우저에 HTML을 전달합니다.
3. 이 차이 때문에 Next.js에서는 브라우저에서만 동작하는 API(sessionStorage, window)를 직접 사용하면 안 되고, useEffect를 활용해야 합니다.

즉, Next.js는 일반 React와 다르게 "Next 서버 → 백엔드 → 브라우저" 순서로 동작할 수 있습니다!