大家好，很高興又見面了，我是"進階前端‬進階‬"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支援是我不斷創作的動力。

今天給大家帶來的主題是Nano JSX、即體積隻有 1KB 的SSR 優先的輕量級JSX 庫。建議大家提前閱讀我以前釋出的關于SSR的相關文章，下面是部分文章的傳送門：

《 SSR 的更新版：流式服務端渲染原理！》
《 Astro 2.x大火！深入混合渲染原理與5+新特性！》
《 Builder.io 赢了！Qwik可恢複性與 SSR 的較量！》
《 React SSR前世今生！探索 SSR 技術前沿！》

話不多說，直接進入正題！

什麼是 Nano JSX

Nano JSX 是 SSR 優先、超輕量級、體積隻有 1kB 的 JSX 庫，通過 TypeScript 編寫，适用于 MPA 多頁和 SPA 單頁應用程式。

Nano JSX 使用與其他 JSX 庫，如： React、Preact 或 Inferno 完全不同的方法。Nano JSX 非常接近原生 DOM，無虛拟 DOM 實作，開發者可以根據需要自由操作 DOM。甚至可以在元件内調用 Nano.render()，然後渲染一些 JSX 代碼來管理應用程式的某一部分。

同時，開發者可以完全控制用戶端和伺服器渲染内容，所有元件均設計為 100% 同構工作。例如：内置 Router 元件的 api 在用戶端和伺服器端的工作方式相同。

Nano JSX 是用 TypeScript 編寫的，對于 Node.js，它導出為 JavaScript (cjs)，對于 Deno，則使用 denoify.land。

友善大家更好的了解，Nano JSX 的諸多特性可以概括為以下幾點：

沒有虛拟 Dom：隻是純粹且快速的 JavaScript 渲染
SSR 優先：設計為在伺服器上預渲染、服務端渲染開箱即用、使用非常簡單
部分水合：僅水合真正需要的部分
超輕量級：生成的 bundle 體積和 svelte 一樣小、Gzip 壓縮後體積隻有 ~1KB
支援 Node & Deno：支援 Node 和 deno 環境的伺服器端渲染。
幹淨的代碼：Nano JSX 不依賴于任何外部庫（也可以使用标記模闆而非 JSX）、支援 CSS in JS 樣式方案
支援路由同構：路由同時适用于用戶端和伺服器端
支援自定義元素模式：開發者可以使用 DefineAsCustomElements 将使用 Nano JSX 編寫的元件定義為 Web Component，進而實作開發非常輕量級的 Web Component。
其他：支援 React 架構中常用的 Props, Ref, Context API 和 Events 等等、支援 inline SVG、支援使用内置的 Link 元件實作 Prefetch

目前 Nano JSX 在 Github 上通過 MIT 協定開源，有超過 1.3k 的 star、是一個值得關注的前端開源項目。

使用 Nano JSX

服務端渲染

下面是 Nano JSX 在 Node.js 環境中的服務端渲染示例。

import Nano from 'nano-jsx'
import { Helmet } from 'nano-jsx'
const App = () => (
  <div>
    <Helmet>
      <html lang="en" amp />
      <title>Nano JSX SSR</title>
      <meta name="description" content="Server Side Rendered Nano JSX Application" />
    </Helmet>

    <Helmet footer>
      <script src="/scripts.js"></script>
    </Helmet>

    <h1>Hello nano!</h1>
  </div>
)
const app = Nano.renderSSR(<App />)
const { body, head, footer, attributes } = Helmet.SSR(app)
const html = `
<!DOCTYPE html>
<html ${attributes.html.toString()}>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ${head.join('\n')}
  </head>
  <body ${attributes.body.toString()}>
    ${body}
    ${footer.join('\n')}
  </body>
</html>

如果是 Deno 環境，隻需要修改引入的方式即可：

import * as Nano from "https://deno.land/x/nano_jsx/mod.ts";
const { Helmet } = Nano;

部分水合（Partial Hydration）

Nano JSX 庫本身體積已經很小而且速度飛快，但結合部分水合的強大功能，還能變得更快。

Nano JSX 被設計為在伺服器上預渲染，然後在用戶端上部分水合。是以，用戶端将需要下載下傳和渲染更少的代碼。

App>
  <Header>
    <Logo />
    <Navigation />
  <Header>
  <Main>
    <Content />
    <Comments />
  <Main />
</App>
// 在伺服器上渲染應用程式
renderSSR(<App />)
// 僅發送和補水客戶需要的内容
hydrate(<Navigation />)
hydrate(<Comments />)

懶惰補水(Lazy Hydration)

并非所有成分都需要立即水合，延遲水合可減少首次輸入延遲 (FID)。比如下面的代碼示例：

// 不要預渲染 Comments
<Comments noSSR />;
// 滾動到評論區就會被水合
hydrateLazy(<Comments />);

Svelte 與 Nano JSX

下面的簡單示例使用 Nano JSX 增大了 0.2kB，但随着向應用程式添加更多功能，例如：事件處理、元件生命周期、存儲或 SVG 支援，Nano JSX 應用程式将生成比 Svelte 稍小的包大小。

相同的應用程式使用 preact 時為 4.7kB，使用 inferno 時為 8.6kB，使用 React 時為 41.7kB。下面是 Svelte 的示例代碼：

// App.svelte
<script>
  export let name;
</script>
<h1>Hello {name}!</h1>
// main.js
import App from './App.svelte';
const app = new App({
  target: document.body,
  props: {
    name: 'world'
  }
});
export default app;
// 1.7kB (gzip)

下面是 Nano JSX 的代碼：

// App.tsx
import Nano from "nano-jsx";
const App = (props) => <h1>Hello {props.name}!</h1>;
Nano.render(<App name="world" />, document.body);
// 1.9kB (gzip)

内置元件

Nano JSX 提供了一些有用的内置元件，例如： Link、Img、Visible 和 Helmet，将來還會有更多元件可用。所有内置元件都盡可能輕量級，并且專為 Nano JSX 設計。

比如下面是懶加載圖檔元件的用法：

import { Img } from 'nano-jsx/lib/components/img'
// 懶加載圖檔
<Img src="imageURL" />

// 不懶加載圖檔
<Img src="imageURL" lazy={false} />

// 延遲加載圖像，加載時顯示藍色框
<div style={{width:'100px', height:'100px', backgroundColor: 'blue'}}>
  <Img height="100" src="imageURL" />
</div>

// 延遲加載帶有占位符圖像的圖像
<Img src="imageURL" placeholder="placeholderURL" />

// 延遲加載帶有占位符元件的圖像
<Img src="imageURL" placeholder={Placeholder} />

本文總結

本文主要和大家介紹 Nano JSX、即體積隻有 1KB 的SSR 優先的輕量級JSX 庫，通過 TypeScript 編寫，适用于 MPA 多頁和 SPA 單頁應用程式。相信通過本文的閱讀，大家對 Nano JSX 會有一個初步的了解，同時也會有自己的看法。

因為篇幅有限，文章并沒有過多展開，如果有興趣，可以在我的首頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最後，歡迎大家點贊、評論、轉發、收藏！

參考資料

https://github.com/Nano JSX/nano

https://nanojsx.io/components.html

Nano JSX：SSR 優先的輕量級 1kB JSX 庫！