JavaScript - SSR / CSR

1. SSR (Server-Side Rendering)

SSR(Server-Side Rendering)은 쉽게말해 화면을 구성하는 일련의 과정을 서버에서 처리하여 클라이언트(브라우저)로 전달하는 방식을 말한다

1-1. Server-Side Rendering의 단계

1. User가 WebSite요청을 보냄
2. Server는 즉시 렌더링 가능한 html파일을 만든다 - Ready to Render
   • 리소스 체크, 커파일 후 완성 된 HTML 컨텐츠로 만든다
3. 클라이언트에 전달되는 순간 준비가 되어있기때문에 HTML은 즉시 렌더링 된다
   • 사이트 자체 조작은 불가능 (JavaScript가 읽히기 전)
4. 클라이언트가 JavaScript를 다운받는다
5. 다운이 되고 있는 사이에는 조작이 불가능하다. 단 사용자 조작을 기억을 하고 있다
6. 클라이언트(브라우저)가 JavaScript 프레임워크를 실행한다
7. 5번에 기억하고 있던 사용자 조작이 실행되고 웹페이지 상호작용이 가능

1-2. Server-Side Rendering의 장점

• 서버에서 HTML, CSS등 리소스를 처리하기 때문에 초기 렌더링 속도가 빠르다
• 렌더 가능한 상태로 클라이언트에 전달되기 때문에 사용자는 JavaScript가 다운 되는 동안 무언가를 보고 있을 수 있다 >> HTML, CSS이 적용되어 있는 웹페이지 등..
• 서버에서 이미 컴파일 되어 클라이언트로 전달되기 때문에 SEO(Search Engine Otimization)에 용이하다

1-3. Server-Side Rendering의 단점

• 페이지 이동이 있을 때 첫 페이지를 처리했던 로딩과정을 반복하여 느림 (새로고침 현상)
• 페이지 이동이 있을 때 마다 리소스(HTML, JS, CSS등)를 요청하여 서버 트래픽 증가

2. CSR (Client-Side Rendering)

CSR(Client-Side Rendering)은 SSR과 달리 렌더링이 클라이언트 쪽에서 발생한다. 서버는 요청을 받으면 클라이언트에 HTML과 JavaScript를 보내준다. 클라이언트는 서버에서 전달받은 HTML과 JavaScript를 렌더링한다

2-1. Client-Side Rendering의 단계

1. User가 WebSite요청을 보냄
2. CDN이 HTML파일과 JavaScript로 접근할 수 있는 링크를 클라이언트로 보내줌
   • CND : AWS의 CloudFlare와 같이 유저 요청에 물리적으로 가까운 서버에 요청을 응당하는 방식
3. 클라이언트는 2번에서 전달받은 HTML과 JavaScript를 다운로드 받음
   • 이때 SSR과 달리 HTML과 JavaScript를 클라이언트에서 처리하기때문에 빈 화면이 나타남
4. 다운이 완료된 JavaScript가 실행되고 데이터를 위한 API가 호출됨
   • 유저는 placeholder를 보게 됨
5. 서버가 API로부터 요청에 응답
6. API로부터 받아온 데이터를 placeholder자리에 넣어주고 상호작용이 가능

2-2. Client-Side Rendering의 장점

• 초기 렌더링을 할 때 모든 리소스를 다운받았기 때문에 페이지 이동시 속도가 빠르다
• 빠른 인터렉션을 구현할 수 있다 (서버에 View에 필요한 JSON형태의 데이터만 요청)
• View 렌더링을 클라이언트에게 담당시킴으로써 서버 트래픽이 감소
• 새로고침이 발생하지 않아 UX적인면에서 효과적

2-3. Client-Side Rendering의 단점

• 클라이언트에서 모든 리소스를 한번에 처리하기 때문에 초기 렌더링 속도가 느림
• JavaScript가 다운로드 되고 실행되기 전까지 사용자는 볼 수 있는것이 없다

출처

• https://proglish.tistory.com/216
• https://rimooworld.tistory.com/28