Vike 한입 해보실래요?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• React 개발자 및 Next.js 대안 탐색자
• 중급 이상의 웹 개발자 (SSR/SSG 경험 필요)
• 다중 인프라 배포 요구 프로젝트 팀

핵심 요약

• Vike는 UI 프레임워크, 렌더링 전략, 서버 환경을 개발자가 자유롭게 선택할 수 있는 코어 프레임워크
• +data.ts와 +Page.tsx 구조로 SSR/SSG 지원
• Next.js 대비 onBeforePrerenderStart 훅을 통한 동적 라우트 생성 방식**

섹션별 세부 요약

###Vike 프레임워크 개요

• Vite 기반 개발 환경 제공 : HMR(Hot Module Replacement) 지원
• 기술 스택 자유도 : React, Vue, Solid 지원
• 점진적 도입 가능 : 기존 프로젝트에 추가 없이 통합 가능

###Next.js와의 비교

• Next.js의 RSC(Remote Component) 모델의 복잡성 : use client 명시 필요
• Vike의 SSR/SSG 활용성 : 기존 React 훅(useState, useEffect) 그대로 사용 가능
• 플랫폼 종속성 차이 : Next.js는 Vercel과의 깊은 통합으로 다른 환경에서 기능 제한

###SSG 설정 예시

• 글로벌 설정 : vite.config.ts에서 prerender: true 추가
• 페이지별 설정 : +config.js 파일 생성 후 prerender: true 지정
• 동적 라우트 생성 : onBeforePrerenderStart 훅 통해 URL 생성
• 예제 코드 :

```ts

export const onBeforePrerenderStart: OnBeforePrerenderStartAsync = async () => {

const posts = await fetchAllBlogPosts();

return await Promise.all(posts.map(async (post) => {

const detailPost = await fetchBlogPostById(post.id);

return {

url: /blog/${post.id},

pageContext: { data: { post: detailPost } }

};

}));

}

```

###하이드레이션 구현

• 두 단계 훅 활용 : onRenderHtml(서버) + onRenderClient(클라이언트)
• HTML 생성 예시 :

```ts

const pageHtml = ReactDOMServer.renderToString();

const documentHtml = escapeInject ...;

```

• 클라이언트 렌더링 : useData() 훅으로 데이터 접근

결론

• Vike는 Next.js 대비 유연한 렌더링 전략 선택 및 낮은 학습 곡선 제공
• SSG 구현 시 onBeforePrerenderStart 훅을 반드시 활용
• 하이드레이션은 onRenderHtml/onRenderClient 훅을 통해 분리 구현