SSR과 API를 만드는 것의 차이

SSR : 서버 사이드 렌더링

• 완전히 렌더링하고 그 결과를 클라이언트에게 제공

SSR의 통신 과정

1. 클라이언트(브라우저) 가 웹페이지를 요청한다.

2. 웹 서버는 요청을 받고 해당 웹페이지를 렌더링한다.

3. 서버에서 데이터를 가져오고 웹페이지를 완전한 HTML 형태로 렌더링한다.

4. 완전한 HTML 페이지가 클라이언트에게 전달되고 브라우저에 표시된다.

 

서버사이드 렌더링(SSR)을 사용하는 경우, 웹 페이지의 초기 렌더링은 웹 서버 측에서 수행된다.

API

• API는 다른 소프트웨어 컴포넌트 간의 상호작용을 허용하는 인터페이스

웹과 API서버의 통신 과정

1. 웹 서버에서는 html,css,js코드를 다운로드한다.
2. 웹 브라우저에서 DB에 담긴 정보를 동적으로 가져오기 (위해 웹 서버가 아닌)API서버와 통신한다.
3. API서버는 브라우저가 필요한 데이터를 DB에서 탐색한다
4. 탐색에 성공하게 되며 이 결과물은 웹브라우저에게 제공된다

따라서 매번 같은 정보만 나타내는 정적 페이지는 이 과정이 필요하지 않다.

 

정리

SSR은 HTML 페이지를 화면에 띄우는 것이고, API를 만드는 것은 백엔드와 프론트엔드 사이에서 자원을 주고받는 통로를 만드는 것이다. SSR은 초기 웹 페이지 렌더링시 클라이언트의 요청을 받은 서버 측 데이터베이스(DB)에서 데이터를 가져와 웹 페이지를 렌더링하여 클라이언트에게 제공한다. 클라이언트는 이 데이터를 렌더링된 페이지와 함께 받아온다. 반면 API를 만드는 것은 초기 브라우저 렌더링시 , 초기페이지 로딩 후 클라이언트 측에서 API요청을 보내고, API서버는 요청을 처리하고 필요한 데이터를 데이터베이스에서 가져와 클라이언트에게 응답을 제공한다.

---

ref.

 

https://voyage-dev.tistory.com/38

[Web] SSR (서버사이드 렌더링) vs CSR (클라이언트 사이드 렌더링)

https://blog.kakaocdn.net/dn/mFgvh/btqMPiNuADf/8xS3pT40500B288GS9JvI1

https://ablue-1.tistory.com/96