서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(SPA)

 

 

클라이언트 사이드 랜더링(CSR)

 

• 클라이언트 사이드 랜더링(CSR)는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미합니다.
• 클라이언트 사이드 랜더링(CSR)은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있습니다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행할 수 있습니다.
• 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 먼저 웹앱을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주는 클라이언트사이드렌더링은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공합니다.

 

 

- 장점

 

• 트래픽감소를 할 수 있습니다.  필요한, 변경된 데이터만 받아서 그렇기 때문입니다.
• 웹의 사용자경험이 매우 좋습니다. 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있습니다.

 

 

 

- 단점

 

• 검색엔진이 되지 않는 것이 단점입니다. 자바스크립트 위주로 돌아가는 프로젝트는 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 못합니다.
• 크롬에서 react로 만든 웹앱의 소스를 확인하면, 내용이 비어있으며 그렇기때문에 검색엔진 크롤러가 데이터들을 제대로 수집하지 못합니다.
• 구글의 검색엔진은 자바스크립트 엔진이 내장되어있기는 하지만 네이버, 다음 등의 검색엔진은 제대로 크롤링하지 못하기때문에 서버사이드렌더링을 따로 구현해야합니다.

 

 

 

 

서버 사이드 랜더링(SSR)

 

• 과거 전통적인 웹 방식 서버 사이드 랜더링(SSR)은 이 SPA 방식에 비해 성능문제 이슈가 있었는데 전통적인 웹 대부분은 서버 사이드 랜더링(SSR) 방식 이었습니다.
• 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식이었습니다. 이런 방식을 사용하다가 일부 HTML과 Script만 브라우저로 전달하고, 브라우저에서 Script를 실행시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식을 사용하게 되었습니다.
• 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 전통적인 방식은 성능문제에 이슈를 낳았으며 그 이유로는 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식을 사용하고 있었기 때문이었습니다. 예를들어 현재 주소에서 동일한 주소를 가리키는(갖고있는) 버튼을 눌렀을때, 설정페이지에서 필요한 데이터를 다시 가져올 수 없는 것을 예를 들 수 있습니다.
• 이것은 사용자와 인터랙션이 많은 요즘 웹앱에게 충분하지 않는 방법이며 렌더링을 서버쪽에서 하는 것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽도 낭비되는 단점을 가지게 됩니다.

 

 

 

- 장점

 

• 검색엔진최적화(SEO) 가능이 합니다. 서버사이드렌더링을 통해 얻을 수 있는 가장 큰 이점입니다.
• 첫 렌더링된 html을 클라이언트에게 전달해주기때문에 초기로딩속도를 많이 줄여줄 수 있습니다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있게 됩니다.

 

 

- 단점

• React에서 서버사이드렌더링을 구현할 경우 Router와 Redux와 함께 사용하다보면 복잡해질 수 있습니다.
• 성능의 악화 가능성으로 서버사이드 렌더링을 하게 될 때는, ReactDOMServer.renderToString 함수를 사용하여 이 함수가 동기적으로 작동합니다. 그래서, 렌더링하는동안은 이벤트루프가 막히게 됩니다. 하지만 라이브러리를 통하여 비동기식으로 작동하게끔 코드를 작성 할 수 있습니다. (프로젝트 서비스를 고려하여 오직 검색엔진 최적화를 위해서만 사용하는 것이 좋습니다.)
• 서버쪽에서 라우트에 따라 필요한 메타태그만 넣어주는 것 또한 크롤러에선 해당 페이지에 대한 기본 정보는 얻어 갈 수 있게 되어 성능 악화를 막을 수 있습니다.

 

 

 

 

위의 방식들을 사용한 다른 종류의 기술들

 

- SPA
페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때, 페이지가 새로 고침되지 않고 다른 페이지로 넘어가지 않습니다. (CSR방식 사용)

- MPA
MPA(Multi Page Application)는 서버로부터 완전한 페이지를 받아오고 이후에 데이터를 수정하거나 조회할 때, 다른 완전한 페이지로 이동합니다(URL이 바뀔 수 있습니다) (SSR방식 사용)

 

출저: https://blog.hahus.kr/csr-ssr-spa-mpa-ede7b55c5f6f

CSR, SSR, SPA, MPA? 상사한테 혼나기 전에 알아야하는 것