SSG(Server Side Generation) 설정

[hyoseong1994]

사전조사때에는 vite-react-ssg를 사용하려하였으나 vite-react-ssg Github에서 react-router-dom v7를 추천하여 변경하게되었습니다.

• Navigation.tsx, Team.tsx의 useState 초기화 시점을 "렌더링 중" → "마운트 직후"로 옮김
  prerendering은 node에서 동작(document없음)하며, useEffect를 실행하지 않습니다.
• React Router v7 설정

테스팅

체크 리스트

• 코드 리뷰를 요청하기 전에 반드시 CI가 통과하는지 확인해주세요.
• 컴포넌트나 스토리 변경이 있는 경우 PR에 ui 태그를 달아주세요.
  • UI Tests를 통해 스냅샷 차이가 의도된 것인지 확인해주세요.
  • UI Review를 통해 디자이너에게 리뷰를 요청하고 승인을 받으세요.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	daleui	967e413	Commit Preview URL	May 29 2026, 01:06 PM

[hyoseong1994]

isbot은 react-router v7 빌드시 자동추가 (prerendering 하는 daleui.com에서는 필요없지만 의존성으로인하여 설치)

[SimYunSup]

Dark mode fouc를 제한하려면 next-themes를 참고하세요.

[hyoseong1994]

의견 감사합니다.
FOUC 제한을 위해 next-theme 를 참고해서 root.tsx 에 inline script 추가하였습니다.

[SimYunSup]

Suggested change

	"test": "vitest",
	"test": "vitest",
	"prepare": "react-router typegen",

[hyoseong1994]

의견 감사합니다. typegen은 prepare로 분리하였습니다.

[SimYunSup]

loader부분에서 MDX 파일 + frontmatter를 가져와야 제대로 Static Rendering이 됩니다.

[hyoseong1994]

이 부분이 이해가 잘 안되는데 자세히 설명가능할까요?

[SimYunSup]

지금은 eager: true glob으로 모든 글을 한 번에 import한 뒤 컴포넌트/meta()에서 findBlog()를 직접 호출하고 있어요. HTML 결과물은 정상이지만, React Router가 의도한 정적 렌더링 방식과는 달라서 loader로 옮기는 걸 제안드렸습니다.

• 코드 스플리팅: eager: true는 모든 글을 한 청크로 묶어서, 글 하나만 들어가도 전체 글이 다운로드됩니다.
• 데이터 레이어: loader를 쓰면 빌드 시 결과가 .data로 직렬화되고, meta({ data })가 그 값을 받아 findBlog 중복 호출이 사라집니다. (ssr:false + prerender면 등록된 경로의 loader는 빌드 타임에 실행돼요.)
• 비동기 확장성: lazy import(slug별 dynamic import)는 async라 컴포넌트 본문에선 못 쓰고 loader가 적합합니다.
• 404 위치: throw new Response(..., { status: 404 })는 loader에서 던지는 게 정석이에요.
• MDX default export는 React 컴포넌트라 직렬화가 안 됩니다.

export async function loader({ params }: Route.LoaderArgs) {
  const post = findBlog(params.slug);
  if (!post) throw new Response("Not Found", { status: 404 });
  return { frontmatter: post.frontmatter, slug: post.slug };
}

[hyoseong1994]

아하 이해했습니다. 친절한 설명 감사합니다.
말씀하신대로 loader 로 분리하였습니다.