우리는 앱에서 로직을 실행하고 렌더링하는 것을 어디서 해야할까? 서버 사이드 렌더링을 사용해야할까? Rehydration은 어떤가? 답을 찾아보자!

개발자로서, 우리는 자주 우리의 앱의 전체 구조에 영향을 끼칠만한 결정과 마주하게 된다. 웹 개발자들이 해야하는 주요한 결정 중에 하나는 앱에서 로직을 실행하고 렌더링하는 곳을 정하는 것이다. 웹사이트를 만들기에 수많은 방법이 있기에 어려운 결정일 수 있다.

이 공간에 대한 이해는 지난 몇 년간 큰 장소에서 여러 차례 얘기한 크롬에서의 우리의 작업으로 알려졌다. 넓게 말하면, 우리는 서버 렌더링 또는 정적 렌더링을 고려하도록 개발자들을 격려할 것이다.

결정을 내릴 때 선택하는 구조에 대해 더 잘 이해하기 위해, 우리는 각각의 접근 방법과 일관된 용어에 대한 견고한 이해가 필요하다. 이러한 접근 방법의 차이는 웹 렌더링의 퍼포먼스 관점에서의 트레이드오프를 설명하는 데 도움을 준다. 스크린샷 2022-07-24 오후 11.38.24

용어

렌더링

• SSR: Server-Side Rendering - 서버에서 클라이언트 사이드나 universal app(어떠한 모바일 디바이스 운영체제에서도 실행되는 앱)을 HTML로 렌더링
• CSR: Client-Side Rendering - 일반적으로 DOM을 사용하며 앱을 브라우저에서 렌더링
• Rehydration: 서버에서 렌더링된 HTML의 DOM 트리와 데이터를 재사용하는 클라이언트에서 자바스크립트 뷰를 시동함
• Prerendering: 초기 상태를 정적 HTML로 남기기 위해 클라이언트 사이드 앱을 빌드할 때 실행하는 것

퍼포먼스

• TTFB: Time To First Byte - 링크를 클릭하고 첫번째 비트의 컨텐트가 들어올 때까지의 시간
• FP: First Paint - 어떠한 픽셀이 처음으로 사용자에게 보여지기까지 걸리는 시간
• FCP: First Contentful Paint - 요청된 내용(기사 본문 등)이 처음으로 보여지기까지의 시간
• TTI: Time To Interactive - 페이지가 처음으로 인터렉티브해지기까지의 시간

서버 렌더링

서버 렌더링은 navigation에 대한 응답으로 서버에서 페이지에 필요한 전체 HTML을 생성한다. 브라우저가 응답을 받기 전에 처리되기 때문에, 데이터를 불러오고 클라이언트에서의 템플릿 생성을 위한 추가적인 round-trip을 피하게 된다.

서버 렌더링은 일반적으로 빠른 First Paint(FP) 와 First Contentful Paint(FCP) 를 생선한다. 서버에서 페이지 로직을 실행하고 렌더링하는 것은 클라이언트에 많은 자바스크립트를 전송하지 않아도 되도록 하고, 이는 빠른 Time to Interactive (TTI) 를 가능하게 한다. 서버 렌더링으로 사용자의 브라우저에 텍스트와 링크만을 보내게 되기 때문에 이것이 가능해진다. 이 접근 방법은 넓은 범위의 디바이스와 네트워크 컨디션에도 잘 동작하고, streaming document parsing과 같은 흥미로운 브라우저 최적화도 가능하게 한다.

서버 렌더링으로, 사용자는 사이트를 사용할 수 있게 되기 전에 CPU-bound 자바스크립트를 기다리지 않아도 된다. third-party JS 가 불가피하더라도, first-party JS costs 를 줄이기 위해 서버 렌더링을 사용하는 것은 더 많은 budget 을 가져다준다. 하지만, 이 접근 방법에는 주요한 결점이 있다: 서버에서 페이지를 생성하는 것은 시간이 꽤 걸리고, 더 느린 Time to First Byte (TTFB) 를 초래하게 된다.

서버 렌더링이 앱에 충분한지의 여부는 어떤 타입의 경험을 만드는지에 달렸다. 서버 렌더링과 클라이언트 사이드 렌더링에 맞는 앱에 대한 오랜 논쟁이 있어왔지만, 어떤 페이지에는 서버 렌더링을 사용하고 다른 것에는 사용하지 않을 수 있다는 것을 기억하는 게 중요하다. 어떤 사이트들은 하이브리드 렌더링 기술이 성공적으로 적용되어 있다. 넷플릭스 는 상대적으로 정적인 랜딩 페이지를 서버 렌더링하고, 인터렉션이 많은 페이지를 미리 로드하며 , 무거운 클라이언트 렌더링된 페이지가 더 빨리 로드될 수 있도록 한다.

많은 모던 프레임워크, 라이브러리와 아키텍처는 같은 앱이 클라이언트와 서버 모두에서 렌더되도록 한다. 이러한 기술은 서버 렌더링으로 사용될 수 있지만, 서버와 클라이언트 모두에서 렌더링이 발생하는 아키텍처는 매우 다른 퍼포먼스 특징과 트레이드오프를 가진 해결책이라는 점에 주목하는 것이 중요하다. React 사용자들은 서버 렌더링을 위해 renderToString() 또는 그 위에 만들어진 Next.js 같은 솔루션을 이용할 수 있다. Vue 사용자들은 Vue의 서버 렌더링 가이드 또는 Nuxt 를 볼 수 있다. Angular에는 Universal 이 있다. 하지만 대부분의 인기 있는 솔루션은 일부 hydration의 형태를 사용하기 때문에, 도구를 선택하기 전에 접근 방법에 대해 잘 알아봐야한다.

출처 : Rendering on the Web