웹 요청의 흐름

웹 요청 흐름

 

웹 어플리케이션이 SSR(Server-Side-Rendering) 또는 CSR(Client-Side-Rendering)으로 구성되었을 때의 웹 요청의 흐름을 정리한다.

웹 요청의 주체는 브라우저(클라이언트), 프런트 서버, 백엔드 서버, DB 서버로 구성돼있다고 한다.

 

 

 

1. SSR(Server-Side-Rendering)

SSR은 브라우저가 특정 페이지에 대한 요청을 했을 때, 서버(프런트 서버)에서 완성된 HTML을 받아 화면을 렌더링 한다.

SSR에서의 웹 요청 흐름은 다음과 같은 순서로 이루어진다.

 

 

1.1 브라우저_웹 페이지 요청

브라우저가 웹 페이지에 방문하기 위해 특정 주소로 요청을 보낸다. 

이때 요청이 보내지는 주소는 프런트 서버의 주소가 된다.

 

[브라우저_웹 페이지 요청]

 

 

 

1.2 프론트 서버 -> 백엔드 서버 요청

프론트 서버는 HTML을 만들기 위한 데이터를 얻기 위해 백엔드 서버에 요청을 보낸다.

 

[프런트 서버 -> 백엔드 서버 요청]

 

 

 

1.3 백엔드 서버 -> DB 서버 요청

백엔드 서버는 프론트 서버가 요청한 데이터를 만들기 위해 DB 서버에 데이터를 요청한다.

 

[백엔드 서버 -> DB 서버 요청]

 

 

 

1.4 DB 서버 -> 백엔드 서버 데이터 전달

DB 서버는 백엔드 서버에서 받은 요청에 부합하는 데이터들을 백엔드 서버에 전달한다.

 

[DB 서버 -> 백엔드 서버 데이터 전달]

 

 

 

1.5 백엔드 서버 -> 프런트 서버 데이터 전달 

백엔드 서버는 DB 서버에서 전달받은 데이터들에 비즈니스 로직을 적용해 데이터들을 가공한다.

이렇게 프런트 서버의 요청에 맞게 가공된 데이터들이 프론트 서버로 전달된다.

가공된 데이터들을 보통 JSON을 이용해서 전달된다.

 

[백엔드 서버 -> 프론트 서버 데이터 전달]

 

 

 

1.6 프론트 서버 -> 브라우저 HTML 전달

프론트 서버는 백엔드 서버에서 전달받은 데이터로 HTML(화면)을 작성한다.

이렇게 완성된 HTML을 브라우저에 전달한다.

 

[프런트 서버 -> 브라우저 HTML 전달]

 

 

 

1.7 브라우저_HTML 적용

브라우저는 프론트 서버에서 전달받은 HTML을 읽어서 사용자에게 완성된 화면을 보여준다.

 

[브라우저_HTML 적용]

 

 

 

 

2. CSR(Client-Side-Rendering)

CSR은 SSR과 달리 요청마다 서버(프런트)를 경유하지도 않으며 서버에서 완성된 HTML을 받지도 않는다.

필요할 경우에만 프론트 서버에서 화면을 렌더링 하는데 필요한 html, js, img, css 등을 브라우저에 다운로드하고,

브라우저에 다운된 데이터들을 이용해서 화면을 렌더링 한다.

 

CSR에서의 웹 요청은 다음과 같은 순서로 실행된다. 

 

2.1 브라우저_웹 페이지 요청

브라우저가 웹 페이지에 방문하기 위해 특정 주소로 요청을 보낸다. 

이때 요청이 보내지는 주소는 SSR과 같이 프런트 서버의 주소가 된다.

 

[브라우저_웹 페이지 요청]

 

 

 

2.2 초기 데이터 다운

브라우저가 해당 웹 사이트에 처음 방문한다면 프론트 서버로부터 화면 렌더링에 필요한 데이터들을 다운로드한다.

 

[초기 데이터 다운]

 

 

 

2.3 브라우저 -> 백엔드 서버 요청

프런트 서버로부터 다운로드한 자바스크립트는 직접 화면 렌더링에 필요한 데이터를 백엔드 서버에 요청한다.

 

[브라우저 -> 백엔드 서버 요청]

 

 

 

2.4 백엔드 서버 -> 브라우저 데이터 전달

백엔드 서버는 요청받은 데이터를 만들기 위해 DB 서버에서 데이터를 받아 요청에 맞는 데이터로 가공한다.

이후에 가공된 데이터들을 브라우저(자바스크립트)에 전달한다.

 

[백엔드 서버 -> 브라우저 데이터 전달]

 

 

 

2.5 브라우저_화면 렌더링

브라우저의 자바스크립트에서는 백엔드 서버에서 받은 데이터로 HTML(화면)을 완성시킨다.

이런 식으로 완성된 HTML는 브라우저에 읽어져서 사용자에게 보여진다.

 

[브라우저_화면 렌더링]

 

 

 

2.6 브라우저_추가 요청

브라우저가 추가적인 요청을 할 때 화면을 렌더링 하는데 필요한 데이터가 전부 다운로드되어있다면 프런트 서버를 경유할 필요는 없다.

브라우저 내의 자바스크립트는 브라우저의 요청에 맞는 화면을 렌더링 하기 위해서, 직접 필요한 데이터를 백엔드 서버에 요청한다.

 

[브라우저_추가 요청]

위 그림의 흐름은 다음과 같다.

 

1. 사용자는 http://front/1의 화면을 요구한다.

2. 브라우저 내의 자바스크립트는 http://front/1의 화면을 만들어달라는 요청을 받는다.

3. 브라우저 내의 자바스크립트는 화면을 만들기 위한 데이터를 설정된 API(http://back/1)를 사용해서 백엔드 서버에 요청한다.