CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 대척 관계에 있는 방식인만큼 장단점이 서로 엇갈려 있다.
따라서 서로의 장단을 정확하게 알고, 적재적소에 필요한 방식으로 구현하는 것이 중요하다.
1. Server Side Rendering(SSR)
server side rendering은 서버에서 렌더링을 하여 출력하는 방식을 말한다.
SSR의 작동 방식
유저가 웹사이트에 대한 정보를 요청하면 서버에서 즉시 렌더링이 가능한 HTML 파일을 생성하고 이를 클라이언트에게 전송한다.
해당 HTML 파일을 받은 클라이언트는 즉시 렌더링을 한다. 이 때 홈페이지 작동은 하지 않는다. 왜냐하면 아직 javascript에 대한 정보를 받지 않았기 때문이다. 이 때 작동한 동작들은 작동은 하지 않지만 브라우저에서 해당 작동을 기억해둔다.
javascript 다운을 클라이언트가 완료하였다면 javascript 프레임 워크를 실행한다. 저장되어 있던 작동을 진행하고, 이제 유저와 상호작용이 가능하다.
SSR의 특징
1. 첫 로딩이 빠르다.
SSR은 처음 해당 웹사이트를 요청할 경우 서버에서 렌더링하여 완성된 HTML을 우선적으로 다운로드한다. 그렇기에 초기 로딩이 빠르다.
2. SEO 관점에서 유리하다.
검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. SSR은 이미 완성된 HTML을 가지고 오기 때문에 크롤러가 많은 데이터를 확인할 수 있기에 SEO 관점에서 유리하다.
3. 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
SSR은 서버에서 렌더링을 하기에 새로운 페이지를 요청할 경우 서버에서 다시 렌더링을 하고 렌더링된 정적 리소스를 받는다. 그렇기에 페이지 이동간 흰 색 화면을 유저가 경험한다. 해당 과정이 많아지면 서버의 부하가 일어날 수 있다.
2. Client Side Rendering(CSR)
client side rendering은 문자 그대로 클라이언트에서 렌더링을 하는 방식이다.
CSR 작동 방식
유저가 웹사이트를 요청하면 CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. 클라이언트는 해당 링크를 통해 javascript를 다운받고 실행한다.
실행이 완료되면 브라우저 작동을 위한 데이터를 API로 요청한다. 이 때 유저는placeholder를 볼 것이다.
서버에서 해당 API를 요청받고 데이터를 클라이언트에게 보내주고 이 데이터를 통해 클라이언트는 웹을 구성한다.
CSR의 특징
1. 초기 로딩이 느리다.
CSR은 웹사이트를 요청할 경우 HTML과 함께 javascript도 다운로드한다. 이 과정 중에는 유저는 빈화면을 보게 된다, HTML만 다운로드하는 SSR와 비교하였을 때 javascript가 용량이 크기에 초기 로딩이 SSR보다 느리다.
2. SEO 관점에서 불리하다.
CSR은 javascript를 통해 동적으로 페이지를 구성한다. 그렇기 때문에 크롤러가 해당 페이지의 정보를 인식하기 쉽지 않다.
3. 유저와 상호작용이 유리하다.
CSR은 javascript를 가지고 클라이언트에서 렌더링은 한다. 그렇기 때문에 유저와 상호작용에 유리하다. 다른 페이지로 이동하거나 상호 작용이 진행되어도 클라이언트가 렌더링하기 때문에 불필요한 빈화면이 나오지 않고, 컴포넌트를 재사용한다. 그렇기에 상호 작용이 많은 페이지에서 유리하다. 더해서 정적 리소스가 아닌 API요청만 진행하기에 서버의 부하가 적다.
'web > webApplication' 카테고리의 다른 글
| Multiple Page Application(MPA) & Single Page Application(SPA) (0) | 2022.11.18 |
|---|