Rendering 렌더링
-요청받은 내용을 브라우저 화면에 표시하는 작업.
SSR ( server side rendering )
- 간단히 말하자면 제공하고자 하는 웹 서비스의 화면을 서버 측에서 그리는 방법을 통칭하는 용어이다.
-서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링하는 방식
-서버에 페이지에 대한 요청을 하고 서버로부터 html, css, js파일 및 데이터를 전달받아 렌더링하는 방식입니다.
=> 서버에서 렌더링을 수행하는 방식
먼저 클라이언트가 초기 화면을 로드하기 위해 서버에 요청을 보냅니다. 그럼 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고 css까지 모두 적용해서 렌더링 준비를 마친 html과 js코드를 브라우저에 응답으로 전달합니다. 브라우저에서는 바로 전달 받은 페이지를 띄웁니다. 이어 브라우저가 JS코드를 다운로드하고 html에 실행시킵니다. 그럼 이전과 마찬가지로 서버 html로 화면에 표시하는데 필요한 완전한 리소스의 응답합니다. 즉 변경되지 않은 부분도 모두 서버로부터 다시 다운받아 옵니다. 이런 이유로 요청을 보내고 응답을 받으면 새로고침되어 화면이 깜빡인 후에 표시됩니다.
- 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 다소 떨어지고, 서버측 부하가 증가한다.
(페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가된다.)
장점
-js를 이용한 렌더링이 아니므로 seo(검색 엔진 최적화)가 가능하다 => html에 모든 컨텐츠가 저장되어있음.
단점
-매번 새로운 페이지를 요청할때마다 새로고침이 발생한다.
-간단한 데이터 수정에도 서버를 거쳐야한다.
-매번 서버에 요청을 하는 행위는 서버에 과부하의 원인이다.
CSR ( client side rendering )
-최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후 사용자의 요청에 따라 JS를 이용하여 필요한 리소스를 서버로부터 제공받고 클라이언트가 데이터를 해석, 렌더링하는 방식이다.
=> html을 그리는 역할을 client가 JS로 수행.
장점
-첫 로딩만 기다린다면 이후부터는 좋은 사용자 경험(UX)를 제공한다.
csr에서는 서버가 클라이언트에 필요한 데이터만 넘겨주기 때문에 부담이 적습니다. 그리고 SPA를 기반으로 화면의 일부만 받아온 데이터로 변경해 주기 때문에 빠른 렌더링으로 UX에 유리합니다.
-연속된 렌더링으로 인한 과부하를 줄일수 있다.
단점
-초기 렌더링 속도가 느리다.
-검색 엔진 최적화(SEO)에 문제가 발생한다.