より優れたユーザーと開発者エクスペリエンスのためのnext.jsのようなReactフレームワーク
npm install vitext
vitext(Vite + next)は、より良く、より迅速なフロントエンドアプリを開発できる稲妻の高速SSG/SSRツールです。これらの主要な部分で構成されています。
開発サーバーはネイティブESモジュールを使用するため、React App Serverレンダリングとクライアントのレンダリングを30秒未満で非常に高速にレンダリングします。
Vitextは、箱から出してReact Suspense&Lazy Outをサポートしています。
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 >
) ;
} ;next.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はRequest URLのParams(SSR)で呼び出されます。
VitextはViteの建物とバンドリングアプローチを使用するため、高速で最適化された方法でコードをバンドルします。
Vitextがアプリを提供しながら同時にHTMLにエクスポートしているため、アプリのHTMLエクスポートnext export待つ必要はありません。
ESモジュール、高速コンパイル、Webワーカーは、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