Vue uses pre rendering instead of SSR

Time:2021-1-26

Page rendering mode

Some time ago I learned that there are several ways to render a page: Spa SSR, used to write a website, but the rendering method is spa, resulting in the search engine crawler can’t catch any information, SEO optimization is not very good, originally want to change to SSR, but change the configuration a lot, make to get afraid of affecting the development, today in Vue official website see pre rendering, today tried, feel is a compromise method, and configuration change is not big, you can try

What is server side rendering (SSR)?

Vue.js Is the framework for building client applications. By default, you can output Vue components in the browser to generate Dom and operate dom. However, you can also render the same component as a server-side HTML string, send them directly to the browser, and finally “activate” these static tags into fully interactive applications on the client.

Server rendered Vue.js Applications can also be considered “isomorphic” or “generic” because most of the application’s code is available inThe serverandclientRun on.

Why server side rendering (SSR)?

Compared with Traditional spa (single page application), server-side rendering (SSR) has the following advantages:

  • Better SEO, because the search engine crawler tool can directly view the fully rendered page.

    Note that, so far, Google and Bing have done a good job indexing synchronized JavaScript applications. Here, synchronization is the key. If your application initially displays the loading chrysanthemum diagram, and then obtains the content through Ajax, the crawler will not wait for asynchronous completion before crawling the page content. In other words, if SEO is very important to your site and your page gets content asynchronously, you may need server-side rendering (SSR) to solve this problem.

  • Faster time-to-content, especially for slow network conditions or slow running devices. There is no need to wait for all JavaScript to be downloaded and executed before displaying the server rendered markup, so your users will see the full rendered page more quickly. Generally, it can produce a better user experience, and server-side rendering (SSR) is very important for those applications whose “time-to-content is directly related to the conversion rate”.

There are also some trade-offs when using server-side rendering (SSR)

  • Limited by development conditions. Browser specific code can only be used in some life cycle hook functions; some external libraries may need special processing to run in server rendering applications.

  • More requirements for build setup and deployment. Unlike a fully static single page application (SPA) that can be deployed on any static file server, the server rendering application needs to be in the Node.js Server running environment.

  • More server-side load. In Node.js It is obvious that rendering a complete application in is more CPU intensive than the server that only provides static files. Therefore, if you expect to use it in high traffic environment, please prepare the corresponding server load and adopt the caching strategy wisely.

Before using server-side rendering (SSR) for your application, the first question you should ask is whether you really need it. This mainly depends on the importance of time-to-content to the application. For example, if you’re building an internal dashboard, it doesn’t matter how many extra milliseconds it takes to load initially, and using server-side rendering (SSR) would be a fuss. However, the time-to-content requirement is absolutely critical. In this case, server-side rendering (SSR) can help you achieve the best initial loading performance.

Server side rendering vs prerendering (SSR vs prerendering)

If you research, server-side rendering (SSR) is only used to improve a few marketing pages (e.g/, /about, /contactSo you may need topre-render . Instead of using web server to compile HTML dynamically in real time, pre rendering is used to generate static HTML files for specific routes at build time. The advantage is that it’s easier to set up prerendering and you can use your front end as a completely static site.

If you use webpack, you can useprerender-spa-pluginAdd pre rendering easily. It has been widely tested by Vue applications – in fact,authorHe is a member of the Vue core team.

usage method

  • Vue router must be in history mode
    const router = new VueRouter({
    mode: 'history',
    routes: [...]
    })
  • Install prerender core: prerender spa plugin
    yarn add prerender-spa-plugin -D
  • stay vue.config.js Configuration (the lower version of Vue is written in build/ webpack.prod.conf .js)
    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    module.exports={
      //Because higher versions of Vue integrate configuration files into vue.config.js So what was originally written in the webpack configuration needs to be written in the configure webpack
      configureWebpack: {
          //Write in plugins
          plugins: [
             new PrerenderSPAPlugin({
                //The path of the generated file. This directory can only have one level. If the directory level is greater than one level, there will be no error prompt when generating, and it will only be stuck when pre rendering
                staticDir: path.join(__dirname, './dist'),
                //Corresponding to its own routing file
                routes: [ '/', '/article'],
                //Without this section, no precompile will be performed
                renderer: new Renderer({
                  inject: {
                    foo: 'bar'
                  },
                  headless: false,
                  //In main.js  Medium document.dispatchEvent (new event ('render event '), the event names of the two should correspond to each other.
                  renderAfterDocumentEvent: 'render-event'
                })
              }),
          ]
      }
    }
  • stay mian.js Configuration, add in the mounted function document.dispatchEvent (new Event(‘render-event’))
    new Vue({
    el: '#app',
    router,
    store,
    render:h=>h(App),
    mounted(){
        document.dispatchEvent(new Event('render-event'))
    }
    })
  • Yarn run build packages the project, and it’s OK to see your page generated in advance
    Vue uses pre rendering instead of SSR

Install Vue meta info plug-in, page meta tag

  • Yarn installation
    yarn add vue-meta-info
  • stay mian.js to configure
    import MetaInfo from 'vue-meta-info' 
    Vue.use(MetaInfo)
  • stay XXOO.vue Configuration in file
    export default {
      //The code is translated into the content of the meta tag of the web page
      metaInfo: {
          Title: 'title',
          meta: [
              {
                  name: 'keywords',
                  Content: 'keyword'
              },
              {
                  name: 'description',
                  Content: 'web page description'
              }
          ]
      }

This work adoptsCC agreementReprint must indicate the author and the link of this article