From 98e8e5417e6dd942d6ea35881440d6751dc4f3ef Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Mon, 16 Oct 2023 14:06:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=ED=83=90=EA=B5=AC=20=EB=B0=8F=20=EB=B9=84?= =?UTF-8?q?=EA=B5=90=20=EB=B6=84=EC=84=9D=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/redering-comparing.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 docs/redering-comparing.md diff --git a/docs/redering-comparing.md b/docs/redering-comparing.md new file mode 100644 index 00000000..d95c2c01 --- /dev/null +++ b/docs/redering-comparing.md @@ -0,0 +1,38 @@ +# 렌더링 방식 탐구 및 비교 분석 + +## 렌더링 시점의 비교 + +- 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에서 더 큰 것을 볼 수 있다. + + + From c1cff677f8cf8c3512d0530e6bcb81221751eae7 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Mon, 16 Oct 2023 14:07:57 +0900 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=EB=AC=B8=EC=84=9C=20=EA=B3=B5?= =?UTF-8?q?=EB=B0=B1=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/redering-comparing.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/redering-comparing.md b/docs/redering-comparing.md index d95c2c01..ae854776 100644 --- a/docs/redering-comparing.md +++ b/docs/redering-comparing.md @@ -20,19 +20,16 @@ ## 펀잇 SPA와 ISR -| SPA | ISR | -| :----------------------------------------------------------: | :----------------------------------------------------------: | +| SPA | ISR | +| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 스크린샷 2023-10-16 오후 12 11 12 | 스크린샷 2023-10-16 오후 12 11 31 | 크롬 개발자도구의 Performance 탭에서 확인한 표이다. 노란색의 Scripting을 보면, SPA의 경우 클라이언트에서 동적으로 렌더링하기 위한 스크립트를 가져오면서 시간이 소요되는 것을 볼 수 있다. 반면 ISR의 경우 기본 페이지를 받아오고 화면의 동작 관련 스크립트를 가져온다. 즉, ISR은 빌드 시간에 정적 페이지를 만들기 때문에 페이지를 온전히 보여주는 시간이 적게 소요된다. ### 성능 측정 및 비교 -| SPA | 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에서 더 큰 것을 볼 수 있다. - - -