🌐 클라이언트사이드 렌더링(CSR) VS 서버사이드 렌더링(SSR) | SPA, 장단점

 

 

클라이언트사이드 렌더링

클라이언트사이드 렌드링에 가장 대표적인 것으로 Single Page Application(SPA)가 있다. 

 

 

📌 SPA란? 

SPA는 전통적인 Multi Page Application(MPA)과 다르다. SPA는 단 하나의 웹페이지(단 하나의 html)에서만 렌더링이 이루어진다. 

 

 

 

네트워크 탭을 보면 단 하나의 파일만 내려받는 것을 볼 수 있다. 리액트를 사용하여 프로젝트를 진행했었는데 보이는 것과 같이 하나의 html파일만 받아오지만,

 

 

 

유저가 탭에서 선택하면 렌더링 되는 것이 달라지는 것을 볼 수 있다. 이러한 방식을 클라이언트사이드 렌더링이라고 한다. 

 

SPA는 처음 화면을 켰을 때, 비어있는 HTML 파일을 받아온다. 그리고 로드 되면서 데이터를 서버에 요청하고 화면에 렌더링한다. 

 

직접 클라이언트에서 언제 데이터를 불러올지 설정해주어야 하는데 react와 react-router-dom 모듈 사용하여 SPA를 구현할 수 있다.

    <Switch>
          <Route exact path="/intro" render={() => {
            return <Intro />
           }} />
     </Switch>

 

이렇게 react-router-dom에서 라우팅을 해주어서 /intro, /login ... 으로 식별하는 주소를 넣을 수 있었다. 주소가 있어야 나중에 북마크를 할 수도 있고, 구글 검색엔진(SEO)을 통해 유입이 될 수 있기 때문에 주소를 넣어야 한다. 웹 브라우저 주소창 URL에 다른 것이 렌더링 될 때마다 주소, 렌더링되는 데이터가 바뀌게된다. 

 

 

 

📌 SPA가 나오게 된 배경

SPA는 전통적인 웹 방식인 SSR의 문제점을 해결하고자 나온 방식이다. 웹에서 제공하는 정보가 많아짐에 따라 SSR 방식으로 할 경우 많은 한계점이 생겼다. 새로고침 할 때마다 서버에 새로 요청을 보내서 html파일을 받아와야 하기 때문에 트래픽, 서버 자원이 낭비되었다. 반면, SPA는 맨 처음 하나의 html 파일만 받아오고 데이터 변경이 있을 때만 서버에 요청을 하기 때문에 확실히 트래픽과 서버 자원이 감소한다. 

 

 

📌 SPA의 장점

1. 처음 로딩이 될 때  하나의 html파일만 받으면 되기 때문에 동적으로 빠르게 렌더링 할 수 있다.(사용자 UX가 뛰어남)

2. 서버에 요청하는 횟수가 서버사이드 렌더링과 비교했을 때 훨씬 적다.(서버부담이 덜함 -> 데이터 변경이 있을 때만 요청을 한다.)

 

 

📌 SPA의 단점

1. 처음 로딩될 때 모든 html과 static파일이 로드될 때까지 기다려야 한다. 

2. 자바스크립트 엔진이 내장되어있는 구글 검색엔진이 아니라면, 크롤링을 제대로 하지 못한다. (실제 react 소스를 확인하면 내용이 비어있다)

 

 

---

 

서버사이드 렌더링

1.html, 2.html, 3.html 등 여러개의 파일을 만들어서 각각 다른 페이지를 렌더링하는 방식이다.  웹서버에 요청을 할 때마다 Browser에 새로고침이 일어나고, 서버에 새로운 페이지에 대한 요청을 한다. 

 

SSR은 처음부터 서버에게 완성된 html 파일을 받아와서 화면에 렌더링 된다. 

 

📌 SSR의 장점

1. 처음 로딩이 될 때, 완전한 html 파일을 받아오기 때문에 사용자가 빨리 렌더링된 화면을 볼 수 있다.

2. 검색엔진최적화(SEO) 가능

 

 

📌 SSR의 단점

1. 매번 페이지를 요청할 때마다 새로고침이 일어나서 사용자 UX가 떨어진다. 

2. 매번 서버에 html 파일을 요청을 하기 때문에 트래픽, 서버 부하가 커진다. 

 

 

 

 

 

클라이언트사이드 렌더링, 서버사이드 렌더링에 대한 각각의 장단점이 있기 때문에 어떤 것을 사용하면 좋을지 고민하고 사용하면 좋을 것 같다. 

 

 

 

 

 

 

 

 

 

 

[참고자료] [주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR) -> bit.ly/3pRyLsA

 

CSR, SSR -> velog.io/@namezin/CSR-SSR

CSR, SSR