{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Aleph.js是"},{"type":"link","attrs":{"href":"https:\/\/deno.land\/x\/[email protected]","title":"","type":null},"content":[{"type":"text","text":"基於Deno的React框架"}]},{"type":"text","text":"，用於服務器端渲染應用程序，現在發佈了"},{"type":"link","attrs":{"href":"https:\/\/github.com\/alephjs\/aleph.js","title":"","type":null},"content":[{"type":"text","text":"Alpha版"}]},{"type":"text","text":"。Aleph讓"},{"type":"link","attrs":{"href":"https:\/\/nextjs.org\/","title":"","type":null},"content":[{"type":"text","text":"Next.js"}]},{"type":"text","text":"的很多核心特性在Deno環境中可用：零配置的服務器端渲染、靜態站點生成、文件系統和API路由，等等。Aleph使用標準的EcmaScript模塊(ESM)import語法，在開發環境中不使用打包器。Aleph還藉助"},{"type":"link","attrs":{"href":"https:\/\/www.npmjs.com\/package\/react-refresh","title":"","type":null},"content":[{"type":"text","text":"react-refresh"}]},{"type":"text","text":"提供了模塊熱替換。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Aleph.js深受Next.js的啓發，後者自稱是一個生產就緒的React框架。與Next.js一樣，Aleph提供了高效的特性，爲開發者提供了更好的體驗。Alpha版的Aleph提供了基於頁面的路由系統(支持動態路由)、API路由、基於路由的國際化支持、靜態站點生成、默認預渲染(具有可配置的服務器端渲染)、客戶端路由、CSS和Sass支持，以及react-refresh支持。在開發Web應用程序時，開發人員將使用一組頁面和API，每個頁面都用一個React組件實現。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與Next.js不一樣的是，Aleph是基於Deno的。Deno是Node.js的替代品，旨在彌補Node的缺點。Deno在今年早些時候發佈了它的第一個主要版本，開箱即用地支持TypeScript。Deno有一個更嚴格的安全模型，不允許任何文件、網絡或環境訪問，除非顯式地啓用。Deno不使用package.json文件、node_modules目錄或CommonJS模塊。相反，Deno採用EcmaScript模塊(ESM)，並將依賴項作爲URL導入。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Aleph的文檔解釋了使用Deno模塊的一個生產力優勢："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每個模塊只需要編譯一次，然後緩存到磁盤上。當模塊發生變化時，只需重新編譯該模塊，重新打包不會浪費時間。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面是Aleph的一個簡單例子："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import React from \"https:\/\/esm.sh\/[email protected]\"\nimport Logo from \"..\/components\/logo.tsx\"\nexport default function Home() {\n return (\n \n Hello World!\n \n )\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Aleph通過放在應用程序根目錄的"},{"type":"link","attrs":{"href":"https:\/\/alephjs.org\/docs\/basic-features\/import-maps","title":"","type":null},"content":[{"type":"text","text":"import_map.json文件"}]},{"type":"text","text":"來支持"},{"type":"link","attrs":{"href":"https:\/\/github.com\/WICG\/import-maps","title":"","type":null},"content":[{"type":"text","text":"導入映射"}]},{"type":"text","text":"。導入映射是"},{"type":"link","attrs":{"href":"https:\/\/wicg.io\/","title":"","type":null},"content":[{"type":"text","text":"Web Incubator Community Group"}]},{"type":"text","text":"(WICG)提出的一個建議，可用解析原始導入標識符。有了導入映射，Aleph可以將從import React from \"react\"替換爲import React from “"},{"type":"link","attrs":{"href":"https:\/\/esm.sh\/[email protected]","title":"","type":null},"content":[{"type":"text","text":"https:\/\/esm.sh\/[email protected]"}]},{"type":"text","text":"”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在開發過程中，Aleph.js需要現代瀏覽器來支持"},{"type":"link","attrs":{"href":"https:\/\/caniuse.com\/#feat=es6-module","title":"","type":null},"content":[{"type":"text","text":"ESM模塊"}]},{"type":"text","text":"和動態導入。現代瀏覽器包括Chrome（>=61）、Edge（>=16）、Firefox（>=60）、Safari（>=11）和Opera（>=48）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發人員可以使用Deno運行時"},{"type":"link","attrs":{"href":"https:\/\/alephjs.org\/docs\/advanced-features\/use-deno-hook","title":"","type":null},"content":[{"type":"text","text":"在構建時計算數據"}]},{"type":"text","text":"，並將數據傳遞給頁面。一些框架，如"},{"type":"link","attrs":{"href":"https:\/\/dojo.io\/learn\/building\/buildtime-rendering","title":"","type":null},"content":[{"type":"text","text":"Dojo"}]},{"type":"text","text":"，將這種方法稱爲構建時渲染。Next.js提供了"},{"type":"link","attrs":{"href":"https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#getstaticprops-static-generation","title":"","type":null},"content":[{"type":"text","text":"getStaticProps"}]},{"type":"text","text":"和"},{"type":"link","attrs":{"href":"https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#getserversideprops-server-side-rendering","title":"","type":null},"content":[{"type":"text","text":"getServerSideProps"}]},{"type":"text","text":"方法，用於在構建時或發送請求時獲取數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發人員可以"},{"type":"link","attrs":{"href":"https:\/\/alephjs.org\/docs\/advanced-features\/custom-404-page","title":"","type":null},"content":[{"type":"text","text":"定製"}]},{"type":"text","text":"404頁面，也可以使用自定義的