The "renderer" folder #664

cysabi · 2023-02-23T01:18:28Z

cysabi
Feb 23, 2023

For context, my goal is to have as close to a vanilla vite app as possible, the only change i'm trying to do is get the output of vite build to be pre-rendered.

I thought this plugin would be an easy drop-in solution, but it turned out to be a little bit more complicated than that. Although I already had a vite app running already, I had to move a lot of code from all of my entry files into different uniquely named files in the "renderer" folder.

The biggest difficulty was the index.html as this plugin moves that into a string template literal inside of a js file. I'm not a fan of this, since aside from the obvious no syntax highlighting, one of my favorite things about vite is that it gives you access to the raw entry file, without any weird workarounds.

Is there a reason this plugin chose to abstract away the entry html file, and then create it's own renderer/ folder with a bunch of named files like _default.page.client.jsx, instead of just leaning on existing vite defaults and conventions?

I assume there must be a good reason, but it really makes it difficult to use this library as a simple drop-in plugin.

Answered by brillout

Feb 23, 2023

How do you inject dynamic values into index.html? Most SSR apps need that.

// With VPS you can simply use a string template:
`<title>${someDynamicallyGenerateTitle}</title>`

Besides the file names, where do you see the difference between renderer/_default.page.server.js/renderer/_default.page.client.js and entry-server.js/entry-client.js?

View full answer

brillout · 2023-02-23T12:08:10Z

brillout
Feb 23, 2023
Maintainer

How do you inject dynamic values into index.html? Most SSR apps need that.

// With VPS you can simply use a string template:
`<title>${someDynamicallyGenerateTitle}</title>`

Besides the file names, where do you see the difference between renderer/_default.page.server.js/renderer/_default.page.client.js and entry-server.js/entry-client.js?

1 reply

cysabi Feb 24, 2023
Author

There's no difference of course! It just goes against vite conventions, which i'm curious to know why.

for the index.html file, that makes sense! but I hope there's an alternative way to solve that problem that lets me keep my index.html file, and follows the rules of vite conventions, with the 

strlns · 2023-03-14T15:04:46Z

strlns
Mar 14, 2023

Curious about this too.
Not meaning to criticize, plain SSG with Vite turned out to be more difficult than I thought, too :D

It was a good (although also time-consuming) exercise to try and compare this to the approach here:
https://ogzhanolguncu.com/blog/react-ssr-ssg-from-scratch

I ultimately failed at hydration errors and problems with many features of react-router there, so I am happy to be able to use this plugin instead.

As long as Vite does not support SSG out of the box, I guess I'll stick with this plugin, minimal idiosyncrasies ignored.

Edit:
After thankfully having a spare day to play with this, I just have to pull my hat!
This is really great, I had to change my mental model in some places to adapt to this library, but the promise "Build your own framework" is really not overblown at all.

At the same time, SSR and SSG work out of the box, exactly how I wanted them to.
Thank you for maintaining this library!

TL;DR:

Maybe the need for the renderer folder could be explained in short here, in addition to the links to the example projects?
https://vite-plugin-ssr.com/add

I'm also wondering if the usePageContext-Hook and the Link-component could be extracted into something like a react-specific package?

5 replies

brillout Mar 14, 2023
Maintainer

Is there a particular advantage of the template string approach compared to replacing a HTML comment as mentioned in the Vite docs?

I find injecting variables into a JavaScript string both simpler and easier than creating bunch of HTML macros.

I'm also wondering if the usePageContext-Hook and the Link-component could be extracted into something like a react-specific package?

That's the goal, see for example https://github.com/brillout/vite-plugin-ssr/tree/main/examples/stem-react.

I can write the head-Tag using JSX and TypeScript like in next.js

That's actually something I want to add to Stem React.

strlns Mar 14, 2023

Thanks for the heads up! There were some misunderstandings in my initial comment which I tried to correct, sorry for having removed the question that you now replied to.
E.g., I only skimmed the section about <head> in the documentation.

During the day I have grown to like your template string approach as opposed to Vite's original HTML macro things while building on your react-full example. 👍
This allowed me to easily extend the template and build in custom logic for meta tags, for example.
Also it was a breeze to generalize and extend the getDocumentProps approach from the example.

Really nice.

I'll keep an eye on Stem React.

Keep up the great work, this plugins feels like having discovered a hidden gem, very useful. 🚀

brillout Mar 14, 2023
Maintainer

I appreciate your kind words.

Btw. if your company is up for sponsoring (https://github.com/sponsors/brillout) that would be wonderful.

Keep up the great work, this plugins feels like having discovered a hidden gem, very useful. 🚀

So that we can bring VPS to the next-level 🚀.

🙂

strlns Mar 15, 2023

Unfortunately, my current project is just my personal website as I'm forced to take a break from work due to an injury.

Long story short, tight budget, tried to donate 2 bucks via Paypal but need to try the Debit card option.
You'll see me as a sponsor in the future but only with small bucks.
Am about to switch jobs soon, at my current job there's only light client-side JS without any SSG or SSR :)

brillout Mar 15, 2023
Maintainer

I appreciate the intention 💚 and no worries if you skip the small bucks.

switch jobs soon, at my current job there's only light client-side JS without any SSG or SSR :)

Maybe that new job will entail some SSR :-).

injury

Get well soon.

strlns · 2023-03-16T09:44:03Z

strlns
Mar 16, 2023

Thank you for the kind words and also for your quick reactions! Dream of a project maintainer 👍

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The "renderer" folder #664

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

The "renderer" folder #664

cysabi Feb 23, 2023

Replies: 3 comments · 6 replies

brillout Feb 23, 2023 Maintainer

cysabi Feb 24, 2023 Author

strlns Mar 14, 2023

brillout Mar 14, 2023 Maintainer

strlns Mar 14, 2023

brillout Mar 14, 2023 Maintainer

strlns Mar 15, 2023

brillout Mar 15, 2023 Maintainer

strlns Mar 16, 2023

cysabi
Feb 23, 2023

Replies: 3 comments 6 replies

brillout
Feb 23, 2023
Maintainer

cysabi Feb 24, 2023
Author

strlns
Mar 14, 2023

brillout Mar 14, 2023
Maintainer

brillout Mar 14, 2023
Maintainer

brillout Mar 15, 2023
Maintainer

strlns
Mar 16, 2023