search

jaredpalmer / razzle

✨ Create server-rendered universal JavaScript applications with no configuration
https://razzlejs.org
MIT License
11.1k stars 866 forks source link

Utilizing Razzle for Rendered JS (no HTML / CSS asset) #1526

Open dan-kez opened 3 years ago

dan-kez commented 3 years ago

❓Question

I'm working on a project where a JS utility is embedded on customer sites. Right now, after the JS is loaded I kick off API requests to get user settings & other bootstrap info to successfully utilize my library.

Is it possible to utilize Razzle for running a webserver that will build (transpile, bundle, etc) these JS assets live such that I can make that initial bootstrap request on the server and embed those values into the JS file?

The intent is to reduce the total number of round trip requests. Our current scale is around ~ 40k requests per second for JS assets and subsequent APIs. Reducing this by half would be very meaningful from a user experience standpoint.

Most examples I've seen for "server side rendered JS" are around using a framework such as React to generate some initial HTML to improve time to first paint. My problem is different in that I don't have HTML to serve, but rather javascript to execute with some seeded (potentially templated) variables.

Would Razzle support this? If there are other tools would be more applicable, I'd sincerely appreciate being pointed in the right direction!

fivethreeo commented 3 years ago

https://github.com/kentcdodds/babel-plugin-macros https://github.com/kentcdodds/babel-plugin-preval

fivethreeo commented 3 years ago

Maybe combine this with babel-register instead of razzle

fivethreeo commented 3 years ago

https://github.com/reactjs/server-components-demo/blob/main/server/api.server.js#L15

dan-kez commented 3 years ago

Thank you for the quick responses!

The macros are pretty interesting, my main thought is how that would play with webpack minification etc. I don't mind the initial requests being slow as they will be cached in a cdn after initial load.

Potentially I could use something like a babel macro to replace some function that would normally call my api with a static response in the minified code. That way I don't need to pay the cost of running webpack in the webserver.

I worry this may be a bit fragile but hopefully tests can help.

The other thought is to append some global to the static asset I serve e.g. const userSettings = {} as that's pretty cheap relative to rebuilding the webpack bundle. (This was an idea brought up when I asked a similar question on reddit).

To the example of using the server components I think that's pretty interesting. it wouldn't really solve the "bundling" problem (I think) but it would enable me to compile things on the fly in my first example above. I'll play around with some POCs.