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

type The brief steps The main features
Client-side rendering 1. Visit the website

2. The server returns an HTML file containing the import resource statement

3. Request resources from the server

4. Render the page after the resources are loaded		 Return directly to the HTML file
Server side rendering 1. Visit the website

2. The server checks which resource files are needed

3. Populate content into HTML file (Ajax request will prefetch and populate data)

4. The client accepts the HTML page and immediately starts rendering the page (while loading resources).		 Render the page and return to the HTML file

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