D'story

SSR(Server Side Rendering)

클라이언트가 데이터를 요청하면 브라우저 > 프론트 서버 > 백 서버 > 데이터베이스를 거쳐서 데이터베이스에서 데이터를 가져온 후 브라우저에 그려지는 방식.

서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하므로, 불필요한 부분까지 모두 다시 렌더링해야 한다는 단점을 가진다.

CSR(Client Side Rendering)

데이터를 제외한 화면을 그리는 코드들은 프론트 서버에, 데이터는 따로 백 서버에 요청하여 받아오는 방식.

서버 부하가 덜하다는 장점이 있는 반면, 번들된 JS 파일의 다운로드로 인해 초기 로딩이 길고 SSR에 비해 SEO에 약하다는 단점이 있다.

Next.js

첫 페이지는 SSR 방식으로 백 서버에서 렌더링해서 데이터가 채워진 html을 받아오고, 그 다음 페이지부터는 CSR 방식으로 필요한 데이터 부분만 갱신하는 방식.

여담

• 예전에 프로젝트 할 때 한번 찾아본 내용이었는데, 오늘 본 면접에서 잠깐 언급된 김에 다시 정리해보았다.

참고

1. HTML 마크업을 처리하고 DOM(Document Object Model) 트리 빌드

브라우저가 HTML의 원시 바이트를 디스크나 네트워크에서 읽어 와서, 해당 파일에 대해 지정된 인코딩(예: UTF-8)에 따라 개별 문자로 변환한다.

이 문자열을 다시, W3C HTML 표준에 지정된, 특별한 의미와 고유한 규칙을 가진 토큰으로 변환한다.

토큰은 다시, 해당 속성 및 규칙을 정의하는 객체로 변환된다.

마지막으로, HTML 마크업이 여러 태그 간의 관계를 정의하고 있기 때문에, 생성된 객체들은 상하위 관계에 대한 정보를 포함하는 트리 구조로 연결된다.

2. CSS 마크업을 처리하고 CSSOM(CSS Object Model) 트리 빌드

CSS도 HTML 마크업과 마찬가지의 과정을 통해 CSSOM 트리로 빌드된다.

3. DOM 및 CSSOM을 결합하여 렌더링 트리 형성

DOM 트리의 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용하는 방식으로 DOM과 CSSOM 트리가 결합하여 렌더링 트리를 형성한다.

이 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다. 예를 들어, display: none이 적용된 노드는 아예 생략된다.

4. 레이아웃을 실행하여 각 노드의 기하학적 형태 계산

레이아웃 단계에서는 각 객체의 정확한 위치와 크기를 계산한다. 뷰포트 내에서 각 요소의 정확한 위치와 크기를 나타내는 '상자 모델(Box-model)'이 출력된다. 이 상자 모델에 대해서는 따로 정리할 예정이다.

5. 개별 노드를 화면에 페인트

마지막 페인팅 단계에서는 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하여 보여준다.

6. 1~5번의 반복

DOM 또는 CSSOM이 수정되는 경우, 화면에 다시 렌더링할 필요가 있는 픽셀을 파악하기 위해 위 과정을 반복한다.

렌더링 최적화는 이 과정에서 걸리는 시간을 최소화하는 프로세스를 의미한다.

참고