如何在服务器端渲染 Svelte？

Question

我可以使用 Svelte 生成“初始”HTML 文件吗？

我正在使用 Django、Webpack 和 Tailwindcss。我想在我的前端中使用 Svelte，但我不想放弃仅使用服务器端渲染（Django 模板）带来的速度。如果我最初展示的是一个引导 HTML 页面，它引入了 bundle.js，并且 Svelte 在客户端构建了 DOM，那么浏览器仅在加载 JS 文件后才开始下载图像。

与最初呈现的 HTML 已包含图像链接相比，浏览器开始与 JS 一起下载它们，从而加快感知页面加载速度。

我不想使用 Sapper 作为我的应用程序服务器，我想继续使用 Django。

Answer 1

挑战在于在 Django 应用程序和 Svelte 组件之间共享状态（props）。

要从组件获取 HTML 代码：

require('svelte/register')
const MyComponent = require('./MyComponent.svelte').default

const { html } = MyComponent.render({ ...props... })

如果组件没有 props，您可以编译并缓存 HTML 模板（甚至可以在运行时之前）。

如果您想动态发送 props（例如根据数据库中的数据），那么您需要在运行时执行此操作。这意味着在服务器端执行 JS。如果缓存结果，性能不会很差。

如果你不能缓存，那么使用 Django 来提高性能就会被否定，因为无论如何你都会执行 Svelte，所以不妨使用 Svelte 来完成整个服务器端工作，然后使用 Django 作为后端服务器。