Skip to content

SSG(Server Side Generation) 설정#39

Open
hyoseong1994 wants to merge 3 commits into
mainfrom
12-vite-react-ssg
Open

SSG(Server Side Generation) 설정#39
hyoseong1994 wants to merge 3 commits into
mainfrom
12-vite-react-ssg

Conversation

@hyoseong1994
Copy link
Copy Markdown
Collaborator

@hyoseong1994 hyoseong1994 commented May 19, 2026

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

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

테스팅

image

체크 리스트

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

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented May 19, 2026

Deploying with  Cloudflare Workers  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 8b98fe3 Commit Preview URL May 28 2026, 02:04 AM

Comment thread package.json
"@react-router/node": "^7.15.1",
"browserslist": "^4.28.2",
"daleui": "^1.0.0",
"isbot": "^5",
Copy link
Copy Markdown
Collaborator Author

@hyoseong1994 hyoseong1994 May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@hyoseong1994 hyoseong1994 marked this pull request as ready for review May 19, 2026 01:23
@hyoseong1994 hyoseong1994 requested a review from a team as a code owner May 19, 2026 01:23
Base automatically changed from 1018-mdx-pipeline to main May 27, 2026 00:21
@hyoseong1994 hyoseong1994 linked an issue May 27, 2026 that may be closed by this pull request
4 tasks
Comment thread src/layouts/Navigation.tsx Outdated
const el = document.documentElement;
return el.classList.contains("dark");
});
const [isDark, setIsDark] = useState(false);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread package.json
"build": "react-router typegen && tsc -b && react-router build",
"format": "prettier --check .",
"lint": "eslint .",
"test": "vitest",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread src/routes/blog.$slug.tsx
const post = findBlog(params.slug);
if (!post) {
throw new Response("Not Found", { status: 404 });
}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Collaborator Author

@hyoseong1994 hyoseong1994 May 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

vite-react-ssg 도입 — 라우트별 정적 HTML 사전 렌더링

2 participants