對於一些小型 Web 應用程式而言，強制使用伺服器渲染(Server side render)可能會成為一種障礙。這時，[預渲染](https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering)可能是一個非常好的替代選擇。

Prerender 的一種解決方案是使用 [Preact](https://blog.logrocket.com/introduction-to-preact-a-smaller-faster-react-alternative-ad5532eb6d79) 及其自己的 CLI.

它允許您編譯所有預先選擇的路由，以便將完全填充的 HTML 檔案儲存到靜態伺服器上。這樣，就可以在不需要 Node.js 的情況下透過 Preact/React 水合(hydration)功能為使用者提供超快的體驗。

不過，需要注意的是，由於這不是伺服器渲染，因此此時沒有使用者特定的資料可以顯示，只是以靜態檔案的形式直接傳送第一個請求。因此，如果您有使用者特定的資料，需要在此處整合一個精美設計的 skeleton 來向使用者展示其資料即將到來。

![](https://img-blog.csdnimg.cn/img_convert/9567b82dc2ff0ceb21bd24ce3d747b43.png)

為了讓這種預渲染技術發揮作用，還需要有一個代理或者其他的機制將使用者重定向到正確的檔案。

其原因是，在單頁應用中，需要將所有的請求都重定向到根檔案，然後框架透過內建的路由系統將使用者重定向到相應的頁面。所以第一次頁面載入總是相同的根檔案。

為了讓預渲染解決方案發揮作用，你需要告訴你的代理某些路由需要特定的檔案，而不是總是根目錄下的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

關於 Web 應用的 Prerender 策略

相關文章