如何预渲染Svelte组件并通过JS文件手动进行Hydration？

完全可以实现你的需求，不用依赖Vite/Rollup等构建工具，直接利用Svelte的核心编译和渲染API就能完成。

1. 服务器端渲染（SSR）生成静态HTML #

首先安装svelte核心包：

npm install svelte

写一个Node.js脚本（比如ssr-render.js），用来编译组件并生成静态HTML：

const fs = require('fs');
const svelte = require('svelte/compiler');

// 读取你的Svelte组件文件
const componentCode = fs.readFileSync('./MyComponent.svelte', 'utf8');

// 编译组件为服务器端渲染可用的代码
const { js } = svelte.compile(componentCode, {
  generate: 'ssr',
  format: 'cjs'
});

// 执行编译后的代码，拿到渲染函数
const componentModule = require('module').createRequire(__filename)({
  filename: './MyComponent.ssr.js',
  exports: {}
});
eval(js.code);
const { render } = componentModule.exports;

// 渲染组件，得到HTML和hydration所需的props数据
const { html, head, css, props } = render({ /* 传入组件需要的props */ });

// 保存生成的HTML和props数据
fs.writeFileSync('./static.html', `
<!DOCTYPE html>
<html>
<head>
  ${head}
  <style>${css.code}</style>
</head>
<body>
  <div id="app">${html}</div>
  <script>window.__SVELTE_PROPS__ = ${JSON.stringify(props)}</script>
</body>
</html>
`);

运行这个脚本就能生成包含静态HTML的static.html文件。

2. 生成客户端Hydration用的JS文件 #

再写一个Node.js脚本（比如build-hydrate.js），编译组件的客户端版本：

const fs = require('fs');
const svelte = require('svelte/compiler');

const componentCode = fs.readFileSync('./MyComponent.svelte', 'utf8');

// 编译为客户端DOM渲染（带hydration支持）的代码
const { js } = svelte.compile(componentCode, {
  generate: 'dom',
  format: 'esm',
  hydratable: true
});

// 保存为可引入的JS文件
fs.writeFileSync('./hydrate.js', js.code);

运行脚本得到hydrate.js，然后在static.html的body末尾添加引入和hydration逻辑：

<script type="module">
  import { hydrate } from './hydrate.js';
  hydrate(document.getElementById('app'), window.__SVELTE_PROPS__);
</script>

注意事项 #

• 如果组件依赖第三方库，需要手动处理依赖的打包，或用esbuild这类轻量工具辅助编译客户端代码
• 编译时可根据需求调整compile函数选项，比如添加dev: false生成生产环境代码

内容的提问来源于stack exchange，提问作者Nikolay Dyankov