원글 페이지 : 바로가기
페이지의 랜더링 방식 CSR , SSR, SSG에 대해 정리해보려고 합니다 ◼ CSR Client-side Rendering의 약자입니다. 단어를 보면 Client단어가 눈에 띄는데요. 단어에 명시되어 있는 것처럼 서버가 아닌 클라이언트에서 랜더링 하는 방식을 이야기합니다. 그렇다고 모든 것을 클라이언트 측에서 해주는 것은 아닙니다. 다만 서버 보다 더 많은 비중으로 클라이언트에서 랜더링 작업을 해주는 것이죠. 이미지에서 좀 더 설명을 붙이자면, 그러나 한 번 웹 페이지에 접속하여 데이터를 받아오면, 해당 데이터는 브라우저의 캐시에 저장됩니다. 따라서 사용자가 이미 방문했던 페이지에 다시 접속할 때는 새로운 데이터를 다운로드할 필요 없이, 캐시에 저장된 데이터를 바로 불러와서 표시할 수 있습니다. 이는 페이지 로딩 속도를 크게 개선시킵니다. 또한, 클라이언트 사이드 렌더링(CSR)은 부분 랜더링이 가능하기 때문에, 사용자가 다른 페이지로 이동하거나 특정 데이터를 요청할 때 전체 페이지를 새로고침하지 않고도 필요한 영역만을 업데이트할 수 있습니다. 이는 전체 페이지 로드에 비해 훨씬 빠른 속도로 변경된 내용을 사용자에게 제공할 수 있게 합니다. 이러한 특성들로 인해, CSR은 초기 로딩 시간은 길지만, 이후의 페이지 전환 속도나 데이터 업데이트 속도는 매우 빠르다는 장점을 갖고 있습니다. 단점을 말하자면, 위에 설명에서 말한 것처럼 첫 다운로드 받아야하는 데이터가 많은 시에는 로딩 속도가 느리다. 또한, 최소한의 html를 가지고 오기에 SEO에 취약하다는 점입니다. 검색봇이 볼 수 있는 정보가 없기 때문에 어떤 사이트인지 어떻게 분류를 해야지는를 알 수가 없습니다. // 최소한의 html
◼ SSR Server-side Rendering이라고 하며, 여기도 이름에 보이듯 서버에서 랜더링을 해주는 방식이다. 여기 또한 비중이 서버가 많은 차지하고 있습니다. MPA(multi page application)로 예전에 우리가 이동을 할 때 깜빡임이 생기던 때의 랜더링 방식입니다. 이미지에서 좀 더 설명을 붙이자면, 첫 로딩 때, 서버에서 완성된 html, css을 클라이언트에서 보여주는 방식이기에 빠르게 화면에 노출이 가능합니다. 그렇기 때문에 CSR과 반대로 모든 게 작성된 HTML을 검색봇이 페이지의 크롤링을 하면서 콘텐츠의 색인을 생성하기에 SEO관점에서도 좋은 장점입니다. 단점으로는, 서버에서 랜더링이 일어나기 때문에, 페이지 이동 시에 저장되는 것 없이 계속 새로 다운로드를 하여 새로 그려야 하기에 깜빡임 현상과, 서버의 부하가 있을 수 있습니다. 방금 전에 봤던 페이지로 되돌다 가도 새로 서버에서 데이터를 불러와야 새로 페이지를 랜더링 합니다. 그렇게 계속 새로 가지고 올 때, HTML, CSS 빠르게 보이다 보니 TTV와 TTI의 시간의 차이가 크게 나는 것 또한 문제입니다. TTV 이 지표는 사용자가 웹 페이지에 접속했을 때, 첫 번째 콘텐츠 또는 중요 콘텐츠가 화면에 보이기까지 걸리는 시간을 의미합니다. 이는 사이트의 초기 로딩 성능을 나타내며, 사용자가 페이지에 도착하고 얼마나 빨리 주요 정보를 볼 수 있는지를 나타냅니다. TTI 지표는 페이지가 완전히 로드되고, 사용자의 입력에 신속하게 반응할 수 있는 상태가 되기까지의 시간을 측정합니다. 즉, 페이지의 모든 요소가 로드되고, 사용자가 클릭하거나 스크롤하는 등의 상호작용을 할 수 있게 되는 시점입니다. TTI는 사용자가 페이지와 얼마나 원활하게 상호작용할 수 있는지를 나타내는 중요한 성능 지표입니다. ◼ SSG Static Site Generation 약자로, 개발자가 서버에 배포할때 미리 HTML,CSS,JS가 다~ 적용된 페이지를 서버에 같이 배포하여, 클라이언트가 요청시 미리 만들어둔 페이지를 전달하여, CSR의 빈HTML을 보안하고, SSR의 랜더링 시간을 줄이기에 좋은 방식입니다. 단. SSG는 개발단계에서 미리 만들어 놓은 페이지이기 때문에, 데이터의 변경이 일어 나지 않습니다. 데이터 변경을 하고 싶으면, 배포전에 빌드를 하거나, ISR 방식으로 SSG를 일정 시간마다 재생성 되도록 할수 있습니다. [참고] https://www.youtube.com/watch?v=YuqB8D6eCKE https://velog.io/@bokdol11859/%EB%8C%80%EB%B6%80%EB%B6%84%EC%9D%B4-%EB%AA%A8%EB%A5%B4%EB%8A%94-Next%EC%97%90%EC%84%9C-SSG%EA%B0%80-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94-%EB%B0%A9%EC%8B%9D-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81%EC%9D%84-%ED%86%B5%ED%95%B4-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0-2%ED%8E%B8#static-site-generation https://voyage-dev.tistory.com/38