What

Nano JSX is designed to build ultra fast MPAs and SPAs using JSX. It uses a different approach than other JSX libraries like React, Preact or Inferno.

Nano JSX is really close to the DOM. There is no Virtual DOM and you can manipulate the DOM as you want. You can even call Nano.render() inside a Component, which then renders some JSX code to manage another part of your app.

You have full control over what the client and what the server renders. All Components are designed to work 100% isomorphic.
For example, the api of the built-in Router Component works the same way Client-Side and Server-Side.

Nano JSX is written in TypeScript. For Node.js it is exported to JavaScript (cjs) and for Deno I use denoify.land.

Why
(and how I do 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 were 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. I personally include inline styles to make the first paint as fast as possible (The styles I include are only for the current view). So, the client fetches only two necessary files index.html and bundle.js. The page is visually finished after loading the index.html file and then only fetches few kilobytes of JavaScript with the second request. Ultra fast first contentful paint (FCP) and no render blocking code.

Instead of navigating to the next page with a client-side router (which is also possible), I prefetch the pages that the user will most likely navigate to next.

For a huge app, I still use client-side React and Redux. But for everything else, like website, blog, online shop small to medium sized apps and even some mobile apps, I now use Nano JSX.

Some of you might remember the old days of React when Class Components managed all states and functional Components did only render JSX Elements. That's the approach I like and use. I find it much more clear to read and write.

How

Watch this awesome YouTube Tutorial Series .

Partial Hydration

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.

loading...

Lazy Hydration

Not every component needs to be hydrated immediately. Lazy Hydration reduces First Input Delay (FID).

loading...

Built-In Component

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.