Improve performace/#188 #167

seonghunYang · 2024-12-17T13:49:00Z

📌 작업 내용

구현 내용 및 작업 했던 내역

개선 결과

메인 페이지

초기 렌더링 리소스: 4.6MB → 2.2MB
Lighthouse 성능: 81 → 95
- LCP: 3.1초 → 1.4초
- SI: 1.6초 → 1.0초
Lighthouse 접근성: 94 → 100
Lighthouse 권장사항: 93 → 100

결과 페이지

번들 크기: 178KB → 126KB
Lighthouse 성능: 99 → 100
- SI: 1.4초 → 1.0초
Lighthouse 접근성: 92 → 100
Lighthouse 권장사항: 93 → 100

메인 페이지

개선전	개선후

결과 페이지

🤔 고민 했던 부분

Result 페이지에서 Minified React error #419 에러가 발생했습니다. 이는 Suspense 바운더리 내의 컴포넌트가 서버 측에서 완전히 처리되지 못해 발생하는 문제였습니다. (권장사항 점수 향상을 위해서는 콘솔의 모든 에러를 제거해야 합니다)
- 이를 해결하기 위해 ResultCategory 컴포넌트를 Next.js dynamic 함수로 분리하고, ssr 속성을 false로 설정하여 서버 사이드 렌더링을 비활성화했습니다
- 또한 UserInfoCard의 자식 컴포넌트인 UserInfoContent에서도 같은 Suspense 바운더리 오류가 발생했습니다. 이는 UserInfoContent를 클라이언트 컴포넌트에서 서버 컴포넌트로 전환하여 해결했습니다
여러 페이지에서 Minified React error #418 에러가 발생했는데, 이는 Responsive 컴포넌트로 인해 서버와 클라이언트의 렌더링 결과가 불일치하여 발생한 문제였습니다. 해당 컴포넌트의 서버 사이드 렌더링을 비활성화하여 문제를 해결했습니다. (참고)

🔊 도움이 필요한 부분

메인 페이지에 SEO는 다음 PR에서 수정할 예정입니다

…ult queries

…result category details

…better responsiveness

…erformance

…nd styling

…serInfoCard for improved performance

gahyuun

고생하셨습니다
Suspense 바운더리 내의 컴포넌트가 서버 측에서 완전히 처리되지 않는 이유가 따로 있나용?? ResultCategory는 Responsive 컴포넌트로 감싸져있지 않은 것 같아서요!

gahyuun · 2024-12-21T11:12:24Z

app/(sub-page)/layout.tsx

@@ -10,7 +10,9 @@ function SubPageLayout({ children }: LayoutProps) {
  return (
    <>
      <NavigationBar />
-      <Image src={background} width={800} height={288} className="w-full bg-white h-[18rem]" alt="background" />
+      <div className="relative bg-primary h-[18rem]">
+        <Image src={background} sizes="100vw" className="absolute bottom-0 bg-white" alt="background" />


저는 sizes를 브라우저가 어떤 크기 이미지를 렌더링할 지 알려주는 속성으로 알고 있는데 background 이미지는 단일 이미지이므로 sizes 속성이 필요 없지 않나요 ??

기본 img 태그의 sizes 속성은 말씀하신 정의가 맞습니다. Next.js의 Image 태그에서 sizes 속성을 정의하면, srcset 속성이 자동으로 최적화되어 반응형 이미지를 구현할 수 있습니다.

예를 들어, sizes 속성이 100vw로 동일하더라도 뷰포트가 1000px이면 1000w 이미지를, 2000px이면 2000w 이미지를 받아 최적화할 수 있습니다!
(참고)

gahyuun · 2024-12-21T11:22:17Z

next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
+import withBundleAnalyzer from '@next/bundle-analyzer';


번들 분석해주는 도구인가용? 이를 통해서 개선해야 할 점을 알 수 있는건가요 !?

네, 맞습니다. 번들 분석을 통해 axios 모듈의 번들 크기를 개선할 수 있었습니다.

package.json에 스크립트를 추가해놔서 npm run analyze로 분석이 가능합니다.

실행 시 아래와 같은 HTML 결과물을 확인할 수 있습니다.

yougyung

수고 많으셨습니다 !

yougyung · 2024-12-23T01:57:14Z

app/store/querys/result.ts

@@ -45,7 +45,7 @@ export const useFetchCredits = () => {

 const fetchCredits = async () => {
  try {
-    const { data } = await axios<CreditResponse[]>(`${API_PATH.graduations}/credits`, {
+    const { data } = await fetchAX.get<CreditResponse[]>(`${API_PATH.graduations}/credits`, {


fetchAX.create를 통해 생성한 instance를 사용하지않고 fetchAX를 통해 요청을 호출한 이유가 있나요?

처음에는 생성한 instance를 사용하려 했으나, 클라이언트에서 next/headers 접근이 불가능하다는 에러가 발생했습니다. 따라서 해당 instance는 서버 쪽 데이터 처리용으로 두고, 대신 fetchAX를 사용하여 구현했습니다.

yougyung · 2024-12-23T02:49:47Z

app/(sub-page)/result/components/result-category-detail-container.tsx

+export default function ResultCategoryDetailContainer({ category }: { category: ResultCategoryKey }) {
+  const { isOpen } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
+
+  if (!category) return;
+
+  return <>{isOpen && <ResultCategoryDetail category={category} />}</>;
+}


기존에 컴포넌트의 렌더링에서 isOpen을 기준으로 잡지않은 이유는, http://localhost:3000/result?category=PRIMARY_MANDATORY_MAJOR 으로 바로 접근하는 경우를 고려했기때문입니다!

useDialog의 isOpen조건을 제거하여 위 경우를 보장하고

ResultCategoryDetail의 if (!category) return;을 제거하여 같은 조건을 한번만 처리할 수 있게 하는 것은 어떨까요?

Suggested change

export default function ResultCategoryDetailContainer({ category }: { category: ResultCategoryKey }) {

const { isOpen } = useDialog(DIALOG_KEY.RESULT_CATEGORY);

if (!category) return;

return <>{isOpen && <ResultCategoryDetail category={category} />}</>;

}

export default function ResultCategoryDetailContainer({ category }: { category: ResultCategoryKey }) {

if (!category) return;

return <>{<ResultCategoryDetail category={category} />}</>;

}

처음에 저도 category로 필터링을 시도했으나, category 데이터가 서버 측에 존재하는 데이터이기 때문에 클라이언트에서 지연 로딩이 동작하지 않았습니다. 그래서 다른 방법을 시도했습니다.

그런데 말씀하신 것처럼 URL 입력 시 인식하지 못하는 문제가 있어서, useEffect 위치를 조정하여 수정했습니다!

47bcef5

…ory prop

…creens

seonghunYang · 2024-12-23T05:14:54Z

고생하셨습니다 Suspense 바운더리 내의 컴포넌트가 서버 측에서 완전히 처리되지 않는 이유가 따로 있나용?? ResultCategory는 Responsive 컴포넌트로 감싸져있지 않은 것 같아서요!

기존 result 페이지에서 UserInfoCard와 ResultCategoryDetail이 Suspense 바운더리로 감싸져 있었는데, 둘 다 같은 에러가 발생하여 수정을 진행했습니다. 이 부분은 Responsive와는 별개로 발생한 에러로 보입니다
먼저 UserInfoCard는 서버 컴포넌트였지만, 내부에 클라이언트 컴포넌트가 있어서 에러가 발생했습니다. 해당 컴포넌트를 서버 컴포넌트로 충분히 변경할 수 있다고 판단하여 변경 작업을 진행했습니다.
다음으로 ResultCategoryDetail은 클라이언트 컴포넌트인데, 클라이언트 컴포넌트를 lazy loading 할 때는 Suspense와 함께 React.lazy()를 함께 사용해야 했습니다. Next.js의 dynamic 함수가 동일한 역할을 하므로 이를 사용하여 변경했습니다.

github-actions · 2024-12-23T05:41:46Z

🚀storybook: https://65ccb85d5afe55a024495bc0-vfotlsvkdb.chromatic.com/

github-actions · 2024-12-23T06:42:45Z

🚀storybook: https://65ccb85d5afe55a024495bc0-vsyxmkarxg.chromatic.com/

seonghunYang added 16 commits December 16, 2024 06:59

feat: add bundle analyzer support and update package.json scripts

0ef173e

feat: replace axios with fetch-ax for API requests in lecture and res…

4d2c83f

…ult queries

refactor: add ResultCategoryDetailContainer for dynamic rendering of …

8380232

…result category details

fix: adjust Image component layout for better responsiveness on HomePage

08cce46

fix: add sizes attribute to Image component for improved responsiveness

4dc6299

fix: update favicon path in layout for correct icon display

50c0853

feat: integrate local font for improved typography on HomePage

91f8b6c

refactor: 가변 다이나믹 서브셋 폰트 적용

294ab58

fix: add quality attribute to Image component for optimized loading

75266d7

fix: adjust Image component quality and update layout dimensions for …

240169c

…better responsiveness

fix: update navigation components for improved layout and accessibility

96694b1

fix: 서버 렌더링 결과와 클라이언트 렌더링 결과 불일치 개선

51fd5ec

fix: add priority attribute to Image component for improved loading p…

e830bd4

…erformance

fix: update layout and image components for improved responsiveness a…

ce523f9

…nd styling

fix: dynamically load ResultCategory component and fetch credits in U…

248863b

…serInfoCard for improved performance

fix: update text color in UserInfoContent for improved readability

87374db

seonghunYang requested review from yougyung and gahyuun as code owners December 17, 2024 13:49

seonghunYang self-assigned this Dec 17, 2024

gahyuun previously approved these changes Dec 22, 2024

View reviewed changes

yougyung reviewed Dec 23, 2024

View reviewed changes

seonghunYang added 2 commits December 23, 2024 04:40

fix: ensure ResultCategoryDetailDialog opens correctly based on categ…

47bcef5

…ory prop

fix: update SignInPage layout for improved responsiveness on larger s…

42d7d61

…creens

seonghunYang dismissed gahyuun’s stale review via 42d7d61 December 23, 2024 04:42

chore: Merge branch 'main' into improve-performace/#188

ddf389a

fix: update lectureCode to lectureId in takenLectureHandler mock

364ace7

fix: remove formId prop from FormSubmitButton component

9232dc4

gahyuun approved these changes Dec 23, 2024

View reviewed changes

yougyung approved these changes Dec 23, 2024

View reviewed changes

seonghunYang merged commit e068d25 into main Dec 23, 2024
2 of 3 checks passed

seonghunYang deleted the improve-performace/#188 branch December 23, 2024 07:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve performace/#188 #167

Improve performace/#188 #167

seonghunYang commented Dec 17, 2024 •

edited

Loading

gahyuun left a comment

gahyuun Dec 21, 2024

seonghunYang Dec 23, 2024

gahyuun Dec 21, 2024

seonghunYang Dec 23, 2024

yougyung left a comment

yougyung Dec 23, 2024

seonghunYang Dec 23, 2024

yougyung Dec 23, 2024

seonghunYang Dec 23, 2024

seonghunYang commented Dec 23, 2024

github-actions bot commented Dec 23, 2024

github-actions bot commented Dec 23, 2024

		@@ -1,4 +1,6 @@
		/** @type {import('next').NextConfig} */
		import withBundleAnalyzer from '@next/bundle-analyzer';

Improve performace/#188 #167

Improve performace/#188 #167

Conversation

seonghunYang commented Dec 17, 2024 • edited Loading

📌 작업 내용

개선 결과

메인 페이지

결과 페이지

🤔 고민 했던 부분

🔊 도움이 필요한 부분

gahyuun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yougyung left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seonghunYang commented Dec 23, 2024

github-actions bot commented Dec 23, 2024

github-actions bot commented Dec 23, 2024

seonghunYang commented Dec 17, 2024 •

edited

Loading