서버 사이드 렌더링(SSR)의 서버는 무엇인가

Next를 접하면서 생긴 궁금증이 있다. Next는 서버 사이드 렌더링 기법을 사용하고 서버 사이드 렌더링은 서버에서 컴포넌트를 해석하여 사용자에게 보여줄 페이지를 구성한다. 별도로 구현한 백엔드 서버가 있는 것도 아닌데 여기서 서버는 어떤 서버를 말하는 것일까..?  궁금해서 찾아보게 되었다.

 

📌 서버란?

클라이언트의 요청에 응답하여 서비스를 제공하는 프로그램이다. 이때 제공하는 서비스에 따라 종류가 여러개로 나뉘게 된다. 

 

ex ) 웹 서버, db 서버, 캐시 서버 등

 

📌 웹 서버와 웹 애플리케이션 서버

서버의 다양한 종류가 있지만 관련 핵심인 웹 서버와 웹 애플리케이션 서버에 대해 얘기해보고자 한다.

 

🎇 웹 서버 ( Web Server )

클라이언트로부터 http 요청을 받아 정적인 컨텐츠( html, css .. ) 를 제공한다.

 

또, 동적인 컨텐츠 제공을 위한 요청을 전달한다. 클라이언트의 요청을 WAS에 보내고, WAS가 처리한 결과를 클라이언트에게 다시 전달한다.

 

🎇 웹 애플리케이션 서버 ( WAS )

WAS는 웹 서버 + 웹 컨테이너의 형태로,

웹 서버 단독으로는 처리할 수 없는 DB 조회나 로직 처리 등 웹 페이지를 구성하는 동적인 컨텐츠를 제공한다.

 

🔎 그렇다면 WAS 단독으로 사용해도 되지 않은가?

WAS에 이미 웹 서버가 포함된 것이기 때문에 굳이 웹 서버를 또 두어야 하나라는 의문이 들 수 있다.

 

결론은 WAS와 웹 서버를 함께 두는 것이 효율성 측면에서 좋다.

 

WAS가 동적인 컨텐츠와 정적인 컨텐츠를 모두 처리할 경우 부하가 커지고 처리 속도가 지연되면서 페이지 노출 시간이 늘어나게 되어 효율성이 떨어진다. 단순 정적인 콘텐츠는 웹 서버에게 맡기고 WAS는 동적인 컨텐츠에 집중하며 기능을 분리시키면 서버 부하를 방지하여 효율성을 높일 수 있다.

 

 

📌 서버 사이드 렌더링에서 서버의 의미

어디서 튀어나온 서버일까.. 답은 프레임워크의 자체 개발 서버였다.

 

Next 프레임워크는 서버 측 기술이 내장되어 있다. 이 서버는 웹 서버와 동일하게 작용한다. (사실상 내장된 웹 서버라고 봐도 무방한 것 같다?). 프로그램을 실행시키면 작성된 소스코드를 바탕으로 개발 서버가 실행되어 각 페이지에 필요한 정적 콘텐츠를 브라우저에 보내주는 것이다.

  

SSR과 동일하게 RSC도 해당 서버에서 렌더링 된다.
SSR의 경우 소스코드를 바탕으로 HTML을 생성하는 작업을 해당 서버에서 모두 마친 뒤 브라우저에 HTML을 전송하고, RSC의 경우에는 HTML 이전에 컴포넌트 렌더링 자체를 서버에서 작업한다.

 

 

 

TMI . 챗지피티 이해시키기 성공..👍🏻