SSR, SSG와 CSR이란?

저는 최근 이 단어를 자주 들었는데 뜻은 대충 알고 있었지만 장단점이나 차이점을 더 자세히 알고 싶어 이렇게 글을 쓰게 되었습니다

---

📌SSR(Server Sider Rendering)이란?

• 서버쪽에서 렌더링을 하여 화면을 보여주는 방식을 말합니다 
• 보통 MPA에서 SSR로 렌더링합니다
• 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면 로딩 속도가 빠릅니다
• 전통적인 웹은 대부분 SSR이었다고 합니다

SSR 동작 과정

장단점

• 장점
  • 첫페이지 로딩속도가 빠릅니다
  • 검색엔진 최적화가 가능합니다
• 단점
  • 서버가 과부하될 수 있습니다
  • 렌더링될 때마다 화면이 깜박입니다
  • 초기로딩 이후 페이지 이동 시 CSR보다 속도가 느립니다
  • TTV(Time To View, 사용자가 화면을 보는 시점)와 TTI(Time To Interact, 사용자가 특정 동작을 수행할 수 있는 시점)의 공백시간이 큽니다

---

📌SSG(Static Site Generation)이란?

• 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 파일을 단순히 반환하여 브라우저에서 뷰를 보여줍니다
• 서버가 그저 파일을 클라이언트에게 전달할 뿐 새롭게 재구현하지 않습니다
• Next.js의 기본 값은 SSG라고 합니다

장단점

• 장점
  • 페이지 로딩 속도가 빠릅니다
  • SEO에 유리합니다
  • 보안성이 좋습니다
  • 서버 리소스가 거의 필요 없고, 정적 파일을 배포하기만 하면 되므로 저비용으로 운영할 수 있습니다
• 단점
  • 사이트가 커지면 빌드 시간이 길어지며, 업데이트가 자주 필요할 경우 비효율적일 수 있습니다
  • 실시간 업데이트나 사용자 상호작용 기능이 제한적입니다
  • 실시간 데이터나 사용자 맞춤형 콘텐츠를 제공하는 것이 어렵습니다

---

📌CSR(Client Sider Rendering)이란?

• 클라이언트가 렌더링을 맡아서 하는 방식입니다
• 서버에서 받은 데이터를 클라이언트인 브라우저가 화면에 그립니다
• HTML 파싱(프로그램이 런타임 환경에서 실제로 실행될 수 있는 포맷으로 분석하고 변환하는 것)부터 JS 읽기까지 브라우저에서 하기때문에 처음에 화면을 띄우는 데 시간이 좀 걸립니다
• 보통 SPA에서 CSR로 렌더링합니다

CSR 동작 과정

장단점

• 장점
  • 동적인 웹페이지 구현에 좋습니다
  • 클라이언트 개발 수준을 한 단계 끌어올릴 수 있습니다
  • 중복되는 내용은 고정으로 두고 안에 컨텐츠만 업데이트해 로드할 수 있습니다
• 단점
  • SEO에 취약합니다
  • 첫 로딩 속도가 더딥니다

 

---

📌SSG와 SSR의 차이점

• 서버에서 요청할 때 즉시만드느냐 혹은 미리 만들어 놓느냐에 따라 차이가 있습니다
• SSR은 요청시 서버에서 즉시 HTML을 만들어서 응답하기 때문에 데이터가 달라져서 미리 만들어 두기 어려운 페이지에 적합합니다
• SSG 미리 다 만들어두고 요청시에 해당 페이지를 응답하기 때문에 바뀔일이 거의없어서 캐싱해두면 좋은 페이지에 사용합니다

 

---

📌CSR과 SSR의 차이점

• 웹페이지 로딩 시간에 차이가 있습니다
• SEO에 차이가 있습니다
• 서버자원 사용 정도의 차이가 있습니다

---

글을 마치며

요약

SSR을 사용하면 좋을 때: 
첫페이지 로딩이 빠르게 되야하거나 검색엔진 노출이 중요할 때, MPA일 떼

CSR을 사용하면 좋을 때:
웹이 매우 동적일 때, SPA일 때

SSG을 사용하면 좋을 때:
로딩 속도가 빠른 웹을 원할 때나 검색엔진 노출이 중요할 때, 서버 부하가 낮아야 할 때

이렇게 여러 렌더링 방법의 장단점을 알아보았습니다 각자 다른 장단점을 가지고 있으니 상황에 맞는 방법을 잘 선택하셨으면 좋겠습니다