SSR과 CSR에 대한 질문

Question

제가 지금 강좌를 보면서 햇갈리는 것이 있습니다.

아래는 제가 SSR에 대해 배운 내용입니다.
1. 클라이언트가 페이지 요청을 Front Server에 한다
2. Front Server는 해당 페이지의 데이터를 Backend Server에 요청한다
3. Backend Server는 필요한 데이터를 DataBase에 요청한다
4. Database가 Backend Server에 Data를 발송한다
5. Backend Server는 Front Sever에 Data를 발송한다.
6. Front Server는 HTML파일과 같은 것과 Data를 섞어서 클라이언트에 발송한다

그러면 이것을 정리하면
페이지 하나를 받아올때,
Client -> front -> back -> db -> back -> front -> client
위와 같은 방법으로 받아오는 것 같은데,

제가 더 알아보고 싶어서 인터넷에 검색을 했더니
SSR 방식은 client에게 js가 없는 페이지를 먼저 띄우고 데이터를 불러오는 방식이라고 합니다

그렇다면 Client -> front -> Client -> Back -> DB -> Back -> Client가 맞는 것 아닌가요?

손정현 · Answer

음, 질문자님이 언급한 플로우도 (Client -> front -> Client -> Back -> DB -> Back -> Client) 충분히 있을 수 있을 것 같아요.

그전에 1~6번의 플로우가 일반적인 SSR의 흐름이라고 생각하시면 될 것 같습니다.

이 페이지를 예로 들어볼까요?
(https://careerly.co.kr/qnas/773?fa=qna-list)
현재 이 페이지는 Next.js 프레임워크의 SSR 기능을 사용하고 있습니다.

크롬 데브 툴(f12)로 네트워크 탭을 열고 새로고침을 하시면, 페이지가 어떤 요청을 보내고 어떤 데이터를 받는지 볼 수 있습니다.

제일 처음 요청하는 773?fa=qna-list (아님 그냥 773) 요청을 눌러서 preview 창을 보시면 이 페이지를 렌더하기 위한 질문자님의 질문 데이터가 이미 HTML에 포함 된 것을 보실 수 있습니다. 이 HTML은 frontend server에서 내려준 것입니다.

이 흐름을 1~6번에 맞춰서 보면:
1. 클라이언트가 페이지 요청을 Front Server에 한다
- 크롬이 frontend server로 773?fa=qna-list 요청을 한다

2. Frontend Server는 해당 페이지에 필요한 데이터를 Backend Server에 요청한다
- frontend server는 qna/773에 맞는 데이터를 backend server로 요청한다
(이건 크롬 데브 툴 네트워크 창에 뜨지 않습니다. frontend server 컴퓨터에서 backend로 요청하는 것이니, frontend server 로그에 남겠죠)

3. Backend Server는 필요한 데이터를 DataBase에 요청한다
- qna/773에 대한 정보를 backend가 DB로 요청한다
(질문자님의 질문 내용이겠죠)

4. Database가 Backend Server에 Data를 발송한다
- qna/773에 대한 정보를 DB에서 backend로 보내준다

5. Backend Server는 Front Sever에 Data를 발송한다.
- qna/773에 대한 정보를 backend에서 frontend server로 보내준다

6. Frontend Server는 HTML파일과 같은 것과 Data를 섞어서 클라이언트에 발송한다
- 전달받은 qna/773에 대한 정보를 사용해서 preview에 나왔던 HTML 페이지를 클라이언트 (크롬)으로 보내준다
- 이게 js가 없는 페이지가 되겠죠?

--------
이제 추가로 질문 내용 하단에 있는 궁금해요 버튼을 한번 볼까요?
궁금해요 버튼을 누르면 상태 값이 바뀌면 UI가 업데이트 되는 것을 볼 수 있습니다.

이거를 네트워크 탭에서 보시면, liked라는 이름의 PUT 요청이 날라가는 것을 볼 수 있습니다.
여기서 headers 탭을 눌러서 보시면 요청한 서버의 주소를 볼 수 있습니다. 이 주소를 773?fa=qna-list 요청의 header와 비교해보시면 주소가 다른 것을 볼 수 있죠?

773?fa=qna-list는 frontend server로 요청을 한 것이고, liked는 backend server로 요청을 한 것입니다.

(아까 보았던 773?fa=qna-list preview에서도 궁금해요 버튼은 있었지만 눌러도 아무런 요청이 날라가지 않습니다. hydration 과정을 아직 거치지 않은 js가 없는 페이지이기 때문이죠)

--------
결론은 1번~6번의 플로우는 일반적인 SSR 페이지 (서버에서 데이터를 조회할 필요가 있는 페이지)를 요청할 때 거치는 플로우를 설명하고 있고 질문자님의 플로우도 페이지의 구성에 따라 가능한 플로우일 수 있다 입니다.

예를 들면, frontend server에서 SSR로 내려주는 페이지가 최초 렌더 시에 backend로 데이터를 요청할 필요가 없는 페이지이고 이후 client에서 hydration 과정을 거친 후 js로 인해 backend로 데이터를 요청하게끔 되어있다면 질문자님이 언급하신 Client -> front -> Client -> Back -> DB -> Back -> Client 플로우가 성립할 것 같긴하네요. 하지만 이 경우는 backend로 데이터를 조회하는 로직이 CSR로 처리된다고 생각하시면 될 것 같습니다.