11. 서버사이드 렌더링 , 클라이언트 사이드 렌더링

이번 포스트는React Router 에 대해 공부를 하던 도중,

서버사이드 렌더링, 클라이언트 사이트 렌더링, SPA에 대한 공부가 필요하다고 생각하여

쓰는 포스팅입니다.

---

렌더링

- 어떠한 웹 페이지 접속시, 그 페이지를 화면에 그려주는 것.

전통적인 방식에서의 웹페이지 구동 방식

요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식입니다.

마치 필요한 물건이 있을때마다 사러 가는것과 비슷합니다.

이때 , View가 어떻게 보여질지 또한 서버에서 해석하여 보내주는데,

이러한 방식을 서버사이드렌더링 방식이라고 합니다.

-> 서버 측에서 HTML&View을 생성하여 응답하는 방법

하지만 기술의 발전으로 웹에서 제공되는 정보량이 많아지고, 여러 문제점이 발견되면서

전통적인 방식의 웹페이지 구동방식과는 다른 SPA ( Single Page Application ) 기법이 등장하게 되었습니다.

SPA 구동방식

SPA는 말 그대로 처음에 하나의 빈 페이지만 서버측에서 제공하고,  View에 대해서는 Client에서 자바스크립트를 통해 렌더링 하는 방식입니다.

이 방식을 클라이언트사이드 렌더링 방식이라고 합니다.

-> 클라이언트 측에서 View를 생성하는 방법

---

뭔가 말이 어렵지만,

간단히 말하면, View를 렌더링 하는 위치가 서버인지 혹은 클라이언트 인지에 따라

서버사이드 렌더링 혹은 클라이언트사이드 렌더링 이라고 말합니다.

주의할점은 (전통적인 웹페이지 방식 === 서버사이드 렌더링) 이 아니라는 것과

(SPA === 클라이언트사이드 렌더링) 이 아니라는 것입니다.

전통적인 웹 페이지 방식이 서버사이드 렌더링 방식을 사용하고,

SPA가 클라이언트 사이드 렌더링 방식을 사용한다는 것 입니다.

서버사이드 렌더링과 클라이언트 사이드 렌더링의 차이점을 얘기하자면,

여러가지가 있겠지만 주목해야 할 부분은 2가지 정도로 생각됩니다.

1. 초기 View 로딩 속도

2. SEO

- 초기 View 로딩 속도

간단하게 그림으로 설명하겠습니다.

SSR ( Server Side Rendering ) 의 경우에는 View를 서버에서 렌더링 하여 가져오기 때문에

첫 로딩이 매우 짧습니다. ( View 를 보기까지 ) 물론 JS파일을 모두 다운로드하고 적용하기 전까지는 그 어떤 인터렉션에도 반응하지 않지만, 사용자 입장에서는 로딩이 매우 빠르다고 생각할수 있습니다.

반면에 CSR ( Client Side Rendering ) 의 경우에는 서버에서 View를 렌더하지 않고 HTML을 다운받은다음 JS파일이나 각종 리소스를 다운받은후 브라우져에서 렌더링하여 보여주기때문에

SSR보다는 초기 View를 볼수 있기까지 시간이 오래 걸립니다. 즉 로딩이 길어집니다.

허나 View가 보여진 시점에서 바로 인터렉션이 가능해집니다.

이 두 차이점은 어떤것이 더 좋은 방식이라고 말할수 없을듯 합니다.

어쨋든 사용자가 사용 가능한 시점은 거의 차이가 없다고 생각되니까요.

하지만 SEO 문제에 대해서는 많은 생각을 해봐야 할것 같습니다.

SEO는 Search Engine Optimization 으로, 검색 엔진 최적화 문제입니다.

CSR방식으로 이루어진 사이트는 View를 생성하는데 자바스크립트가 필요합니다.

그 전까지는 HTML의 내용은 비어있기때문에 웹 크롤러들은 내용을 알수 없고,

제대로된 데이터를 수집할수 없게 됩니다.

( Google은 자바스크립트를 해석해서 크롤링 해준다고 합니다. )

하지만 전 세계 사람들이 google만 쓰는것은 아니므로......

SEO에 대한 문제는 매우 크다고 생각합니다.

만일 SEO가 잘 되지 않는다면, 자신이 만든 웹 어플리케이션의 내용이 검색엔진에 제대로 표시되지 않고, 그만큼 사용자의 유입이 줄어들기 때문입니다.

정리하면,

서버사이드렌더링의 경우, 초기 로딩속도가 빠르고, SEO에 유리하지만, View 변경시 서버에 계속 요청을 해야 하므로 서버에 부담이 크다.

클라이언트사이드렌더링의 경우에는, 초기 로딩속도는 느리지만, 초기 로딩 후에는 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 매우 빠르다. 하지만 SEO에 대한 문제가 있다.

라고 정리할수 있을것 같습니다.

최근에는 이 두가지 방법들을 적절하게 융합한 방법들도 나오는것으로 보입니다.

즉 첫번째 페이지 로드에는 서버사이드 렌더링을 사용하고,

그 후에 모든 페이지 로드에는 클라이언트 사이드 렌더링을 활용하는 방안입니다.

특히 

Isomorphic JavaScript 라는 말이 있는데

서버와 클라이언트가 같은 코드를 사용한다는 뜻으로, ReactJS가 여기 포함됩니다.

( ReactJS는 처음부터 서버사이드 렌더링을 염두하고 개발되었다고 합니다)

즉 ReactJS를 서버사이드렌더링을 적용한다면,

웹앱이 가지는 대부분의 단점들을 극복할수 있게 됩니다.

( 예를 들면 SEO... SEO... SEO....)

http://isomorphic.net/ 을 둘러보시기 바랍니다.

---

추가적으로 이 포스팅은 공부를 하면서 계속 업데이트 할 예정입니다.

만일 이 포스팅을 읽으시고, 수정할 사항이나 제가 잘못 알고 있는 부분이 있다면 꼭 알려주시길 부탁드리겠습니다.

감사합니다.