웹 렌더링

■용어

Rendering 

• SSR : Server Side Rendering - 서버 측에서 HTML로 렌더링하여 준 자원을 브라우저가 표시
• CSR : Client Side Rendering - 일반적으로 DOM을 사용하여 브라우저에서 렌더링을 한다.

Performance 

• TTFB : Time to First Byte - 링크를 클릭 후에서부터 첫 번째 바이트를 받기까지의 시간
• FP : First Paint - 픽셀이 처음으로 사용자에게 표시되는 시간
• FCP : First Contentful Paint - 요청한 컨텐츠가 보이게 되는 시간
• TTI : Time To Interactive- 페이지가 대화형으로 전환되는 시간
  
  

■ SSR(Server Side Rendering)

서버사이드 렌더링은 서버 측에서 리소스 + HTML을 내려주는 것이다. 이렇게 하면 브라우저에서 응답을 받기 전에 처리되므로 클라이언트에서 데이터 가져오기 및 템플리트 작성에 대한 추가 왕복이 발생하지 않습니다.

서버에서 페이지 로직 및 렌더링을 실행하면 많은 Javascript를 클라이언트에 보내지 않아도되므로 TTI를 빠르게 수행할 수 있습니다. 단 서버 사이드 렌더링을 사용하면 서버에서 렌더링하는 시간이 걸리므로 TTFB가 느려질 수 있습니다. 

■ Static Rendering 

서버사이드 렌더링이 사용자의 요청을 받았을 때 즉석에서 HTML을 생성해낼 때, 정적 렌더링은 각각의 요청에 대한 렌더링을 CDN에 배포함으로 에지 캐싱을 활용한다. 하지만 단점이 있는데 이는 가능한 모든 URL에 대해 개별 HTML 파일을 생성해야 한다는 것이다. 

■ CSR(Client Side Rendering)

클라이언트 사이드 렌더링은 Javascript를 이용하여 브라우저에서 페이지를 직접 렌더링하는 것입니다. 모든 로직, 데이터 가져오기, 템플릿 및 라우팅은 서버가 아닌 클라이언트에서 처리합니다.

CSR의 단점으로는 응용프로그램이 커질수록 Javascript의 양이 증가하게 되는것이다.