브라우저 렌더링 및 동작의 과정, CSR과 SSR

브라우저 동작 과정

• 사용자 요청 처리 : 사용자가 웹에 접근 시 브라우저에서 해당 주소로 HTTP 요청을 전송
• 서버 응답 : 웹 서버에서는 받은 요청을 기반으로 적절한 응답을 반환(HTML, CSS, JS 등)
• 문서 파싱 및 처리 : HTML => DOM, CSS => CSSOM, 자바스크립트로 DOM 조작 등
• 렌더링 과정 : 렌더 트리 형성, Layout, Painting 과정
• 동적 상호작용 : CSR, SSR에 따라 클라이언트 - 서버가 상호작용
• 네트워크 통신과 최적화 : 브라우저의 리소스 효율적 로딩을 위해 캐싱, 압축 해제, 네트워크 최적화 등 추가적인 상호작용

브라우저 렌더링 과정

• DOM,CSSOM 생성 : 서버로부터 받은 HTML과 CSS 파일을 파싱하여 각각 DOM 트리와 CSSOM 트리를 생성
• Render Tree 생성 : DOM 트리와 CSSOM 트리를 결합하여 렌더 트리 형성, 렌더 트리는 실제 화면에 표시되는 요소들을 포함
• Layout 단계 : 렌더 트리를 기반으로 각 요소의 정확한 위치와 크기를 계산
• Paint 단계 : 계산된 위치와 크기에 따라 요소들을 화면에 그림

CSR(클라이언트 사이드 렌더링)

• 초기 요청 : 사용자가 웹 사이트에 접속하면 서버는 HTML의 뼈대만 담긴 페이지와 Javascript 파일들을 제공
• 브라우저에서 Javascript 실행 : 브라우저는 받은 HTML을 렌더링하고 Javascript를 실행, Javascript는 필요한 데이터를 서버로부터 비동기적으로 요청하고, 이 데이터를 사용해 페이지를 동적으로 구성
• DOM 조작 : JS가 DOM을 조작하여 사용자에게 보여지는 페이지를 업데이트함, 이후 사용자의 상호작용에 따라 추가적인 데이터를 요청하고 화면을 업데이트 할 수 있음
• 동적인 상호작용 : CSR은 페이지의 일부분만을 업데이트 할 수 있어 사용자 경험을 개선함, 하지만 초기 로딩 시 모든 스크립트와 데이터를 로드해야 하기 때문에 시작 시간이 길어질 수 있음

SSR(서버 사이드 렌더링)

• 초기 요청 : 사용자가 웹 사이트에 접속하면 서버는 완전한 HTML 페이지를 생성하여 응답
• HTML 페이지 렌더링 : 서버는 데이터베이스 조회, 페이지 구성 등 모든 렌더링 과정을 처리한 후 완성된 HTML 페이지를 사용자에게 전송
• 브라우저에서 HTML 표시 : 브라우저는 서버로부터 받은 완성된 HTML 페이지를 바로 렌더링함, 사용자가 빠르게 컨텐츠를 볼 수 있게 해줌
• Javascript 로드 및 실행 : 페이지의 상호작용이나 동적 기능을 위해 Js가 로드되고 실행됨, 이 과정에서 페이지는 일부 동적인 기능을 가질 수 있음
• 초기 로딩 성능 개선 : SSR은 사용자가 컨텐츠를 빠르게 볼 수 있도록 해주며, SEO(검색 엔진 최적화)에 유리함, 하지만 페이지의 모든 부분이 서버에서 미리 생성되어야 하기 때문에 서버 부하가 커질 수 있음

결론(비교)

특징	클라이언트 사이드 렌더링(CSR)	서버 사이드 렌더링(SSR)
초기 로딩 속도	느릴 수 있음(모든 자원 로드)	빠름(완성된 HTML 제공)
SEO 최적화	불리함(검색 엔진이 Javascript를 실행해야 함)	유리함(완성된 HTML 제공)
서버 부하	낮음(클라이언트에서 대부분 처리)	높을 수 있음(서버에서 렌더링)
사용자 상호 작용	빠른 상호작용 및 페이지 전환	초기 로딩 후 상호작용 가능
개발 복잡성	높음(프론트엔드 중심 개발)	상대적으로 낮음