SSR의 dom트리 생성 위치

Question

안녕하세요. 브라우저 렌더링에 관해 공부를 하다 궁금한 점이 생겨 질문을 립니다! 브라우저 렌더링의 순서가 다음과 같은 것으로 알고 있습니다:HTML파싱 및 DOM생성CSS파싱 CSSOM 생성렌더트리 생성레이아웃 만들기페인팅 이 과정에서 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)의 차이점이 궁금합니다. CSR의 경우, 브라우저는 HTML 뼈대와 자바스크립트 파일을 받아서 브라우저 렌더링의 첫 번째 단계부터 실행합니다. 이 과정에서 자바스크립트를 읽어야 하기 때문에 초기 로딩 시간이 길어집니다. SSR의 경우, 서버에서 완성된 HTML 파일을 보내주고 브라우저는 위의 렌더링 순서에 따라 처리합니다. 여기서 궁금한 점이 있습니다: SSR은 서버에서 DOM까지 생성해서 보내주는 것인가요? 위의 질문이 아니라면 브라우저 렌더링의 1~5단계는 전부 브라우저에서 이뤄지는 것인데, SSR이 완성된 HTML파일을 보내주긴 하지만 HTML파일 안에 자바스크립트 코드가 있으면 해당 코드를 포함해서 렌더링이 이루어져야 하기 때문에 SSR과 CSR의 차이점은 한 번에 하나의 페이지를 렌더링 하느냐, 전체를 한 번에 렌더링 하느냐의 차이밖에 없는 것인가요?

[object Object] · Answer

next의 예를 들면 서버에서 실행되는 자바스크립트 코드는 서버에서만 실행되고 html로 만든 다음에 보내줍니다. 하이드레이션 검색해보면 공부가 더 될 것 같네요

더미 · Answer

dom은 브라우저에서 렌더링하는겁니다.1-5단계 전부 브라우저에서 이뤄집니다.

RWB · Answer

SSR과 CSR의 개념SSR과 CSR은 렌더링 주체가 서버냐, 브라우저냐에 따라 갈립니다.SSR 렌더링이라고 해서 CSR 요소가 아예 안 들어가는 건 아니고, 페이지에 일부 컴포넌트는 SSR로, 일부 컴포넌트는 CSR로 표현하는 식입니다.SSRNext.js (React 프레임워크)Nuxt.js (Vue 프레임워크)JSPCSRcreate-react-app (기본 React)순수 HTML, JS, CSS각 렌더링 기법에서 흔히 사용하는 언어 및 도구입니다.렌더링 순서?렌더링 플로우의 구조 상 반드시 서버가 1순위입니다.서버에서 필요한 DOM(혹은 HTML) 및 CSS, JS와 같은 에셋을 생성합니다. 생성한 에셋은 서버 입장에서 그냥 텍스트 뭉치일 뿐이며, 서버 상에서 동작하지 않습니다.SSR 사용하시면서 가장 많이 하는 실수가, 각 영역에서 서로 다른 영역의 코드를 수행하는 것입니다.(이 점은 서버와 브라우저 스크립트 언어가 동일한 React에서 특히 많이 발생함)서버에서는 DOM을 선언만 할 수 있을 뿐, 특정 DOM을 호출한다던가(document.getElementById), 이벤트를 붙인다던가(addEventListener)와 같은 동작이 불가능합니다.서버한테 DOM은 DOM 모양을 한 텍스쳐일 뿐이거든요.반대로 브라우저에선 서버에 종속된 코드(JSP의 JAVA 언어 등)를 수행할 수 없습니다.서버에서 필요한 에셋을 받아 표현해주게 됩니다. 이 때 서버에서 이미 세팅된 값들은, 사용자에게 즉시 보여지게 됩니다.그 후 과정은 말씀하신 순서와 비슷하게 전개됩니다.HTML파싱 및 DOM생성CSS파싱 CSSOM 생성렌더트리 생성레이아웃 만들기페인팅이 과정에서 서버에서 받은 초기 디자인과 CSR 후의 디자인이 상이하다면, 사용자는 깜빡임 등의 현상을 관측하게 됩니다. 이 현상을 FOUC라 하며, 프론트 개발자가 반드시 경계해야할 녀석입니다.여기서 궁금한 점이 있습니다: SSR은 서버에서 DOM까지 생성해서 보내주는 것인가요?위 내용을 토대로 주신 질문을 보면, 맞는 문장입니다만, DOM 뿐만 아니라 페이지 렌더링에 필요한 모든 에셋을 생성해서 보내준다는게 더욱 적절합니다.페이지 렌더링에 필요한 에셋의 총량에서, 서버가 얼마나 많은 비중을 차지하냐에 따라 렌더링 속도가 달라집니다.(서버가 월등히 성능이 뛰어납니다.)SSR이 짱짱맨인가?SSR과 CSR을 다루면서, 간혹 SSR이 우세하니 모든 렌더링은 SSR로 반드시 해야한다! 라는 오류에 매몰되기도 합니다.SSR이 성능적으로 우세한 건 사실이지만, CSR 또한 브라우저 API(Observer, Navigation, Local Storage 등)에 접근할 수 있으므로, 양단이 있는, 일종의 상호보완 역할을 합니다.단순한 텍스트 위주의 정보성 페이지라면, 전체를 SSR로 표현할 수도 있지만, DOM 이벤트가 필요하다면, CSR 요소가 없어서는 안됩니다.SSR과 CSR의 역할과 용도를 파악하고 적재적소에 활용하시면, UI/UX적으로 더욱 최적화된 서비스를 구현할 수 있습니다.

하얀뼈 · Answer

똑같은 렌더라는 단어지만,프론트엔드 입장에서는 렌더는 두가지 의미로 봐야하지 않을까요.1.html string을 만드는 과정(SSR, CSR)2.html string을 파싱해서 실제 화면에 paint 하는 과정2번은 무조건 브라우저에서 일어나고,1번을 어디서 하느냐의 차이입니다.(CSR, SSR)

SSR의 dom트리 생성 위치

4개의 답변

Q&A 목록