기존 게시글

기존 게시글 페이지는 [title]/page.tsx와 [title]/_components/clientPage.tsx로 구성되었습니다.
prefetchQuery를 사용해 서버에서 데이터를 미리 불러와 캐싱하고, 클라이언트 측에서 이 데이터를 기반으로 화면을 그려주는 방식으로 제작되었습니다.

이 방식은 캐싱을 활용해 성능 면에서는 이점이 있었지만, SEO(검색 엔진 최적화)에 최적화되지 않은 문제가 있었습니다. 블로그 게시글의 특성상 대부분의 콘텐츠는 정적인 형태로 제공되며, 사용자와의 상호작용이 많지 않기 때문에 모든 화면을 클라이언트에서 렌더링하는 것은 비효율적이라고 판단했습니다.

---

수정된 게시글

수정된 게시글 페이지는 SEO 최적화를 위해 서버사이드 렌더링(SSR)을 도입했습니다. prefetchQuery를 사용해 데이터를 미리 가져오는 점은 동일하지만, 클라이언트 전용 컴포넌트인 clientPage를 제거하여 서버에서 바로 데이터를 받아 화면에 출력하도록 변경했습니다.

주요 변경 사항

1. 서버사이드 데이터 로드
   기존에는 데이터를 클라이언트에서 렌더링했지만, 이제는 서버에서 데이터를 가져와 즉시 렌더링합니다. 이를 통해 페이지 로드 시간 단축 및 검색 엔진 크롤링 최적화가 가능해졌습니다.

   const queryClient = getQueryClient({ staleTime: 60 * 1000 });
   await queryClient.prefetchQuery({
     queryKey: ["post", title],
     queryFn: () => getPost(title),
   });
   
   const post = queryClient.getQueryData<Post>(["post", title]);

2. 불필요한 렌더링 제거
   클라이언트에서 데이터를 불러오는 clientPage 구조를 제거하여 코드가 더 간결해졌습니다. 이제 서버에서 데이터를 준비해 클라이언트로 전달하므로 불필요한 리소스 사용을 줄였습니다.

3. Lazy Loading 도입
   클라이언트에서만 필요한 기능(예: 댓글, 목차)은 next/dynamic으로 레이지 로딩(Lazy Loading)하여 초기 로딩 속도를 개선했습니다. 이렇게 하면 방문자는 주요 콘텐츠를 더 빠르게 확인할 수 있습니다.

   const Navigation = dynamic(() => import("./_components/Navigation"));
   const GenerateTOC = dynamic(() => import("./_components/GenerateTOC"));
   const Comments = dynamic(() => import("./_components/Comments/Comments"));