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文件。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/230286.html