SSR With Vue 2.x components

This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

(This paper is based on Vue 2.x discussion, Vue 3.x should be output when there is input)

SSR

SSR, Server Side Render, # official guide to understand ~

Vue.js can also render the same component as HTML strings on the server side, send them directly to the browser, and finally “activate” these static tags into a fully interactive application on the client side.

In short, SSR, the browser gets the HTML string that has been rendered on the server side.

Q: How is server-side rendering different from the usual client-side rendering?

A: Make A simple comparison

Therefore, SSR has two major advantages:

• The first screen rendering is fast, because the HTML string is returned from the server, reducing the loading time of JS resources, is a means of performance optimization;

• Good for SEO, HTML file filling in the server side, convenient web crawler

Black box: nuxt.js

This paper chooses Nuxt.js as the entrance to understand SSR. So why is that?

If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should try nuxt.js. Nuxt.js is organized by abstraction of the client/server infrastructure and presets the configuration required to develop applications rendered on the server using vue.js. (# Nuxt. Js)

Set up the project

Create a project using the scaffolding tool create-nuxt-app provided by nuxt.js. See # Portal for details

Package. json: # command list

{
  "scripts": {
    "dev": "nuxt".// Start a hot loaded Web server (development mode)
    "build": "nuxt build".// Use webpack to compile applications, compress JS and CSS resources (for distribution)
    "start": "nuxt start".// Start a Web server in production mode (' nuxt build 'first)
    "generate": "nuxt generate"  // Compile the application and generate the corresponding HTML file based on the route configuration (for static site deployment)}},Copy the code

Development mode

Run NPM run dev to start the project

As shown in the figure above, two ends are found running: √ Client & √ Server

When nuXT is started, it will start the development server with hot update loading, and Vue server-side rendering is configured to automatically render the application for the server

That is, in development mode, nuxt.js runs both the server and the client

How does the component support SSR

That is, how to develop programs that support server-side rendering, and what problems should we pay attention to when developing components?

1. Important disclaimer: The server has no window or document

2. In Nuxt 2.x (based on Vue 2.x), both client and server are called:

   • 1, beforeCreate (# nuxt-plugins)
   • 2, created
   • 3, Watch with immediate (immediate = true)
   • 4. Computed with View
   • 5. The data function defines the data
   • 7. Pay attention to points 1-5 corresponding to referenced mixins, sub-components and inject

   

   (Nuxt SSR in the box means to be called on the server, and outside the box refers to the client)

   Combined with the above points, when developing components, it is necessary to pay attention to the above cannot be directly used window and document, otherwise errors will be reported, and judgments should be added to avoid execution on the server side, but only executed during client rendering

   import Vue from 'vue'
   const isServer = Vue.prototype.$isServer;
   
   if (isServer) return;
   Copy the code

   Server-rendered vue.js applications can also be considered “isomorphic” or “generic” because most of the application code can be run on both the server and the client

3. Custom instruction

   Vue 2.x custom instruction hook functions are:

   • bind
   • inserted
   • update
   • componentUpdated
   • unbind

   In Vue 2.6.14 and NUxt 2.15.8, the custom instruction hook function is not called on the server and can be used

   

4. Asynchronous data

   Component development:

   • If normal data (non-asynchronous data), initialize it into the data function

   • If a business component (requiring a request interface first) dynamically fetches asynchronous data, it uses nuxt.js asyncData method to send the request

   export default {
       async asyncData () {
           const res = awaitaxios({... opts})return res.data
       }
   }
   Copy the code

   Matters needing attention:

   • Can be invoked before a server or route is updated

   • Called before component initialization, without this

Link portal

# Vue SSR guide

# Brief Discussion on server Rendering (SSR)

# 24 Tips for Front-end Performance Optimization (2020)

# Write a general component guide for SSR support

Last but not least

If there is anything wrong, please give me your advice