总结第一部分:客户端渲染
到目前为止,我们编写的所有内容几乎完全在浏览器中渲染。当我们使用Trunk创建应用程序时,它使用本地开发服务器提供服务。如果您为生产构建并部署它,它由您使用的任何服务器或CDN提供服务。在任何一种情况下,提供的都是一个HTML页面,其中包含
- 您的Leptos应用程序的URL,它已编译为WebAssembly(WASM)
- 用于初始化此WASM blob的JavaScript的URL
- 一个空的
<body>元素
当JS和WASM加载完成后,Leptos将把您的应用程序渲染到<body>中。这意味着在JS/WASM加载并运行之前,屏幕上不会出现任何内容。这有一些缺点:
- 它增加了加载时间,因为用户的屏幕在下载额外资源之前是空白的。
- 对SEO不利,因为加载时间更长,您提供的HTML没有有意义的内容。
- 对于由于某种原因JS/WASM无法加载的用户来说是有问题的(例如,他们在火车上,在WASM完成加载之前刚好进入隧道;他们使用不支持WASM的较旧设备;他们由于某种原因关闭了JavaScript或WASM等)。
这些缺点适用于整个Web生态系统,但特别适用于WASM应用程序。
但是,根据您项目的要求,您可能对这些限制没有问题。
如果您只想部署客户端渲染网站,请跳到"部署"章节 - 在那里,您将找到如何最好地部署Leptos CSR站点的说明。
但是,如果您想在index.html页面中返回的不仅仅是空的<body>标签,该怎么办?使用"服务器端渲染"!
关于这个主题可以(并且可能已经)写整本书,但在其核心,它真的很简单:与其返回空的<body>标签,使用SSR,您将返回一个反映应用程序或站点实际起始状态的初始HTML页面,以便在JS/WASM加载期间,直到它们加载完成,用户可以访问纯HTML版本。
本书的第2部分,关于Leptos SSR,将详细介绍这个主题!