关于 Web 应用的 Prerender 策略

对于一些小型 Web 应用程序而言，强制使用服务器渲染(Server side render)可能会成为一种障碍。这时，预渲染可能是一个非常好的替代选择。

Prerender 的一种解决方案是使用 Preact 及其自己的 CLI.

它允许您编译所有预先选择的路由，以便将完全填充的 HTML 文件存储到静态服务器上。这样，就可以在不需要 Node.js 的情况下通过 Preact/React 水合(hydration)功能为用户提供超快的体验。

不过，需要注意的是，由于这不是服务器渲染，因此此时没有用户特定的数据可以显示，只是以静态文件的形式直接发送第一个请求。因此，如果您有用户特定的数据，需要在此处集成一个精美设计的 skeleton 来向用户展示其数据即将到来。

为了让这种预渲染技术发挥作用，还需要有一个代理或者其他的机制将用户重定向到正确的文件。

其原因是，在单页应用中，需要将所有的请求都重定向到根文件，然后框架通过内置的路由系统将用户重定向到相应的页面。所以第一次页面加载总是相同的根文件。

为了让预渲染解决方案发挥作用，你需要告诉你的代理某些路由需要特定的文件，而不是总是根目录下的index.html文件。

例如，假设你有四个路由（/、/about、/jobs 和/blog），它们都有不同的布局。你需要四个不同的HTML文件来向用户传递骨架，然后让React/Preact等重构它并填充数据。因此，如果你将所有这些路由都重定向到根目录下的index.html文件，页面在加载时会感觉很不好，用户会看到错误页面的骨架，直到它完成加载并替换布局。例如，用户可能会看到只有一个列的主页骨架，而他们请求的是一个像 Pinterest 一样的画廊页面。

解决方案是告诉代理这四个路由每个都需要一个特定的文件：

• https://my-website.com → Redirect to the root index.html file
• https://my-website.com/about → Redirect to the /about/index.html file
• https://my-website.com/jobs → Redirect to the /jobs/index.html file
• https://my-website.com/blog → Redirect to the /blog/index.html file