{"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页面，也可以使用自定义的