vitext
v0.0.3
더 나은 사용자 및 개발자 경험을위한 React Framework와 같은 Next.js
npm install vitext
Vitext (Vite + Next)는 더 나은 프론트 엔드 앱을 개발할 수있는 번개 빠른 SSG/SSR 도구입니다. 이 주요 부분으로 구성됩니다.
개발 서버는 기본 ES 모듈을 사용하므로 React App Server Rendered와 클라이언트가 0.5 초 안에 매우 빠르게 렌더링되도록합니다.
Vitext는 상자 밖에서 React Sustense & Lazy를 지원합니다.
import { lazy , Suspense } from 'react' ;
const Component = lazy ( ( ) => import ( '../components/Component' ) ) ;
const Loading = ( ) => < p > Loading the Component < / p>;
const App = ( ) => {
return (
< Suspense fallback = { < Loading / > } >
< Component / >
< / Suspense >
) ;
} ;JS 배경에서 온다면 모든 것이 같은 방식으로 작동합니다. Vitext는 Next.js와 유사한 API 디자인을 가지고 있습니다.
// pages/Page/[id].jsx
const Page = ( { id } ) => {
return < div > { id } < / div>;
} ;
// build time + request time (SSG/SSR/ISR)
export function getProps ( { req , res , query , params } ) {
// props for `Page` component
return { props : { id : params . id } } ;
}
// build time (SSG)
export async function getPaths ( ) {
// an array of { params: ... }, which every `params` goes to `getProps`
return {
paths : [ { id : 1 } ] ,
} ;
}
export default IndexPage ;
getPaths&getProps는 선택 사항입니다.getPaths의 실행이 완료되면 모든paths항목이getProps함수로 전달되며 사용자가 특정 페이지를 요청하면 내보낸 HTML (SSG)을 받게됩니다. 그러나getPaths완료되지 않았거나 사용자의 요청에 대한 내보내기 HTML 페이지가 없으면getProps요청 URL의 PARAMS (SSR)와 함께 호출됩니다.
Vitext는 Vite의 건물 및 번들링 방식을 사용하므로 빠르고 최적화 된 방식으로 코드를 묶습니다.
vitext는 앱을 제공하는 동안 페이지를 동시에 HTML로 내보내기 때문에 앱의 HTML 내보내기를 기다릴 필요가 없습니다. next export 없습니다.
ES 모듈, 빠른 컴파일 및 웹 워커는 Vitext SSR/SSG 전략에 권한을 부여하므로 놀랍도록 빠른 SSR/SSG가 있습니다.
vitext는 후드 아래에서 @vitejs/plugin-react-refresh를 사용하므로 여기에 빠른 HMR이 있습니다.
우리는 vitext를 vite의 슈퍼 세트라고 부를 수 있습니다. 그것은 vitext가 vitext.config.js 사용하여 Vite가 지원하는 모든 것을 지원한다는 것을 의미합니다.
// exact Vite's config API
export default {
plugins : [ ... ] ,
optimizeDeps : { ... } ,
...
} ; Vitext를 사용하여 구현 된 예제를 확인하려면 패키지/예제 디렉토리를 확인할 수 있습니다.
우리는 지금 초기 단계에 있으므로 vitext에 대한 귀하의 도움이 필요합니다. 일을 시도하고 새로운 기능을 추천하며 물건을 발행하십시오. 문제를 확인하여 일부 작업을 수행 할 수 있는지 확인할 수도 있습니다.
MIT
