Writing in the front

Project code: github.com/NeverYu

Git. IO /fjkDg

This article focuses on pre-rendering and the use of methods, and provide relevant technical instructions, source code and demo address; Server render more content, will be sorted out in the next issue!

takeaway

Too much has been said about Vue SPA (I have used it many times in my previous projects, including Sell, Music, VUE-CMS and other projects), which has brought us extremely fast development experience and strong development efficiency. Perhaps the only minor downside is: when we care about SEO, how do we deal with the need for SEO?

Vue also has a ready-made solution for SEO: Vue server rendering

then

What is server-side rendering

The server outputs the complete Page HTML to the client for display, which is significantly different from SPA (single-page-application) rendering the Page with JS.

Why use server-side rendering

  • Better SEO
  • Faster content arrival time

Server render or prerender

As stated on the website, if you are researching server side rendering (SSR) to improve SEO for a few marketing pages (e.g. /, /about, /contact, etc.), then you may need pre-rendering, and a typical pre-rendering use scenario might be similar to this site.

The difference between server-side rendering and pre-rendering

There is a clear difference between server-side rendering and pre-rendering usage scenarios. Pre-rendered usage scenarios are more in the form of what we call static pages, such as this website. Server-side rendering is suitable for large, dynamic, complex page data processing, and server-side data interaction functional websites, an obvious use scenario is e-commerce websites.

How to use pre-render

At the heart of pre-rendering is the prerender-spa-plugin. How do you use it? We need to install it with NPM and then gently introduce it in webpack.

Again, let’s use the WebPack configuration in the source code for this website as an example:

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: [ '/'.'/home'.'/information'.'/ticket'.'/scenery'.'/about'].renderer: new Renderer({
    headless: false.renderAfterDocumentEvent: 'render-event'})})Copy the code

The PrerenderSPAPlugin configuration is extremely simple, we need to simply configure all the routes in the project, and eventually generate several pages based on this configuration, not the routes you configured in vue-Router.

And then let’s configure renderAfterDocumentEvent; The entire pre-rendering process starts when this event is triggered, which is done in main.js:

// main.js
mounted () {
    // You'll need this for renderAfterDocumentEvent.
    document.dispatchEvent(new Event('render-event'))}Copy the code

If the event is triggered in main.js, PrerenderSPAPlugin knows that renderAfterDocumentEvent is triggered, and then it starts pre-rendering. It’s pretty simple.

Set headless to false, and during the NPM run build, Chromium will be launched for simple testing.

Careful people may find out: why is headless configured as true in your source code? Do you know why?

The most basic and core configuration items are these few lines of code, of course, if you need more configuration items, you can go to Github documentation, there are more configuration instructions.

These code aspects are easy to understand if you download the project source code or try it yourself

Enhance SEO

With pre-rendering, the SEO of the entire page is already very good. Vue-meta-info can be used to dynamically change meta information (different pages have different meta information), such as title, meta keywords or link.

Vue-meta-info is a vue 2.0 plugin that allows you to better manage meta information in your app. You can set metaInfo directly in the component and it will be automatically mounted to your page. If you need to automatically update your Title, meta, etc., as your page changes, use this plugin.

SRC /util/meta-info.js: SRC /util/meta-info.js: SRC /util/meta-info.js

How to set up a pre-render development environment

If you want to use pre-render to develop your site, the easiest way to do this is to clone the project, cut it down and develop it again according to your needs. The whole development process is exactly the same as Vue.

conclusion

1. Compared to the large and complete WebPack configuration items in the Vue template, the webPack configuration in the pre-render is simple and small, if you have some additional WebPack configuration requirements, you may need to do it yourself.

2. My project uses stylus as a CSS precompiled language. If you want to use other CSS precompiled languages, you need to install some additional plug-ins and do some simple configuration. Of course, the default CSS is definitely supported.

3. During the writing process of this project, I also took some simple prerender notes

4. Finally, the project is packaged and released to the production environment, using NPM Run build one-click operation. If you want to deploy to a subdirectory, you may need to make some simple changes, as noted in vue-PRERender notes. Additional notes that need to be added later will also be added in vue-PRERender notes.

Write in the last

My home page: neveryu. Making. IO/index. HTML

QQ group: 685486827