렌더링 패턴

JISEUNG·2023년 2월 12일

Front-end Roadmap

Frontend-Roadmap

목록 보기

9/15

Rendering

렌더링이란 데이터와 코드를 유저에게 보여주기 위한 HTML로 변환하는 과정이다.

렌더링 과정은 서버 혹은 브라우저(클라이언트)에서 이루어지며, 한번에 혹은 부분적으로 진행될 수 있다.

앞으로 설명할 렌더링 패턴들에는 UX, 성능, DX 측면에서 각각의 Trade-offs가 있다.

1. Static Website

가장 기본적인 렌더링 패러다임

모든 웹 페이지를 미리 넣어놓는다.
클라우드 저장소(ex. AWS S3)에 정적 파일(static file) 형태로 올려놓고 도메인 이름을 지정한다.
Hugo, jekyll, 11ty

Drawbacks

No Dynamic Data
- 데이터가 변경되는 웹사이트에 좋지 않다.
- 인터랙션이나 동적인 데이터가 많은 웹사이트에 적합하지 않다.

하지만 웹사이트는 점점 더 Dynamic해졌다.

2. Multi Page Application

데이터의 변경마다 웹사이트의 모습이 변화할 수 있게 되었다.

브라우저(클라이언트)에서 요청이 들어올 때마다 서버에서 HTML과 data가 동적으로 수집된다.
즉, 새 URL을 탐색할 때마다 브라우저는 해당 페이지에 특정한 HTML을 점진적으로 렌더링한다.
대부분의 대규모 웹 앱들의 접근 방식
ex. amazon.com
- 클릭마다 서버에서 새롭게 동적으로 페이지를 생성한다.
Ruby on Rails, Django, Laravel
WordPress

IPhone의 부드러운 화면 전환 UI 등장

모든 URL에 대해 모든 전체 페이지를 Reload하는게 투박하다는 것을 깨닫기 시작했다.

2010년부터 SPA가 떠오른다.

3. Single Page Application

Angular, React와 같은 프레임 워크가 등장했다.

Client-Side Rendering

이제 모든 UI 렌더링이 브라우저(클라이언트)에서 발생한다.

HTML페이지를 하나의 Shell로 시작하고, JavaScript를 실행해서 UI를 렌더링한다.
추가적인 데이터를 fetch하기 위해서 HTTP 요청을 보낸다.

Client-Side Routing

Single page지만 다중 route를 가지고 있다.
route는 서버를 가리키지 않고 단순히 브라우저(클라이언트)의 JavaScript에 의해서만 업데이트된다.

Advantages

위와 같은 점이 빠른 route 이동을 가능하게 한다. 페이지를 렌더링하는데 시간이 더 많이 걸릴 수 있는 Multi-page 애플리케이션과 달리 즉각적인 경험을 할 수 있게 된다.

Drawbacks

커다란 JavaScript Bundle을 필요로 한다. 초기 페이지 로드를 느리게 만들 수도 있다.
Shell만 렌더링하기 때문에 검색 엔진이 동적 route를 이해하기 어렵다.

4. Server-Side Rendering with Hydration

좋은 SEO, 소셜 미디어에서 컨텐츠의 공유를 목적으로 새로운 패러다임이 등장했다.

Server-Side Rendering

초기 페이지 로드 시 HTML과 데이터를 서버에서 렌더링한다.
그리고나서 JavaScript를 Client-Side에 Hydrate한다.
즉, 초기 요청을 서버에 보내고 이후에 동적으로 모든 것을 렌더링한다.

Advantages

MPA + SPA = SSR

초기 페이지가 로드되고 나서는 JavaScript가 나머지 페이지를 SPA처럼 동작하게 해준다.
Next.js, Nuxt.js, SvelteKit와 같은 Meta-Framework

Drawbacks

실제 서버가 필요하다. 비용 문제

5. Static Site Generation with Hydration

SSR의 변형으로 SSG(Static Site Generation)가 등장했다.

모든 HTML을 미리 렌더링 해서 Static host(ex. storage bucket)에 업로드한다.
하지만 초기 페이지가 로드된 후에는 SSR처럼 JavsScript를 Hydrate한다. 즉, 남은 모든 페이지를 브라우저에서 렌더링한다.
이러한 웹사이트를 Jamstack site라고 부르고, 일반적으로 SSR과 같은 Meta-Framework(Next.js, Nuxt.js, SvelteKit)로 구축된다.

Advantages

Static site + SPA = SSR

Static site의 간단함. 저비용의 호스팅 지원
SPA의 APP-like Experience

Drawbacks

데이터가 바뀔 때마다 재배포해야 한다.

6. Incremental Static Regeneration

Static site with Dynamic server data

Next.js에서 시작
Static site를 배포하고, 캐시가 유효하지 않을 때 서버에서 개별 페이지를 rebuild한다.
일반적으로 Static site에서는 모든 것을 CDN에 영구적으로 캐시함으로써 빠르게 동작할 수 있다.
ISR에서는 특정한 규칙(ex. 시간 등)을 기반으로 캐시의 유효기간을 제한한다.
- 캐시가 유효하지 않으면, 페이지가 rebuild되므로 동적 데이터를 다룰 수 있게 된다.