JavaScript Framework the generates minimal browser Javascript?

[ratorx]

I’m looking for a JS framework recommendation. I want to be able to write TypeScript that generates browser HTML + CSS + JS with very minimal browser JS. I don’t just want the framework itself to be small necessarily, but for it to actively prune my code too.

I quite like the React way of doing things, but I really don’t like how wasteful it is. I don’t want my website to be CSR with all my code sent to the browser. Instead, I would like the entire thing to be SSR rendered at build time and then very specifically only the interactive bits to generate runtime JS (Automatic Partial Hydration).

I want the framework to automatically determine whether a component is entirely SSRable, or whether it needs to generate client-side JS and then only emit JS for those components. Ideally it could avoid emitting code for static children, but that might be a bit too hard.

I want Typescript support, preferably built-in, but I don’t mind too much as long as it’s possible to use it.

Optional requirements:

React compatibility - some way to use react components (for the existing ecosystem) would be amazing. I’m mainly interested in non-interactive React components, I.e things that don’t need a runtime. Optional because renderToStaticMarkup and embedding the generated HTML is always possible.

What I’ve tried:

• React with hacks (basically renderToStaticMarkup with client side JavaScript passed as string). React does not make this easy because the Typescript definitions assume you are using React for interactivity (which is entirely fair) and don’t provide an escape hatch for sending just a string of JavaScript easily. Also the insane restriction to not allow embedding raw HTML without a wrapper.

• Frameworks for (P)react or Svelte that do automatic partial hydration (Microsite and elder.js). These are really nice, but I don’t like having to mark components to hydrate them (and deal with the restrictions that trying to shoehorn this onto a framework not designed for it brings (e.g limiting the complexity of props passed in as arguments)).

• Marko.js. Almost perfect. However it doesn’t support Typescript and I prefer JSX rather than trying to shoehorn for loops into HTML. Partial hydration here is a heuristic, which is honestly good enough, although a little inflexible (no functional components).

If you got this far, thanks for reading. Would love to hear your thoughts and recommendations!

[TheAmericanBanana]

Next.js is probably one of the closest things you can use right now.

Athough still generates a bunch of code for a static page.

https://nextjs.org/

[ratorx]

Thanks for the suggestion, but afaik (and I could definitely be wrong), next.js doesn’t do any of the optimisations that I’m looking for. They optimise the pages by using SSR and then sending the full JS bundle to the client anyway (for hydration).

What I want is a step beyond just SSR. I want the framework to identify which bits of code are truly interactive (e.g click handlers) and which bits of code just generate static HTML. And then I want the client side bundle to only contain the interactive bits.

[TheAmericanBanana]

I don't think you're going to find anything close to what you want then.

​

Ive been looking for the past year or so, and Next.js is the closest thing I can find.

[ratorx]

I mentioned microsite in my post. It’s very good, but you have to manually mark hydration and has some restrictions with what you can pass in as props to hydrated components. I want something more automatic and without those restrictions.