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

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

Wrapping Up Part 1: Client-Side Rendering

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

So far, everything we’ve written has been rendered almost entirely in the browser. When we create an app using Trunk, it’s served using a local development server. If you build it for production and deploy it, it’s served by whatever server or CDN you’re using. In either case, what’s served is an HTML page with

  1. 你的 Leptos 应用的 URL，它已被编译为 WebAssembly (WASM)
  2. the URL of your Leptos app, which has been compiled to WebAssembly (WASM)
  3. 用于初始化此 WASM 二进制块（blob）的 JavaScript 的 URL
  4. the URL of the JavaScript used to initialize this WASM blob
  5. 一个空的 <body> 元素
  6. an empty <body> element

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

When the JS and WASM have loaded, Leptos will render your app into the <body>. This means that nothing appears on the screen until JS/WASM have loaded and run. This has some drawbacks:

  1. 它增加了加载时间，因为在下载完额外资源之前，用户的屏幕是空白的。
  2. It increases load time, as your user’s screen is blank until additional resources have been downloaded.
  3. 它不利于 SEO，因为加载时间更长，且你提供的 HTML 没有实质性内容。
  4. It’s bad for SEO, as load times are longer and the HTML you serve has no meaningful content.
  5. 对于由于某种原因（例如，他们正在火车上，在 WASM 加载完成前进入了隧道；他们使用的是不支持 WASM 的旧设备；他们由于某种原因关闭了 JavaScript 或 WASM 等）无法加载 JS/WASM 的用户来说，应用是失效的。
  6. It’s broken for users for whom JS/WASM don’t load for some reason (e.g., they’re on a train and just went into a tunnel before WASM finished loading; they’re using an older device that doesn’t support WASM; they have JavaScript or WASM turned off for some reason; etc.)

这些缺点存在于整个 Web 生态系统中，对于 WASM 应用尤为突出。

These downsides apply across the web ecosystem, but especially to WASM apps.

然而，根据你项目的需求，你可能可以接受这些限制。

However, depending on the requirements of your project, you may be fine with these limitations.

如果你只想部署你的客户端渲染（CSR）网站，请跳至 “部署 (Deployment)” 章节——在那里，你会找到关于如何最好地部署 Leptos CSR 站点的指导。

If you just want to deploy your Client-Side Rendered website, skip ahead to the chapter on "Deployment" - there, you'll find directions on how best to deploy your Leptos CSR site.

但是，如果你想在 index.html 页面中返回不仅仅是一个空的 <body> 标签，该怎么办呢？请使用“服务端渲染（Server-Side Rendering）”！

But what do you do if you want to return more than just an empty <body> tag in your index.html page? Use “Server-Side Rendering”!

关于这个话题可以写（而且可能已经写了）整本书，但其核心其实非常简单：SSR 不再返回一个空的 <body> 标签，而是返回一个反映应用或网站实际初始状态的初始 HTML 页面，这样在 JS/WASM 加载期间以及加载完成之前，用户都可以访问纯 HTML 版本。

Whole books could be (and probably have been) written about this topic, but at its core, it’s really simple: rather than returning an empty <body> tag, with SSR, you'll return an initial HTML page that reflects the actual starting state of your app or site, so that while JS/WASM are loading, and until they load, the user can access the plain HTML version.

本书的第二部分关于 Leptos SSR，将详细介绍这个主题！

Part 2 of this book, on Leptos SSR, will cover this topic in some detail!