스프링

서버 렌더링

고양이오즈 2022. 6. 10. 14:30

서버 렌더링

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