乐趣区

关于前端:关于-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
退出移动版