스프링
서버 렌더링
고양이오즈
2022. 6. 10. 14:30
서버 렌더링
- 통신하는 파일
- 정적 리소스
- 고정된 html 파일, css, js, 이미지, 영상 등을 제공함
- 요청이 들어오면 이미 생성되어있는 파일을 웹 브라우저에 제공
- html 페이지
- 동적으로 필요한 html 파일을 생성해서 전달(view 템플릿에서)
- 웹 브라우저는 html을 해석해서 보여줌
- http api
- html이 아니라 http 프로토콜 위에 데이터 얹어서 전달.
- 파일이나 html이 아닌 주로 json형식을 사용
- ui 화면이 필요하면 클라리언트가 별도로 처리함
- 앱/웹 클라이언트/웹 브라우저(자바스크립트를 통한 호출) to 서버
- 서버 to 서버(주문서버→결제 서버 등)
- 정적 리소스
- 렌더링
- 서버 사이드 렌더링 SSR
- HTML 최종 결과를 서버에서 동적으로 생성해서 클라이언트에 전달
- 웹 브라우저는 완전히 생성된 HTML을 보여줌.
- 주로 정적, 복잡하지 않은 화면에 사용(JPS, 타임리프이 여기 관련 기술)
- 백엔드 개발자들이 사용. 백엔드 개발자는 이 기술 학습이 필수임.
- 클라이언트 사이드 렌더링 CSR
- HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해 적용
- 주로 동적 화면에 사용. HTML을 클라이언트에서 생성하는 것
- 웹 환경을 앱처럼 필요한 부분 부분 변경 할 수 있음(구글 지도, GMIAL 등)
- 리엑트, 뷰 등이 관련 기술
- 프론트 엔드 개발자들이 사용.
<동작방식> 1. 웹 브라우저가 HTML 요청하면 서버가 내용없는 HTML과 애플리케이션 구동 자바스크립트 링크를 내려줌 2. 웹 브라우저가 링크를 보고 클라이언트 로직과 HTML 렌더링 코드가 들어있는 자바스크립트를 요청해서 받음 3. 웹 브라우저가 HTTP API 데이터를 요청해서 받고, 2에서 받은 HTML렌더링 코드에 섞어서 동적으로 HTML을 생성 후 브라우저에 보여줌
- 동시 진행
- CSR과 SSR을 동시에 제공하는 웹 프레임워크도 있음
- SSR을 사용하더라도 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능
- 서버 사이드 렌더링 SSR