react-modern-starter icon indicating copy to clipboard operation
react-modern-starter copied to clipboard

Use vite-plugin-ssr

Open brillout opened this issue 4 years ago • 7 comments

We briefly talked about it at the vite-plugin-mdx repo; AFAICT vite-plugin-ssr would actually fit your project well.

Thoughts?

brillout avatar Mar 12 '21 12:03 brillout

I tried adapting the starter to use it, but didn't had knowledge enough so the build was breaking, some tasks weren't working

thelinuxlich avatar Mar 13 '21 03:03 thelinuxlich

Oh and I got a bit confused about the filesystem autorouting, how to automatically add /resource/:id pages for example

thelinuxlich avatar Mar 13 '21 03:03 thelinuxlich

The build currently doesn't work because of https://github.com/vitejs/vite/issues/2390. I'm going to wait to see what Evan replies. If the bug is not fixed soon I'll simply use fast-glob instead of import.meta.glob() for building. A workaround right now is to link vite-plugin-ssr and Vite will pick up vite-plugin-ssr's import.meta.glob().

how to automatically add /resource/:id pages

Defining the parameter of a route in its filename is breaking the convention of not using special characters in filenames which may result in problems for certain deployment environments. It's too little of a benefit and doesn't justify breaking conventions.

About whether to use vite-plugin-ssr or not.

Using vite-plugin-ssr provides you with an SSR architecture without limiting you in any way. The problem with SSR frameworks such as Next.js is that they take away too much control from you. The most problematic part being rendering. It is notoriously difficult to integrate tools with Next.js precisely because you don't control how your pages are rendered. With vite-plugin-ssr integrating tools is simply a matter of following the official documentation of the tool you want to integrate.

While vite-plugin-ssr comes with a default routing (SSR and routing are inherently intertwined), you can actually use vite-plugin-ssr with with React Router. But the default routing should work for the vast majority of cases (and is actually simpler than React Router; thanks to SSR we can radically simplify routing).

Also, vite-plugin-ssr is a mere 1.3k LOC Vite plugin (that's a lot less than Next.js).

some tasks weren't working

There are still some rough edges here and there but I'm working on smoothing them out.

brillout avatar Mar 13 '21 12:03 brillout

But if you use React Router with vite-plugin-ssr you miss the autorouting, right?

thelinuxlich avatar Mar 13 '21 13:03 thelinuxlich

You can use React Router and vite-plugin-ssr's routing together. For example, if you have a page with tabs and you want the tabs to have their own URL, then you can use React Router for that page. Example: https://github.com/brillout/vite-plugin-ssr/tree/master/examples/react-router

Or, you can have a single page index.page.js and use React Router for everything. That works too (although you loose code splitting).

But, in general, using React Router for an SSR app doesn't bring much value. SSR with simple route strings (e.g. /resource/:id) is mostly enough and just much simpler.

Note that Next.js doesn't support React Router which shows that route strings are mostly enough.

brillout avatar Mar 13 '21 13:03 brillout

well, let's wait the Vite fix, maybe I can try again

thelinuxlich avatar Mar 13 '21 14:03 thelinuxlich

The latest vite-plugin-ssr version includes a fix. Build should now work.

brillout avatar Mar 18 '21 11:03 brillout