Comments (4)
Thanks for the suggestions.
there could be vite-ssr preview that runs a local web server.
While this is possible, a production server normally needs more logic than just running vite-ssr
. In a typical setup, your production server will also run Express/Koa/Fastify/etc to serve your API (which can be consumed by the rendering app). This logic is completely custom and is not something that a generic local server in vite-ssr
can handle.
Apart from that, vite-ssr
is unopiniated about your production setup, meaning you can run in Express.js, in a serverless platform like Vercel/Netlify, or even in a Cloudflare Worker. All of them have enough differences that makes it hard to create a "preview" local server that fits most people (CF Workers are not even Node.js).
renderHtml (so that the end user doesn't need to deal with importing from dist folder, suppress type warnings, etc.)
Unless I'm missing something, doing import renderHtml from 'vite-ssr/server'
would need to assume there is a build step for the production server (so we can map the import to your local dist
folder and bundle it), which might not be true for some setups. That's why right now you need to import manually the built files, to make it agnostic from the platform/setup you use in production.
I agree it's not the best experience, though, and I would like to hear alternatives that improve DX but keep this library agnostic enough to be used anywhere.
For example, there's also Vitedge, which is more opinionated and takes over the build step for the server (Cloudflare Worker in this case). Therefore, it can provide easy syntax like import xxx from 'vitedge/worker'
because it controls how things are bundled in production.
createApp or something along the lines, an Express/Connect app that doesn't listen by itself but could be injected into own http server
I guess this is already answered but just to be more explicit, this might not work with every setup/platform such as Vercel (serverless functions that don't need Express.js).
I'll keep it in mind, though, and see if there's anything that can be done to improve this part π
from vite-ssr.
While this is possible, a production server normally needs more logic than just running vite-ssr. In a typical setup, your production server will also run Express/Koa/Fastify/etc to serve your API (which can be consumed by the rendering app).
Not really. You're explaining the behemoth approach, which has been long discouraged. In a typical modern setup, each HTTP service does solely its own job. One doesn't mix SSR and API server in the same process, this is an anti-pattern. So running a dedicated SSR server is a typical setup in a proper modern architecture.
If several HTTP services are to live under the same domain name (in production), one uses wrapping HTTP routers such as Kubernetes ingress rules, or - in simpler setups - nginx running in sidecar (or even the same) container.
For someone who still wants a behemoth HTTP server doing everything, I suggested lower-level createApp
API (an Express app that could be used along with Express/Koa/etc. API server).
Now then, for someone who doesn't even need a HTTP server (such as certain serverless environments), you would expose renderHtml
.
Unless I'm missing something, doing import renderHtml from 'vite-ssr/server' would need to assume there is a build step for the production server (so we can map the import to your local dist folder and bundle it), which might not be true for some setups.
Why would it need a build step? It might have one but it may live happily without it.
It could dynamically require
from process.cwd() + "/dist"
and/or use user-provided path with something like const renderHtml = createHtmlRenderer({ dist: path.resolve(__dirname, "dist") }
.
I 100% agree about being un-opinionated. However, that doesn't mean you can't expose typical reusable functions and/or runnable scripts. I don't see anything opinionated in my suggestions above, it's simply about reducing copy/paste between projects and covering the low-level logic of working with manifests.
from vite-ssr.
We can have vite-ssr preview
script like how vite preview
does. It could create a custom server with http
module in nodejs.
from vite-ssr.
@kadiryazici Yeah, I'm adding preview
to Vitedge, which wraps this package, so I will probably implement it here as well. While I'm at that, I will probably make that logic public so anyone can import it in a production Node server.
from vite-ssr.
Related Issues (20)
- manualChunks errors in version 0.17.1 HOT 1
- Cannot read property 'ssrUtils' of undefined HOT 1
- Add support for streaming
- vueuse/head version
- δΈι’ζ―ζηζ₯ιδΏ‘ζ― δΉεθΏθ½η¨η°ε¨ε°±δΈθ‘δΊ HOT 6
- vite-ssr doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix. HOT 1
- vite-ssr build runs in development mode HOT 2
- vire-ssr has unmet peer dependency warnings
- Internal server error: render is not a function HOT 1
- Error isFunction is not a function from defineComponent called from ClientOnly component. HOT 2
- Unable to request data to set header title in hook function 'onServerPrefetch', page has already completed rendering before await HOT 1
- @vueuse/head 1.x versions Rendering problem
- What should I do if the client repeatedly renders after SSR?
- How to get request headers in Vercel HOT 1
- Bug: bad SSR index.html rendering. HOT 1
- Vue on client don't start lifecycle. HOT 1
- Failed to load url __vite-optional-peer-dep:@vueuse/head:vite-ssr HOT 1
- name export commafy not found
- Does this repo support code splitting?
- Vite 5 support HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-ssr.