모종닷컴

웹 렌더링 본문

Programming/웹 관련

웹 렌더링

모종 2019. 3. 3. 01:12
반응형

■용어


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의 양이 증가하게 되는것이다. 



반응형

'Programming > 웹 관련' 카테고리의 다른 글

스프링의 요청에서 응답까지  (0) 2019.03.06
브라우저 아키텍처 그리고 html 파싱  (1) 2019.03.02