In some scenarios that require fast response times, you might want SSR to load faster. In short, trade performance for time. So how do you get started on your first SSR project

Why Nuxt

If you’ve done previous research on SSR, you’ve probably built a shelf so this article doesn’t need to be read.

The reason for choosing NUXT is simple, it is officially maintained by VUE, which means nuxT exists as long as VUE exists. Not to mention the nuxT is very powerful.

Step 1: Prepare the environment

I don’t know why I always fail to execute NPX, so I suggest using YARN or doing a roundabout.

Yarn create nuxt-app < project name > yarn create nuxt-app < project name > NPM I create-nuxt-app -gCopy the code

Step 2: Environment catalogue and related uses

. | -- - | app - eslintignore. | - eslintrc. Js. | - gitignore | -- app. HTML / / rendering template, similar to public/index. The HTML, Need you to create your own | -- jsconfig. Json | -- nuxt. Config. Js / / nuxt configuration file | -- package - lock. Json | -- package. Json. | - nuxt | - assets / / Resource file, Similar to the vue - cli | | -- - | CSS | | | - components / / components - images - layouts / / layout file | | - default. The vue | - middleware / / middleware | - Pages / / page | - | plugins / / plug-in - server / / SSR web services, create can choose | | -- index. Js static file | | - static / / store / / vuex directory, importantCopy the code

I picked up some of the more important ones and said,

  • plugins

This folder is where you put your plug-ins, which is basically when the page is first rendering, you can access the Window object, and for some libraries that need to use the Window object, the Document object, you need to initialize it here.

  • store

Vuex directory, because SSR is actually equivalent to a multi-page application, in which data interaction is mainly using Vuex in addition to Query String

  • static

Static is the equivalent of a vue-cli public file. Note that references are made to the static folder level

Step 3: Get started

Then you can start your SSR project.

  • No Router configuration required

Nuxt takes contracted routing. Instead of creating a router.js file, configure routes in the router. All routes are generated from files in the Pages folder. Specific rules refer to the website zh.nuxtjs.org/guide/routi…

  • The request data

In CSR, we usually put the requested data in Mounted, but in SSR, we can get the data much earlier, before the page loads. The asyncData method is provided in NUxt. Remember to return it, where the value is merged with data and used directly in the component

async asyncData({isDev, route, store, env, params, query, req, res, redirect, Error}) {// store vuex // query const res = await axios('http://xxx.xxx') return res}Copy the code
  • The change of the lifeCycle

In SSR, it is not recommended to use beforeCreate and created, because the page is not fully loaded in these two cycles, so we can not use the Vue API, but we can judge whether it is in the viewer according to process.client, and then execute some operations. Otherwise, window objects cannot be accessed. It is recommended that you use plugins instead.

Created (){if(process.client){// Do something}}Copy the code

Therefore, asyncData and Mounted are commonly used in NUXT

  • Precautions for developing commands

Nuxt runs with two commands, NPM run dev and NPM start. NODE_ENV is local,NODE_ENV is development, NODE_ENV is local, but there is no hotReload,NODE_ENV is production, so you must run NPM run build every time you start, otherwise you will run the same code as before

There are also two package commands, NPM run build and NPM run generate. The former package application is SSR, and the latter package static, equivalent to the previous VUE-CLI.

Other vUE is similar to the ordinary, it is recommended to take a look at the document, it is not difficult.

Step 4: Deploy

When you use the NPM run build, the package is actually a NodeJS service instead of a static file, so it is difficult to deploy and you can’t just copy the file. I recommend using docker deployment here.

  • 1. Install pM2 locally

PM2 is a process management tool that can help you automatically restart processes and prevent service crashes. It is also easy to install

  • 2. Generate a configuration file

In the project directory, pm2 init will generate a file.config.js file. This is the pM2 configuration file, and you need to modify the following fields

Module. exports = {apps: [{name: 'web_baseline', // app name: 'NPM start', // app name:' NPM start', // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/ args: 'one two', instances: 1, autorestart: true, watch: False, max_memory_restart: '1G', //NODE_ENV: production env: {NODE_ENV: 'production'}, env_production: {NODE_ENV: 'production'} 'production' } }] }Copy the code
  • Docker configuration file

There are a few things to note here. For the base image, I chose to use pM2’s official Node image so that I can use Pm2 directly. Domestic environment using taobao source is faster, if you are deployed abroad, suggest delete this RUN NPM config set registry https://registry.npm.taobao.org – global

FROM  keymetrics/pm2:latest-alpine
ENV NODE_ENV=production
ENV HOST 0.0.0.0 

WORKDIR /usr/src/app
COPY.

ENV NPM_CONFIG_LOGLEVEL warn
RUN npm config set registry https://registry.npm.taobao.org --global
RUN npm install nodemon cross-env -g
RUN npm install
RUN npm run build
EXPOSE 3000
CMD [ "pm2-runtime"."start"."ecosystem.config.js" ]

Copy the code
  • 4. Access services

After docker is generated and started, access is the local IP +port. If you have Nginx installed, you need a reverse proxy to access the domain name.