[렌더링 방식의 분석] 황펭(양이진) 미션 제출합니다. #53
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Gilpop8663
approved these changes
Oct 18, 2023
| | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | <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에서 더 큰 것을 볼 수 있다. |
There was a problem hiding this comment.
상당히 차이가 나는군요!
한 페이지에서 서버컴포넌트와 클라이언트 컴포넌트를 잘 섞으면 웹 성능에 도움이 되겠어요
예를 들어 화면에 최상단에 보여주는 컴포넌트는 SSR로 해주고, 하단에 보이는 것은 SPA 방식으로요!
참고 링크
Comment on lines
+14
to
+17
| - SPA: 데이터를 가져오는 시간동안 로딩 UI를 보여준다. 흰 화면이 보이는 시간이 적다. 사용자가 동적으로 데이터를 가져올 수 있는 페이지라면 SPA 방식이 유리하다. 하나의 html에서 변경되는 부분만 동적으로 렌더링하기에 페이지 간 전환이 빠르다. | ||
| - SSR: 서버에서 페이지를 렌더링해서 사용자에게 제공하기에 로딩 화면 없이 온전한 페이지를 사용자에게 제공할 수 있다. 하지만 페이지 전환 시 서버에 요청을 보내고 서버에서 페이지가 렌더링 되기 때문에 페이지 간 전환 속도가 상대적으로 느릴 수 있다. | ||
| - SSG: 완성된 페이지를 다운받기 때문에 초기 로드 속도가 빠르다. | ||
| - ISR: SSG 방식과 동일하게 완성된 페이지를 다운받기 때문에 초기 로드 속도가 빠르다. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🧐 2단계 - 렌더링 방식의 분석
안녕하세요 우스! 2단계로 돌아왔습니다.
어느덧 우테코 마지막 미션이네요. 마지막 미션 잘 부탁드려요!
✅ 체크리스트
렌더링 시점 비교
사용자 경험(UX) 측면 분석
성능 측정 및 비교