본문 바로가기
개발 공부/네트워크 기초

SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)

by dev_jun6 2021. 10. 28.

MPA와 SPA, SSR과 CSR에 대한 포스트입니다.

목차

  • MPA vs SPA
  • SSR 개념, 동작과정, 장단점
  • CSR 개념, 동작과정, 장단점
  • 렌더링 방식 선택 기준
  • Universal Rendering

 

MPA vs SPA

먼저 MPA,

multi page application 약자로 여러 페이지로 구성된 어플리케이션입니다.

사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html

받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 페이지 구성 방식입니다.

 

다음은 SPA,

Single Page Application 약자로 하나의 페이지로 구성된 어플리케이션 입니다. 

브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax 통해 데이터를 바인딩하는 방식입니다.

단일 페이지 어플리케이션(SPA) 현재 웹개발의 트랜드로 있고, 우리가 배운 react vue, 앵귤러와 같은 자바스크립트 프레임워크등이 spa 방식을 가지고 있습니다.

 

밑에 그림처럼

 SSR 새로운 파일을 불러오지만, CSR json파일의 데이터만 받아오게 됩니다.

SSR(Server Side Rendering) 개념, 동작과정, 장단점

Multi page application ssr방식을 채택합니다.

ssr이란 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식입니다.

먼저 클라이언트가 초기 화면을 로드하기위해 서버에 요청을 보냅니다.

그럼 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고 css 까지 모두 적용해서 렌더링 준비를 마친 HTML JS코드를 브라우저에 응답으로 전달합니다.

브라우저에서는 바로 전달 받은 페이지를 띄우구요. 이어, 브라우저가 JS 코드를 다운로드하고 html 실행시킵니다.

그럼 제가 여기서 세모만 네모로 변경하려면 어떻게 될까요?

 그럼 이전과 마찬가지로 서버 html 화면에 표시하는 필요한 완전한 리소스의 응답합니다.

, 세모 뿐만 아니라 동그라미, 마름모까지 모두 서버로부터 다시 다운받아 옵니다. 이런 이유로 요청을 보내고 응답을 받으면 새로고침되어 화면이 깜빡인 후에 표시됩니다.

먼저 seo 제공하는 것입니다

검색엔진최적화 라고도 불린 seo 요란 검색엔진이 웹을 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정입니다

서버사이드 렌더링을 채택하는 멀티 페이지 어플리케이션은 화면을 구성하는 각각의 페이지가 있기 때문에 seo 유리한 장점이 있습니다

(모든 데이터가 이미 HTML 담겨진채로 브라우저에 전달되기 때문에 검색엔진 최적화에 유리)

또한 빠른 초기 로딩 지닙니다

서버로부터 화면을 렌더 하기 위한 필수적인 요소를 먼저 가져오기 때문에 이후에 설명할 클라이언트 사이드 렌더링 보다 초기로 로딩 속도가 빠릅니다 

 

초기 로딩속도가 빠른 만큼 동시에 이것이 치명적인 단점이 되기도 합니다.

TTV(Time To View) TTI(Time To Interact) 간에 시간 간격이 존재하게 된니다. 사용용자가 버튼을 클릭하거나 이동하려고 해도 아무런 반응이 없을 있습니다.

또한, 매번 페이지를 요청할 때마다 새로 고침 되기 때문에 사용자 경험이 다소 떨어집니다 

마지막으론 서버측 부하가 증가합니다 페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가 됩니다

CSR(Client Side Rendering) 개념, 동작과정, 장단점

다음은 spa입니다. 싱글 페이지 어플리케이션은 렌더링 방식으로 Client Side Rendering, 클라이언트 사이드의 렌더링을 채택합니다

클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식입니다

csr 과정은 다음과 같습니다.

먼저 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보냅니다.

그럼 서버 화면에 표시하는 필요한 완전한 리소스의 응답합니다.

그런데 여기서 클라이언트 사이드 렌더링 방식이 서버사이드 렌더링 방식과 다른 점은 모든 js 파일을 다운받아 하기 때문에 초기 로딩 시간의 오래 걸린다 점입니다.

 

그러면 이번에도 화면에 구성하는 요소 중에 세모를 네모로만 변경해 보도록 하겠습니다.

 

클라이언트는 이전과 같이 서버의 요청을 보냅니다.

그럼 서버는 변경된 부분인 세모와 관련된 리소스만 응답합니다.

클라이언트 사이드 렌더링이 방식은 서버사이드 렌더링인 방식과 다르게 화면이 깜빡이지 않고 바로 수정된 데이터가 표시됩니다.

그럼 위의 과정을 생각해보며 장단점을 알아보겠습니다.

먼저 클라이언트 사이드 사이트 랜더링 방식은 장점으로 빠른 속도와 서버 부하 감소 있습니다.

클라이언트 사이드 렌더링 방식 변경된 부분과 관련된 데이터만 가져오므로 서버사이드 랜더링 보다 빠른 속도 보입니다.

(즉 경로가 변경될 때(프레임워크/라이브러리에서 제공하는 router 기능이 동작할 때) DOM을 조작하여 페이지 컴포넌트를 변경해서 실제로 하나의 파일로 동작하지만 서로 다른 View를 보여줄 수 있게 된다.

그리고 이런 페이지 컴포넌트가 변경될 때 필요하다면 웹 서버와 통신하여 컴포넌트를 그리는 데 필요한 데이터를 요청할 수 있다. 필요할 때만 서버와 요청하여 데이터를 받아오는 것이 효율적인 측면에서 볼 때 강점으로 작용한다.)

또한, 변경된 부분만 요청함으로써 서버의 부담 줄일 있습니다.

 

다음으로 사용자 친화적 이라는 장점 있습니다.

페이지 안에 컨텐츠를 클릭하여 다음 단계로 전환 하는 과정에서 링크가 없기 때문에 깜빡이 깜빡임 없이 부드러운 이동을 경험할 있습니다.

 

하지만 앞에서 언급한 seo 불리하다는 단점이 있습니다.

CSR을 채택한 싱글 페이지 어플리케이션은 자바스크립트를 사용하여 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에 크롤러 페이지를 색인화 하려고 하면 내용의 페이지 처럼 보이게 됩니다

(열심히 서비스를 만들었는데 검색사이트에 노출되지 않는 다면 좋지 않은 상황일겁니다. 

물론 남다르게 똑똑한 구글의 크롤러 봇은 자바 스크립트를 실행할 줄 압니다. 그래서 CSR 웹 크롤링도 가능하다고 하는데요.

하지만 아직 완벽한 단계가 아니기도 하고 구글 측에서도 여전히 크롤러봇이 JS를 실행하기전에 더욱 빠르게 크롤링을 할 수 있도록

또, 자바 스크립트를 실행할 수 없는 다른 크롤러 봇들을 위해서 SSR을 고려해 보라는 말을 덧붙이고 있습니다.)

 

또한 초기 로딩 속도가 느리다 단점이 있습니다 클라이언트 사이드 렌더링은 초기에 모든 js 파일을 다운받아 와야 하기 때문에 초기 로딩 시간이 오래 걸립니다. 

 

렌더링 방식 선택기준 

밑에 내용 참조

Universal Rendering

spauniversal rendering 방식에 대해선 좀더 자세히 포스팅하겠습니다. 내가 리액트를 사용하기에 next.js 만 좀 자세히...ㅎ

내일 있을 스터디 준비로 요약했지만 공부하다보니 자세히 다루고 싶은 내용들이 많다.

 

출처: 

반응형

댓글11

  • 카키니옹 2021.11.24 19:52 신고

    퍼가요
    답글

  • happilee12 2022.02.09 17:22 신고

    잘 읽었습니다. 이해하기 쉽게 잘 설명해주셔서 도움이 많이됐습니다.
    답글

  • 뚱이 2022.03.23 18:58

    많은 도움이 되었습니다. 감사합니다.
    답글

  • 뚱이 2022.03.23 18:59

    많은 도움이 되었습니다. 감사합니다.
    답글

  • 안녕하세요 2022.04.12 10:08

    안녕하세요. 글 잘 읽었습니다.
    csr이 고객의 개인정보를 더 잘 보호하는 것으로 정리해주셨는데 그 이유를 알 수 있을까요?
    글에 그런 내용이 없었던 것 같은데, 갑자기 나온 것 같아서 의문이 들었습니다.

    제가 글을 읽고 이해한 바로는

    ssr의 경우 request가 들어오면 해당 데이터를 DB에서 처리 후 담은 html을 렌더링 해서 내려주고,
    client에서는 서버에서 받은 html을 띄우고 해당 페이지에 필요한 js를 다운로드 받는 것으로 이해했습니다. 새로운 request가 들어오면 이를 반복하는 것이라 이해했습니다.

    반면 csr의 경우 첫 request가 들어오면 html page 한 개?와 프로그래밍 된 모든 js를 넘겨주고
    클라이언트에서 첫 페이지 로딩 시 모든 js를 다운 받는다고 이해했습니다. 또 새로운 request를
    처리할 시 서버에서는 DB에 데이터만 검색해서 동일 페이지로 다시 떨궈주는 방식이라고
    이해했습니다.(사용해본 적이 없어서 좀 모호하긴 하네요.)

    근데 이 부분에서 왜 csr이 개인정보 보호에 특출난 것인지 이해하기 어렵습니다.
    혹시 제가 이해한 내용이 맞는지 여부와 궁금증에 대한 도움 좀 주실 수 있을까요?
    답글

    • dev_jun6 2022.04.13 00:01 신고

      안녕하세요. 부족한 글 읽어주셔서 감사합니다.

      결론 부분을 보고 질문을 남겨주신 것 같아 답글을 적어보겠습니다.

      데이터를 더 잘 보호한다는 의미가 아니라,
      1)번과 3)번은 같은 맥락이긴 합니다. '개인정보 데이터를 기준으로 구성된 페이지'는 검색엔진 최적화가 필요하지 않다고 생각하시는게 좋을 것 같아요. 사용자가 입력한 데이터를 더 잘 볼 수 있도록 하는게 더 중요하기에 이럴 경우에는 CSR이 적합합니다.

      페이지로 예를 들자면, 프로필 페이지는 상위 노출은 필요 없지만 사용자와의 상호작용이 중요하고 데이터를 잘 보여주는 것이 중요하죠. 그것이 개인정보라면 노출이 되어선 안되겠죠.

      도움이 되셨으면 좋겠습니다. 감사합니다.

  • moonkey 2022.05.17 23:54

    좋은 글 감사합니다. NextJS의 필요성에 대해 쉽게 이해되었습니다.
    답글

  • 익명 2022.06.14 14:33

    비밀댓글입니다
    답글

  • 익명 2022.06.23 23:20

    비밀댓글입니다
    답글

  • 22sook00 2022.08.07 15:24

    관리자의 승인을 기다리고 있는 댓글입니다
    답글