fix: 메인 페이지 초기 로딩 속도 문제 해결

[SaeWooKKang]

요약 📜

• [IMPROVEMENT] 메인페이지 포스팅 메타 정보가져오는 함수 개선 요청 #7 문제 해결

구현 내용 📝

AS-IS

2024-06-05.2.16.27.mov

• issue에서 시간이 많이걸렸던 getPostMetas 함수는 meta 정보와 html을 반환하는데 확인 결과 .md 파일을 html로 직렬화하는 함수가 약 총 5.3s로 전체 페이지 로딩 5.817s의 약 92% 차지

TO-BE

2024-06-05.2.40.40.mov

• / 페이지에선 메타 정보만 필요하고, HTML로 직렬화가 불필요하므로 함수를 메타 정보 파싱과, html 직렬화 하는 함수 2개로 분리
  • refactor: 메인페이지 로딩 속도 개선
• 약 5.8s -> 약 1.6s로 약 3.6배 속도 향상

관련 이슈🎯

• 처음에는 파싱 함수의 반환값을 캐싱하면 해결될거라고 생각했는데 캐싱이 되기전인 초기 로딩 속도는 여전히 느려서 근본적 문제를 해결하고자 함
  • feat: 캐시를 활용하여 파일 읽기, html 태그로 변환 시간 단축

기타

• zod로 .md파일의 meta 데이터 스키마 검증을 통해 any 타입 제거

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-blog-wpnr	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 5, 2024 5:49am

[github-actions]

Risk Level 2 - /home/runner/work/next-blog/next-blog/src/common/util/fs.ts

The method getFile should handle potential errors when reading files. Consider wrapping fs.readFileSync in a try-catch block to handle exceptions gracefully.

static getFile(path: fs.PathLike, option: BufferEncoding) {
  try {
    return fs.readFileSync(path, option);
  } catch (error) {
    console.error(`Error reading file at ${path}:`, error);
    throw error;
  }
}

---

Risk Level 3 - /home/runner/work/next-blog/next-blog/src/pages/index.tsx

1. The useSWR hook should handle the case where postMetaList is undefined or null to avoid potential runtime errors.

const { data: postMetaList } = useSWR<Array<PostMeta>>(KEY_POST);

if (!postMetaList) return <div>Loading...</div>;

2. Ensure that post.keyword is unique to avoid potential key conflicts in the list rendering.

---

Risk Level 3 - /home/runner/work/next-blog/next-blog/src/pages/posts/[id].tsx

1. The useSWR hook should handle the case where post is undefined or null to avoid potential runtime errors.

const { data: post } = useSWR(`/api/posts/${id}`);

if (!post) return <div>Loading...</div>;

2. Consider adding error handling for the useSWR hook to manage potential fetch errors.

---

🛠️📄⚠️

---

Powered by Code Review GPT

[SaeWooKKang]

The method getFile should handle potential errors when reading files. Consider wrapping fs.readFileSync in a try-catch block to handle exceptions gracefully.

에러 핸들링을 추가로 하는 이유가 3가지 정도 있을거라고 본다.

1. 에러 전파를 방지
2. 서버에 로깅
3. 좀 더 상세한 에러 메시지 전달

나의 의견은 다음과 같다.

1. 블로그 서비스에서 파일시스템에 문제가 있다면 에러를 던지고 빌드되지 않도록 하는것이 적절하다고 생각한다.
2. 서버에 로깅은 현재 시점에선 불필요하다고 생각한다.
3. 에러 메시지는 충분히 상세해 디버깅하는데 문제가 없다고 생각한다.

The useSWR hook should handle the case where postMetaList is undefined or null to avoid potential runtime errors.
The useSWR hook should handle the case where post is undefined or null to avoid potential runtime errors.

이 부분은 실제로 undefined 타입이 나올 가능성이 없을것 같은데 확인이 필요할것같다. 현재 Pr과는 관련없는 내용이므로 issue(#12)로 남겨두었다.