웹 렌더링

렌더링(Rendering)이란?
어떠한 웹 페이지 접속시, 그 페이지를 화면에 그려주는 것.

• SSR : Server-Side Rendering (서버 측 렌더링) - 클라이언트 측 또는 유니버설 앱을 서버의 HTML로 렌더링합니다.

• CSR : Client-Side Rendering (클라이언트 측 렌더링) - 브라우저에서 애플리케이션을 렌더링합니다. 일반적으로 DOM을 사용합니다.

서버 사이드 렌더링

서버 렌더링
서버 렌더링은 탐색에 대한 응답으로 서버의 페이지에 대한 전체 HTML을 생성합니다. 이렇게 하면 브라우저에서 응답을 받기 전에 처리되므로 클라이언트에서 데이터 가져 오기 및 템플릿 작성에 대한 추가 왕복이 발생하지 않습니다.

서버 렌더링은 일반적으로 빠른 First Paint (FP) 및 First Contentful Paint (FCP)를 생성합니다. 서버에서 페이지 로직 및 렌더링을 실행하면 많은 JavaScript를 클라이언트에 보내지 않아도 되므로 TTI (Time to Interactive) 를 빠르게 수행 할 수 있습니다. 이것은 서버 렌더링을 통해 실제로 사용자의 브라우저에 텍스트와 링크를 보내는 것이기 때문에 의미가 있습니다. 이 접근법은 다양한 범위의 장치 및 네트워크 조건에서 잘 동작하며 스트리밍 문서 구문 분석과 같은 흥미로운 브라우저 최적화를 가능성을 열어줍니다.

Diagram showing server rendering and JS execution affecting FCP and TTI
서버 렌더링을 사용하면 사용자는 사이트를 사용하기 전에 CPU 바인딩 JavaScript가 처리되기를 기다리지 않아도 됩니다. 서드파티 JS를 부득이하게 사용해야 할 경우에도 서버 렌더링을 사용하여 자사의 JS 비용을 줄이면 나머지 "여유"을 더 많이 확보 할 수 있습니다. 그러나 이 방법에는 서버에서 페이지를 생성하는 데 시간이 걸리는 단점이 있습니다. 그 결과 TTFB(Time to First Byte) 가 느려질 수 있습니다.

애플리케이션이 서버 렌더링만으로 충분한 지는 크게 어떤 유형의 환경을 구축 하느냐에 달려 있습니다. 서버 렌더링과 클라이언트 측 렌더링의 올바른 애플리케이션에 대한 오랜 논쟁이 있지만 일부 페이지에서는 서버 렌더링을 사용하고 다른 페이지에서는 사용하지 않아도 됨을 기억하는 것이 중요합니다. 일부 사이트에서는 하이브리드 렌더링 기술을 사용하여 성공을 거두었습니다. Netflix 서버는 상대적으로 정적인 랜딩 페이지를 렌더링하는 반면 상호 작용이 많은 페이지는 JS를 프리 페치하여 클라이언트가 렌더링 한 무거운 페이지를 더 빠르게 로드하도록 합니다.

많은 현대 프레임워크, 라이브러리 및 아키텍처를 사용하면 클라이언트와 서버 모두에서 동일한 응용 프로그램을 렌더링 할 수 있습니다. 이러한 기술은 서버 렌더링에 사용할 수 있지만 서버와 클라이언트 모두에서 렌더링이 이루어지는 아키텍처는 매우 다른 성능 특성과 절충점을 가진 자체 솔루션 클래스라는 점에 유의해야합니다. React 사용자는 renderToString() 이나 서버 렌더링을 위한 Next.js 와 같은 솔루션을 사용할 수 있습니다. Vue 사용자는 Vue의 서버 렌더링 가이드 나 Nuxt를 고려해 볼 수 있습니다. Angular에는 유니버설이 있습니다. 대부분의 널리 사용되는 솔루션은 어떤 형태로든 hydration을 사용하기 때문에 도구를 선택하기 전에 사용법을 알아야 합니다.

클라이언트 사이드 렌더링

클라이언트 측 렌더링 (CSR)은 JavaScript를 사용하여 브라우저에서 페이지를 직접 렌더링하는 것을 의미합니다. 모든 로직, 데이터 가져오기, 템플릿 및 라우팅은 서버가 아닌 클라이언트에서 처리됩니다.

클라이언트 측 렌더링은 모바일에서 구현하기 어려울 수 있습니다. 최소한의 작업만 수행하여 JavaScript 자원 소모를 최소화하고 최대한 적은 수의 RTT 로 가치를 전달하면 순수한 서버 렌더링 성능에 접근할 수 있습니다. 중요한 스크립트와 데이터는 HTTP/2 Server Push 또는 사용하여 더 빨리 전달할 수 있습니다. 이렇게 하면 파서가 더 빨리 작동합니다. PRPL과 같은 패턴은 초기 및 순차 탐색이 즉각적으로 느껴지도록 평가할 가치가 있습니다.

Diagram showing client-side rendering affecting FCP and TTI

클라이언트 측 렌더링의 주된 단점은 응용 프로그램이 커짐에 따라 필요한 JavaScript의 양이 증가하는 경향이 있다는 것입니다. 특히 처리 능력을 놓고 경쟁하는 새로운 JavaScript 라이브러리, 폴리필 (polyfill) 및 서드파티 코드를 추가하면 페이지의 내용을 렌더링하기 전에 처리해야하는 경우가 종종 있습니다. 대규모 자바 스크립트 번들에 의존하는 CSR을 기반으로 구축된 경험은 적극적인 코드 분할을 고려해야하며 JavaScript를 "필요한 것만 필요할 때만 제공"해야 합니다. 인터렉션이 거의 없거나 전혀없는 경험의 경우, 서버 렌더링은 이러한 문제에 대해 보다 확장 가능한 솔루션일 수 있습니다.

단일 페이지 애플리케이션을 작성하는 사람들은 대부분의 페이지에서 공유되는 사용자 인터페이스의 핵심 부분을 식별함으로써 애플리케이션 쉘 캐싱 기술을 적용 할 수 있음을 의미합니다. 서비스 워커와 합께 사용하면 두 번째 이후의 방문시인지 성능를 획기적으로 향상시킬 수 있습니다.