반응형
Web 프로젝트를 진행하는데 SSR과 CSR에 대해 처음 알게 되어서 정리해 보았습니다. 우선 SSR과 CSR은 클라이언트와 서버에서 HTML 페이지를 전송하는 것에 차의가 있습니다.
1. SSR
1. SSR이란?
Sercer Side Gendering의 약자입니다.
HTML 최종 결과를 서버에서 만들어서 클라이언트의 웹 브라우저로 전달합니다.
| 사용 | 정적인 화면 |
| 장점 | 초기 렌더링 속도 빠름, 검색엔진 최적화(SEO) 사용 가능 ▶ 블로그나 뉴스 등 콘텐츠의 가독성과 빠른 로딩속도가 중요한 웹사이트에 적합. |
| 단점 | 데이터 수정 시 서버를 거쳐야 함, 연속적인 렌더링 수행 시 서버 과부화 올 수 있음 ▶ 라디오 버튼 하나를 눌러도 서버에서 수행작업을 거침 |
| 관련기술 | Node.js, JSP, 타임리프 |
※ 검색 엔진 최적화(SEO)는 크롤러가 콘텐츠를 수집하여 사이트의 검색순위를 높여준다.
2. SSR 진행순서
- 클라이언트 HTML 요청
- 서버에서 DB 조회 > JSP 또는 Thymeleaf을 이용해 HTML 생성
- 클라이언트에 전달
2. CSR
1. CSR이란?
Client Side Rendering의 약자로 HTML 결과를 JavaScript를 사용해 웹 브라우저에서 생성하여 적용한다.
| 사용 | 동적인 화면 |
| 장점 | 서버와 클라이언트가 주고받는 데이터의 양이 줄어 트래픽이 현저히 감소함, 연속적인 렌더링 시의 과부화 감소 페이지의 새로고침 없이 콘텐츠를 업데이트하거나 변경이 가능하기 때문에 사용자의 경험(UX)을 중요시 할 경우 부드러운 작동이 가능 |
| 단점 | 검색엔진 최적화(SEO) 불가능, 렌더링을 위한 작업이 많아짐(유지보수에 필요한 작업 많음) |
| 관련기술 | React, Angular, Vue.js |
1. CSR 진행순서
- 클라이언트의 웹 브라우저에서 HTML 요청 > 서버는 텅 빈 HTML과 JavaScrirp 링크 전송
- 웹 브라우저는 JavaScript 요청 > 서버가 JavaScript 안에 클라이언트의 로직과 HTML 랜더링 코드 전송
- 웹 브라우저는 HTTP API로 서버를 호출 > 서버는 DB 조회 > 웹브라우저에 JSON형식으로 전송
- 웹브라우저는 JavaScript 코드 JSON 데이터를 섞어서 동적으로 HTML을 생성
3. HTTP API
데이터 자체를 전송 HTML뿐 아니라 단순한 데이터를 가지고 통신이 가능합니다.
JSON이나 XML형식으로 데이터를 WAS에 전달하고 이 데이터를 DB에서 조회/가공하여 응답합니다.
반응형