This is the 16th day of my participation in the August More Text Challenge.

What is server-side rendering

SSR (Server Side Render) is to complete the content of the page on the Server Side, instead of obtaining data through AJAX on the client Side.

Advantage:

The main reason: better SEO, thanks to search engine crawler tools that can view fully rendered pages directly.

If your application initially displays a loading chrysanthemum graph and then fetts the content via Ajax, the fetching tool does not wait for the asynchronism to complete before fetching the page content. That said, if SEO is critical to your site and your page is asynchronously retrieving content, you may need server-side rendering (SSR) to solve this problem

Faster time-to-content, no need to wait for all JavaScript to complete download and execute, resulting in a better user experience. For applications where time-to-content is directly related to conversion rates, Server-side rendering (SSR) is critical.

Small development

Seo is a website optimization technique, also known as search engine optimization, which can use search rules to improve the natural ranking of relevant searches on the site, mainly in the hot list of Microblogging. Through SEO techniques, you can achieve a range of business activities to promote the product brand.”

What is Nuxt?

Nuxt.js is a lightweight application framework based on Vue. It can be used to create server-side rendering (SSR) applications, and can also act as a static site engine to generate static site applications, with elegant code structure layering and hot loading features.

Nuxt usage (integrate elementUI)

  1. Downloading compressed packages

Github.com/nuxt-commun… Modify the name, description, and author contents of package.json by copying the contents of template to the project directory

  1. Install depends on NPM install by going to the project directory in the editor terminal

NPM run dev is ready to start

NPM install element-UI dependency on importing the element-UI terminal into the project installation

2. Create a plugin folder and write the myplugin.js file in this folder

Import Vue from 'Vue' import ElementUI from 'element-ui' // All component import of element-ui 'elder-ui /lib/theme-chalk/index.css'// Elder-ui's CSS Vue. Use (ElementUI) // Use ElementUICopy the code
  1. Use myplugin.js in the nuxt.config.js file
 plugins: [
    { src: '~/plugins/myPlugin.js', ssr: false }
  ]
Copy the code
  1. Finally, NPM run dev