클라이언트 사이드 렌더링, 서버 사이드 렌더링

클라이언트 사이드 렌더링

클라이언트 사이드 랜더링(CSR) = Single Page Application(SPA)

---

최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션

 

장점

---

• 한 페이지를 전체를 불러오기 때문에 서버 사이드 렌더링보다 빠른 속도로 화면을 보여준다.
• 페이지를 불러온 뒤 필요한 부분만 reload 없이 데이터를 갱신할 수 있다.
• 자바스크립트로 HTML 문서에 렌더하기 때문에 트래픽이 감소된다.

 

단점

---

• 초기 구동속도가 느리다.
• 검색 엔진에 자바스크립트 엔진이 없다면 제대로 작동하지 않기 때문에 검색 엔진 최적화가 어렵다.

 

서버 사이드 렌더링

서버 사이드 렌더링(SSR)

---

페이지를 불러올 때 서버에서 HTML 을 받아와 화면에 보여주기 때문에, 페이지를 이동할 때마다 새로운 페이지를 요청한다.

 

장점

---

• 검색엔진 최적화(SEO) 가능
• 초기 화면 로딩이 빠르다.

 

단점

---

• 잦은 서버 렌더링으로 인한 부하
• 페이지를 불러올 때마다 모든 페이지를 리로딩한다. (리로딩하면서 화면 깜빡임)