Prerender: 基於Node.js的預渲染解決方案

一、Prerendered

Prerendered是一種在服務器端預先渲染HTML，並將該HTML轉發到客戶端的技術，以增加效率和提高搜索引擎優化（SEO）的效果。Prerendered主要應用於像單頁面應用程序（SPA）這樣展示與交互十分重要的網站，或是SEO對頁面渲染質量和速度的要求很高的網站。

與傳統SPA不同，Prerendered不是在加載網頁時才加載出HTML和JS等內容，而是在Node.js服務器上預先渲染好HTML，並將渲染結果返回給客戶端。這種技術可以大大提高用戶體驗和SEO的質量，因為頁面快速加載的同時，那些搜索引擎爬蟲也可以在不需要執行JavaScript的情況下渲染頁面。

二、Prerender-spa-plugin

prerender-spa-plugin是一個用於Webpack的插件，可以將Vue.js、React、Angular或其他SPA應用程序預渲染為HTML，並支持類似跨站點的表單提交（CORS）和自定義URL。這個插件的目的就是幫助我們優化單頁面應用的SEO，同時也可以提高頁面的首次加載時間。

使用prerender-spa-plugin需要在webpack.config.js文件中聲明插件，並設置相應的選項，例如設置入口文件、編譯路徑和輸出路徑等。

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const path = require('path')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/', '/about', '/contact'],
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
  }
}

三、Prerender翻譯

Prerender作為一個技術術語，可以翻譯為“預先渲染”或“靜態渲染”。這是一個在前端開發中常用的概念，用於優化搜索引擎優化（SEO）和首次加載速度。它利用了Node.js的服務器端渲染技術，在服務器端預先生成完整的HTML並將其返回到客戶端，從而加快了頁面加載速度，並提高了SEO的效果。

四、Prerender.io

Prerender.io是一個提供Prerender服務的公司。它為開發人員提供了一種簡單的方式來為單頁面應用程序（SPA）預渲染HTML並提高網站的SEO效果。Prerender.io使用基於Node.js的技術，在服務器端預先渲染HTML，解決了單頁面應用程序慢加載和SEO問題。

使用Prerender.io需要將其作為中間件集成到Node.js應用程序中。這個中間件將根據請求的路由來生成HTML，如果沒有預先渲染的HTML，則通過爬取搜索引擎來獲取HTML

五、Prerender的用法

Prerender的用法一般分為兩個步驟：安裝依賴包和集成到項目中。安裝依賴包可以使用npm或yarn命令，在項目中安裝相關的Prerender依賴包。集成到項目中可以使用不同的方法，如將Prerender作為中間件集成到應用程序中，或使用Prerender的CLI工具生成HTML文件。

六、Prerender怎麼讀

Prerender的讀音非常簡單，直接讀作prerender即可，無需特殊發音。

七、Prerender什麼意思

Prerender中的“Pre”意為“先前的”，“render”意為“渲染”。Prerender的意思就是先預渲染HTML，然後將其返回到客戶端，以便快速加載和提高SEO效果。

八、Prerender html not found

當Prerender無法在服務器端找到要預渲染的HTML時，會出現Prerender html not found錯誤。這個錯誤通常是由於路徑錯誤或服務器配置錯誤引起的。在解決這個問題時，需要檢查服務器配置和路徑是否設置正確，並確保Prerender中間件能夠正確識別路由和文件路徑。

九、Prerender-spa-plugin原理

prerender-spa-plugin的原理是通過Webpack將入口文件編譯為一個HTML文件，然後使用Puppeteer在Node.js服務器上訪問該HTML文件，並將渲染結果保存為HTML文件。這個過程是在Webpack執行期間完成的，因此在輸出目錄中將看到多個HTML文件和一個名為app. js的文件。

// webpack.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'app.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'app.js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    }),
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/', '/about', '/contact']
    })
  ]
}

在這個例子中，Webpack將入口文件編譯為app.js文件，並使用HtmlWebpackPlugin將app.js注入到index.html模板中。然後，PrerenderSPAPlugin將預渲染的HTML文件保存在staticDir目錄中，並使用指定的路由預渲染HTML文件。