Userland mode switching—good or bad idea?

[AaronBeaudoin]

Question / Discussion

Minimal Example

https://github.com/AaronBeaudoin/vps-issue-userland-mode

Description

This description is just copy-pasted from the repo linked above.

All of the issues I'm running into with VPS right now are things that stop working properly when I switch my .page.vue file to .page.client.vue or .page.server.vue.

• HMR doesn't work in client-only pages.
• UnoCSS doesn't work in server-only pages.
• Tailwind CSS doesn't work in client-only pages.

I don't know how to fix these issues, but I do know what I'm trying to accomplish in the first place by making pages client-only or server-only.

So, to try and remove these issues, in this example I just define all my pages as .page.vue and export a mode from my pages which I use in _default.page.server.js and _default.page.client.js to manually change the behavior.

The Downside?

The only downside I can think of is that for "server-only" pages, I'm still sending all my client JS to my page—it's just unused. Not sure how I would get around this, if at all, but considering all the issues I'm avoiding by using this approach right now, it feels like it's worth it.

My Question

Is this technique a bad practice for one reason or another? It seems pretty nice to me, but I want to know if there are any major reasons you can think of why I wouldn't want to do this; maybe due to some limitation(s) I'm not aware/haven't though of.

[brillout]

HMR doesn't work in client-only pages.

It's a Vite bug and it should be fixed there.

We can't implement a workaround each time Vite has a bug. That doesn't scale.

UnoCSS doesn't work in server-only pages.

That's probably a includeAssetsImportedByServer bug which should be fixed in vps land. (Low prio though, but I would be up for a reproduction. I already have a fix in mind.)

Tailwind CSS doesn't work in client-only pages.

That's quite a weird bug actually: I would expect that if it works in SSR then it should also work for SPA. Does Tailwind CSS work with Vite without vps? It would be surprising if Tailwind doesn't support vanilla Vite.

I'm not per se against supporting the workaround of loading unnecessary code on the server-side / client-side as an escape hatch. But I don't think the current problems justify implementing it.

Are these a blocker for an application for your employer, or is it about the deploy demo app?

[AaronBeaudoin]

Are these a blocker for an application for your employer, or is it about the deploy demo app?

This is for a work project. I'm trying to move our site to VPS from Nuxt 2. We currently use Tailwind CSS heavily for a lot of our pages so we can design more quickly than writing plain CSS. Tailwind is a must-have.

We want to be able to take advantage of all 3 rendering modes depending on the page. Our site is an ecommerce site, so versatility in rendering modes depending on the scenario is super important for us to have top performance for marketing purposes. So it's important that our CSS solution (eventually) works for all of them.

For now we can live with using SSR only so that Tailwind works, but that's not really a long-term solution. UnoCSS fits into this because it allows a lot more customization than Tailwind, and I'm very interested in some of the features it offers such as module or Vue component scoped CSS. I'm hoping that UnoCSS takes off eventually, because I think it (and atomic CSS in general) could be the future of styling for web applications.

Does Tailwind CSS work with Vite without vps?

Yes. See here. Tailwind is actually just a PostCSS plugin, so since Vite automatically processes all CSS imports through PostCSS, you just install it, initialize a config, and add it to your PostCSS config, and you're done.

So it seems that (for both Tailwind and UnoCSS) something about how VPS works causes the normal process of generating CSS classes on-demand in response to file changes to break in certain modes.

So my main interest here is just making sure VPS doesn't break atomic CSS libraries (or really any libraries) in certain rendering modes, when those libraries normally work flawlessly with plain non-SSR Vite. My experimenting is mainly around how I can ensure a consistent expectation that everything with work the same regardless of what mode is chosen for a particular page.

---

I've also been following Vite's SSR guide to experiment with my own minimal implementation for a few purposes:

• I want to better understand the parts that go into a full SSR architecture with Vite.
• I want to have an environment where I can see if SSR issues are reproducible without VPS.
• I want to investigate how viable it would be to ever built our own "low-level" SSR architecture.
• I want to try and learn enough to potentially make pull requests to VPS or Vite.

So far I can say that I have a better appreciation for all the things that VPS does automatically. The big thing that I'm scratching my head at how you do it is the process of automatically setting up a Rollup entry point for every page with filesystem routing, and rendering the entire HTML entry point in code rather than reading an HTML template from a file.

Sorry for the long comments all the time. I'm aware I can be a bit verbose. 😅

[brillout]

For Tailwind: https://github.com/brillout/vite-plugin-ssr/issues/408.

In general, everything that is a feature regression compared to Nuxt is fairly high prio.

Features beyond Nuxt are fairly low prio, including HTML-only. So feel free to play around HTML-only but expect things to break.

Beyond the Tailwind problem, let me know if there are other blockers holding you from migrating away from Nuxt.

Sorry for the long comments all the time. I'm aware I can be a bit verbose.

I like it and it's helpful as it makes me understand where you come from, enabling me to elaborate a plan and write an answer that works for you. (And it's also interesting for me as I'm curious about how vps is being used :-).)

I've also been following Vite's SSR guide to experiment with my own minimal implementation for a few purposes:

Neat. That's a great way to better understand and feel the underlying architecture.

Yes, Vite's SSR API is quite low-level. You may want to check the first versions of vps, they are more helpful because the current versions include code for all kinds of edge cases.

[brillout]

Closing as per previous comments. (But I'm not forgetting your proposal :-).)