Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

总结第一部分:客户端渲染

到目前为止,我们编写的所有内容几乎完全在浏览器中渲染。当我们使用Trunk创建应用程序时,它使用本地开发服务器提供服务。如果您为生产构建并部署它,它由您使用的任何服务器或CDN提供服务。在任何一种情况下,提供的都是一个HTML页面,其中包含

  1. 您的Leptos应用程序的URL,它已编译为WebAssembly(WASM)
  2. 用于初始化此WASM blob的JavaScript的URL
  3. 一个空的<body>元素

当JS和WASM加载完成后,Leptos将把您的应用程序渲染到<body>中。这意味着在JS/WASM加载并运行之前,屏幕上不会出现任何内容。这有一些缺点:

  1. 它增加了加载时间,因为用户的屏幕在下载额外资源之前是空白的。
  2. 对SEO不利,因为加载时间更长,您提供的HTML没有有意义的内容。
  3. 对于由于某种原因JS/WASM无法加载的用户来说是有问题的(例如,他们在火车上,在WASM完成加载之前刚好进入隧道;他们使用不支持WASM的较旧设备;他们由于某种原因关闭了JavaScript或WASM等)。

这些缺点适用于整个Web生态系统,但特别适用于WASM应用程序。

但是,根据您项目的要求,您可能对这些限制没有问题。

如果您只想部署客户端渲染网站,请跳到"部署"章节 - 在那里,您将找到如何最好地部署Leptos CSR站点的说明。

但是,如果您想在index.html页面中返回的不仅仅是空的<body>标签,该怎么办?使用"服务器端渲染"!

关于这个主题可以(并且可能已经)写整本书,但在其核心,它真的很简单:与其返回空的<body>标签,使用SSR,您将返回一个反映应用程序或站点实际起始状态的初始HTML页面,以便在JS/WASM加载期间,直到它们加载完成,用户可以访问纯HTML版本。

本书的第2部分,关于Leptos SSR,将详细介绍这个主题!