CSR VS SSR (장단점, 개념, 나만의 로직정리)

CSR(클라이언트 사이드 렌더링)

---

CSR은 모든 웹페이지의 리소스(HTML, CSS, JS)를 모두 렌더링 후, 클라이언트에서 HTML파일과 JS파일을 내려줄 것을 서버에 요청!

장점

• 페이지 이동시, 새로고침이 발생하지 않아 사용자가 앱을 사용하는 것처럼 빠르게 이용 가능하다!

단점

• 첫 페이지 로딩 속도가 SSR보다 느리다!
• 검색엔전최적화(SEO)에 대한 추가 보완 작업이 필요하다!

---

SSR(서버 사이드 렌더링)

---

SSR은 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로, 홈페이지를 들어갔을 때 직면하는 웹페이지의 리소스(HTML, CSSM JS)를 렌더링 후 보여준다! 

장점

• 첫 페이지 로딩 속도가 CSR에 비해 빠르다!
• 검색엔진최적화(SEO)가 가능하다!

단점

• 초기 로딩 이후 페이지 이동시 속도가 다소 느리다! (페이지 이동시마다 클라이언트가 서버에 데이터를 요청하고 응답을 받아야 하기 때문!)

---

나만의 로직(비유가 많이 섞임)

성찬이는 생일파티(홈페이지)를 준비중이다

 

생일파티는 SSAFY를 빌려 진행 할 예정인데, 1,2,3반을 전체 사용 할 예정!

 

[CSR]방식

성찬이는 친구들이 몰려와 기다리고 있지만, 1,2,3반을 전부 꾸민 뒤에 친구들을 들여보낸다

 

[SSR]방식

성찬이는 친구들이 기다리고 있을걸 고려해 1반먼저 꾸민 뒤 친구들을 들여보낸다. 친구중 2반과 3반을 가고싶은 사람이 생긴다면 그때 2반과 3반을 꾸며서 들여보내준다