[렌더링 방식의 분석] 황펭(양이진) 미션 제출합니다.

docs/redering-comparing.md

@@ -0,0 +1,35 @@
+# 렌더링 방식 탐구 및 비교 분석
+
+## 렌더링 시점의 비교
+
+- SPA: 클라이언트 측에서 렌더링한다. 초기 페이지 로드 시 HTML, CSS, JS 파일을 다운로드하고, 클라이언트에서 동적으로 페이지를 렌더링한다.
+- SSR: 페이지를 서버에서 초기 렌더링 한 후, 사용자의 요청마다 서버에서 동적으로 렌더링한다. 렌더링을 완료한 후 완성된 HTML을 제공한다.
+- SSG: 빌드할 때 완성된 HTML을 생성한다. 초기 페이지 로드 시 완성된 HTML을 제공한다.
+- ISR: 빌드할 때 페이지를 생성하지만, 주기적으로 빌드한다. 즉, 동적 데이터를 주기적으로 업데이트하고 다시 빌드한다.
+
+<br>
+
+## 사용자 경험 측면 분석
+
+- SPA: 데이터를 가져오는 시간동안 로딩 UI를 보여준다. 흰 화면이 보이는 시간이 적다. 사용자가 동적으로 데이터를 가져올 수 있는 페이지라면 SPA 방식이 유리하다. 하나의 html에서 변경되는 부분만 동적으로 렌더링하기에 페이지 간 전환이 빠르다.
+- SSR: 서버에서 페이지를 렌더링해서 사용자에게 제공하기에 로딩 화면 없이 온전한 페이지를 사용자에게 제공할 수 있다. 하지만 페이지 전환 시 서버에 요청을 보내고 서버에서 페이지가 렌더링 되기 때문에 페이지 간 전환 속도가 상대적으로 느릴 수 있다.
+- SSG: 완성된 페이지를 다운받기 때문에 초기 로드 속도가 빠르다.
+- ISR: SSG 방식과 동일하게 완성된 페이지를 다운받기 때문에 초기 로드 속도가 빠르다.
+
+<br>
+
+## 펀잇 SPA와 ISR
+
+|                                                                                 SPA                                                                                 |                                                                                 ISR                                                                                 |
+| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <img width="240" alt="스크린샷 2023-10-16 오후 12 11 12" src="https://github.com/Leejin-Yang/woowacourse-log/assets/78616893/31f5dacb-cf18-422f-89e5-47a789d8c42c"> | <img width="240" alt="스크린샷 2023-10-16 오후 12 11 31" src="https://github.com/Leejin-Yang/woowacourse-log/assets/78616893/4d29bd75-595e-4ed3-90bc-5d191d942bda"> |
+
+크롬 개발자도구의 Performance 탭에서 확인한 표이다. 노란색의 Scripting을 보면, SPA의 경우 클라이언트에서 동적으로 렌더링하기 위한 스크립트를 가져오면서 시간이 소요되는 것을 볼 수 있다. 반면 ISR의 경우 기본 페이지를 받아오고 화면의 동작 관련 스크립트를 가져온다. 즉, ISR은 빌드 시간에 정적 페이지를 만들기 때문에 페이지를 온전히 보여주는 시간이 적게 소요된다.
+
+### 성능 측정 및 비교
+
+| SPA                                                                                                                                                                 | ISR                                                                                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img width="553" alt="스크린샷 2023-10-16 오후 12 56 52" src="https://github.com/Leejin-Yang/woowacourse-log/assets/78616893/69dcda09-ec0f-4ab5-ad4e-9fecbcdd5674"> | <img width="553" alt="스크린샷 2023-10-16 오후 12 42 40" src="https://github.com/Leejin-Yang/woowacourse-log/assets/78616893/dea214f6-2f76-497c-9ba7-7ff6142f5bb5"> |
+
+성능을 측정하고 비교하기 위해 Lighthouse를 사용했다. 그 중 FCP, LCP를 기준으로 확인해보려한다. SPA의 경우 초기 빈 HTML에 로딩 화면을 그려 보여주기 때문에 1.2s의 시간으로 전체 콘텐츠가 담긴 ISR 방식의 2.9s보다 빠르다는 것을 알 수 있다. 하지만 FCP와 LCP 사이의 시간은 클라이언트에서 렌더링하는 SPA에서 더 큰 것을 볼 수 있다.