Vite + SSR = :zap: Zipe :heart:
Vite but prerender
⚠️ EXPERIMENTAL - Currently only supporting render entry file, no special SSR handling, that will be in the works for the next versions
vite is "fast"⚡ but how fast can it render on the server?
zipewill compile the components on the fly and cache them, if the component change it will refresh the cache, making it super quick to render.
The HMR is the same as
viteso no more page reloads, only the changed component updates.
buildsupport for now
router
vue-router
web_modulesnot supported on the server side, it will try to import by
name. eg:
import('lodash')
vue-routersupport (some limitations, for example adding new routes on the fly and such)
source-mapscurrently source maps don't exist, may need help here.
lifecycle hookswith composition-api
SPAand
static
HMRand some dev cache features to be able to run this in a server
# install with yarn yarn add zipeinstall with npm
npm install zipe
Create a plugin and provide the entry file for the SSR
const { createViteSSR } = require("zipe"); const { createServer } = require("vite");const SSR = createViteSSR(({ app, zipeSSR }) => { app.use(async (ctx, next) => { if (ctx.path === "/") { // return the HTML ctx.body = await zipeSSR("/App.vue"); // component path relative to root return; } if (ctx.path === "/output") { ctx.body = await zipeSSR("/views/Test.vue"); return; }
await next();
}); });
createServer({ plugins: [SSR], }).listen(4242);
git clone https://github.com/pikax/zipecd zipe
yarn
yarn dev & yarn playground
edit /App.vue
or go to src/_playground.ts and change