diff --git a/docs/redering-comparing.md b/docs/redering-comparing.md new file mode 100644 index 00000000..ae854776 --- /dev/null +++ b/docs/redering-comparing.md @@ -0,0 +1,35 @@ +# 렌더링 방식 탐구 및 비교 분석 + +## 렌더링 시점의 비교 + +- SPA: 클라이언트 측에서 렌더링한다. 초기 페이지 로드 시 HTML, CSS, JS 파일을 다운로드하고, 클라이언트에서 동적으로 페이지를 렌더링한다. +- SSR: 페이지를 서버에서 초기 렌더링 한 후, 사용자의 요청마다 서버에서 동적으로 렌더링한다. 렌더링을 완료한 후 완성된 HTML을 제공한다. +- SSG: 빌드할 때 완성된 HTML을 생성한다. 초기 페이지 로드 시 완성된 HTML을 제공한다. +- ISR: 빌드할 때 페이지를 생성하지만, 주기적으로 빌드한다. 즉, 동적 데이터를 주기적으로 업데이트하고 다시 빌드한다. + +
+ +## 사용자 경험 측면 분석 + +- SPA: 데이터를 가져오는 시간동안 로딩 UI를 보여준다. 흰 화면이 보이는 시간이 적다. 사용자가 동적으로 데이터를 가져올 수 있는 페이지라면 SPA 방식이 유리하다. 하나의 html에서 변경되는 부분만 동적으로 렌더링하기에 페이지 간 전환이 빠르다. +- SSR: 서버에서 페이지를 렌더링해서 사용자에게 제공하기에 로딩 화면 없이 온전한 페이지를 사용자에게 제공할 수 있다. 하지만 페이지 전환 시 서버에 요청을 보내고 서버에서 페이지가 렌더링 되기 때문에 페이지 간 전환 속도가 상대적으로 느릴 수 있다. +- SSG: 완성된 페이지를 다운받기 때문에 초기 로드 속도가 빠르다. +- ISR: SSG 방식과 동일하게 완성된 페이지를 다운받기 때문에 초기 로드 속도가 빠르다. + +
+ +## 펀잇 SPA와 ISR + +| SPA | ISR | +| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| 스크린샷 2023-10-16 오후 12 11 12 | 스크린샷 2023-10-16 오후 12 11 31 | + +크롬 개발자도구의 Performance 탭에서 확인한 표이다. 노란색의 Scripting을 보면, SPA의 경우 클라이언트에서 동적으로 렌더링하기 위한 스크립트를 가져오면서 시간이 소요되는 것을 볼 수 있다. 반면 ISR의 경우 기본 페이지를 받아오고 화면의 동작 관련 스크립트를 가져온다. 즉, ISR은 빌드 시간에 정적 페이지를 만들기 때문에 페이지를 온전히 보여주는 시간이 적게 소요된다. + +### 성능 측정 및 비교 + +| SPA | ISR | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 스크린샷 2023-10-16 오후 12 56 52 | 스크린샷 2023-10-16 오후 12 42 40 | + +성능을 측정하고 비교하기 위해 Lighthouse를 사용했다. 그 중 FCP, LCP를 기준으로 확인해보려한다. SPA의 경우 초기 빈 HTML에 로딩 화면을 그려 보여주기 때문에 1.2s의 시간으로 전체 콘텐츠가 담긴 ISR 방식의 2.9s보다 빠르다는 것을 알 수 있다. 하지만 FCP와 LCP 사이의 시간은 클라이언트에서 렌더링하는 SPA에서 더 큰 것을 볼 수 있다.