Traditional Web development: the content of a web page is rendered on the server and transferred to the browser once. Open the page to view the source code, the browser gets all the DOM structure.
SSR solution, the back end renders the complete dom structure of the first screen back, the front end gets the content including the first screen and the complete SPA structure, the application still runs in spa mode after activation, this page rendering mode is called the server Side Render.
Homogeneous development SSR application construction process: The goal is to generate a server bundle for server first screen rendering and a client bundle for user client activation.
Directory structure:
Route configuration :@/router.js
** Main file: ** Unlike before, the main file is the factory responsible for creating vue instances. Each request will have a separate vue instance created @/main.js
** Server entry: ** The above bundle is the server bundle packaged by WebPack. We need to write the server entry file SRC /entry-server.js, whose job is to create the Vue instance and specify the first screen according to the incoming URL. @/entry-server.js
** Client entry: ** Client entry simply creates and mounts the VUE instance, a step called activation. Create @ / entry – client. Js
Webpack configuration: NPM is required to install webpack-node-externals lodash. Merge -d
For specific configuration, vue.config.js
NPM I cross-env -d defines the creation script, package.json
Host file: Finally, you need to define the host file, modify./public/index.html
Server startup file Modified the server startup file that now needs to handle all routes,./server/ssr.js
