브라우저 구성요소

브라우저 구성요소

사용자 인터페이스 : 주소표시줄, 이전/ 다음 버튼, 홈버튼, 새로고침/정지 버튼 등 요청 한 페이지를 보여주는 창 외에 사용자가 컨트롤 할수 있는 부분
브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어한다. (서버로부터 가면 네트워트통신 낭비)
자료저장소에 캐싱기법을 사용한다.
렌더링 엔진: URI 를 브라우저 엔진에게 받아서 server에게 요청한다. 서버로부터 받은 URI에 해당하는 데이터를 받아 파후 렌더링 한다
통신: 렌더링 엔진으로부터 HTTP 요청등을 받아서 네트워크 처리후 응답을 전달한다.
자바스크립트 해석기: 자바 스크립트를 파싱한다 (크롬 v8)
자료저장소:
UI백엔드 : 랜더 트리를 브라우저에 그리는 역할을 담당한다.

CSR(client Side Redering)

렌더링 주체가 클라이언트
클라이언트 (브라우저)

• 장점
  한 번만 로딩되면 빠른 UX제공
  서버 부하적다

• 단점
  페이지 로딩 시간 길다.
  자바스크립트 활성화 필수
  SEO최적화 힘듦.
  보안에 취약

SSG(Static Site Generation)

렌더링하는 주체자가 서버
빌드할때 렌더링

• 장점
  페이지 로딩시간 빠름
  자바스크립트 필요없음
  SEO 최적화에 좋음
  보안이 뛰어남
  CDN에 캐시가 됨

• 단점
  데이터가 정적임
  사용자별 정보제공 어려움

SSR(Server Side Redering)

렌더링 주체가 서버
요청시 렌더링 됨

• 장점
  초기 진입 시 빠름
  SEO 향상

• 단점
  화면 깜빡임 현상

NEXT.js에서 하이브리드에서 사용할 수 있음.