The Next.js like React framework for better User & Developer experience

• 💡 Instant Server Start
• 💥 Suspense support
• ⚫ Next.js like API
• 📦 Optimized Build
• 💎 Build & Export on fly
• 🚀 Lightning SSG/SSR
• ⚡ Fast HMR
• 🔑 Vite & Rollup Compatible

npm install vitext

Vitext (Vite + Next) is a lightning fast SSG/SSR tool that lets you develop better and quicker front-end apps. It consists of these major parts:

The development server uses native ES modules, So you're going to have your React app server-rendered and client rendered very fast, under a half a second for me.

Vitext supports React Suspense & Lazy out of the box.

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>
  );
};

If you're coming from a Next.js background, everything will work the same way for you. Vitext has a similar API design to Next.js.

// 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 are optional. If getPaths' running got done, then every paths item is going to be passed to a getProps function, And when the user requests for the specific page, they're going to receive the exported html (SSG). But if getPaths wasn't done or there's no exported html page for the user's request, then the getProps is going to get called with the request url's params (SSR).

Vitext uses Vite's building and bundling approach, So it bundles your code in a fast and optimized way.

You don't need to wait for HTML exports of your app because Vitext exports pages to HTML simultaneously while serving your app, So no next export.

ES modules, Fast compiles and Web workers empower the Vitext SSR/SSG strategy, so you'll have an astonishingly fast SSR/SSG.

Vitext uses @vitejs/plugin-react-refresh under the hood, So you have a fast HMR right here.

We can call Vitext a superset of Vite; It means that Vitext supports everything Vite supports with vitext.config.js.

// exact Vite's config API 
export default {
  plugins: [...],
  optimizeDeps: {...},
  ...
};

You can checkout packages/examples directory to see examples that have been implemented using vitext.

We're in the early stages now, So we need your help on Vitext; please try things out, recommend new features, and issue stuff. You can also check out the issues to see if you can work on some.

MIT