Designed to be pre-rendered on the server.
Hydrates only the parts you really need.
Generates bundles as small as svelte.
Server-side rendering on node and deno.
Nano JSX does not depend on any external libraries.
Nano JSX is designed to build ultra fast MPAs using JSX. It uses a different approach than other JSX libraries like React, Preact or Inferno. Instead of shipping all scripts and hydrate the whole app on the client, Nano JSX sends and hydrates only the parts that are really needed for the current page/view. Where else, the other libraries often send the scripts for multiple views, on which the user maybe never navigates to.
Because Nano JSX is designed to build MPAs it does not need a router or state management across multiple views, which reduces bundle size.
Isn't it faster to navigate using a SPA? Well, imagine a SPA blog. The navigation is not instantly. The client first has to fetch the content (maybe in a JSON file), before navigating to the next page even though all the script are already loaded. Nano JSX simply fetches (or even pre-fetches) the next page's html markup with all the content in it.
In the past, I did a lot of websites/apps using Isomorphic React (Pre-Rendering on the Server and Hydrating on the client). Once the website did load all scripts, it was very fast (not so much on mobile though). But the scripts where always way too big.
Nowadays, I prefer to Pre-Render the JSX on the server and only Hydrate the parts that are really needed. With Nano JSX, the client now only gets few kilobytes and uses much less CPU.
The library by it self is already small and fast, but in combination with its awesome capabilities, it becomes even faster.
It's designed to be pre-rendered on the server and to then be partially hydrated on the client. The client will therefore have to download and render much less code.
Not every component needs to be hydrated immediately. Lazy Hydration reduces First Input Delay (FID).
Although, the simple example below is 0.2kB bigger using nano JSX, once adding more features to your App like Event Handling, Component Lifecycle, Store or SVG support, the nano JSX application will generate a slightly smaller bundle size compared to Svelte.
The same app with preact is 4.7kB, 8.6kB with inferno and 41.7kB with react.
Nano JSX provides some useful Built-In Component, like Link, Img, Visible and Helmet and hopefully many many more in the future. All Built-In Components are as lightweight as possible and especially designed for Nano JSX.
Visit Components to learn more.
Modify here or on codepen.io.