First, what isSSR ?

  • SSR is server rendering. What is server rendering? DOM elements are assembled by the server, and HTML strings are generated to the browser, in which the DOM source code of the entire page can be seen.

  • Problems solved by SSR:

    SEO: The search engine’s priority crawl level is the HTML structure of the page. When we use SSR, the server has already generated the HTML relevant to the business. This information is very SEO friendly.

    Content rendering: The client can see the rendered business-relevant view without waiting for all the JS files to load (the pressure is on the server side, and this is where the tradeoff is to distinguish between what is rendered by the server and what can be handed to the client).

  • SSR related disadvantages:

    Code compatibility: For developers, the server environment required by compatible code to run Vue SSR in different environments is Node. Some client objects, such as DOM and Windows, cannot be used.

    Server load: Relative to the end before and after the separation mode servers only need to provide static resources, SSR need more the load on the server, so in the project using SSR model carefully, such as a chart page, relative to the rendering of a service, may be a few seconds before users don’t care about the initial load, can be used to a client skeleton is similar to the screen, Or lazy loading to improve the user experience.

  • Vue and Vue SSR and native HTML page source comparison, right-click on the page to view the source code:

    Vue SSR with native HTML is able to see the source tag

    By default, Vue does not see the source tag because it is JS assembled.

Two, what isNuxt.js ?

  • At present, there are several ways to do SSR, roughly listed:

    1. Write native static pages at the front end, send them to the server, and combine data through the server framework, such as PHP Web development.

    Use prerender-SPa-plugin. The author is a member of the Vue core team. It’s not called SSR, it’s pre-rendered. But the effect is the same, maybe even better than SSR to some extent. Compared with the complex SSR configuration, prerender configuration is simpler and faster.

    3, Vue officially provided wheels to do SSR on the Node side, compared to prerender, SSR is really super complex, if you are interested in checking Vue SSR guide. This method can achieve the real data real-time rendering, completely available for SEO mites and crawling, isomorphism completely before and after the end, the routing configuration sharing, no longer affects server 404 request, but the configuration is more troublesome, processing complex (than pre-rendered plug-in, too much complex) constraint is more, the server will cause greater pressure, Server costs are too high.

    4. Nuxt.js is a Vue based SSR framework encapsulated by Webpack and Node.js.

    I chose to use nuxt.js for SSR.

Third, throughNuxt.jsCreate a project

  • Nuxt.js official installation process, the project needs to rely on Node environment, I use the package management tool is NPM, nuxt.js version is 2.14.5.

  • Create the project and make sure NPX is installed (NPX is installed by default in NPM version 5.2.0) :

    $NPX create-nuxt-app $NPM create nuxt-app $YARN create nuxt-app $NPM create nuxt-appCopy the code

    Or use YARN:

    $YARN create nuxt-appCopy the code

    Here I create a test project using NPX, for example:

    $ npx create-nuxt-app nuxt-test
Copy the code
    // Go to the folder, Run dengzemiaodemacbook-pro :test Dengzemiao $NPX create-nuxt-app nuxt-test create-nuxt-app v3.5.2 ✨ Generating // Nuxt.js project in nuxt-test // Nuxt.js project in nuxt-test ? Project name: nuxt-test ? Programming language: JavaScript ? Package manager: Npm ? UI framework: None ? Nuxt.js modules: Axios - Promise based HTTP client ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele ction) ? Testing framework: None ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript) ? What is your GitHub username? dengzemiao ? Version control system: None ..... 🎉 Successfully created project nuxt-test // If the project is in development, run NPM run dev To get started: CD nuxt-test NPM run dev // Build and start for production cd nuxt-test npm run build npm run startCopy the code

Four,Nuxt.jsRun locally

  • This article will only cover creating the project to the publisher and how the server is deployed to be accessed through the server. Other project details will be written in another article.

  • After you have created the project, you can run the project in either To Get started or To Build & Start for Production mode. The former is development mode. The latter is the Production mode.

    dengzemiaodeMacBook-Pro:test dengzemiao$ cd nuxt-test dengzemiaodeMacBook-Pro:nuxt-test dengzemiao$ npm run dev > [email protected] dev/Users/dengzemiao/Desktop/Project/web/test/nuxt - test > nuxt ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: Server-side │ │ ▸ Target: server │ │ Listening: http://localhost:3000/ │ │ │ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯Copy the code

    Then open a browser at http://localhost:3000/ above for access, but this is the development environment.

  • .vue files in Pages are automatically routed, as are folders.

  • For example, if the project pages folder contains an index.vue file, it will be compiled into index. HTML, which is also known as /index in the route. Try modifying the contents of index.vue, or create a new.vue file to test the contents.

  • For example: I create a test in the pages DZM. Vue, running programs, access path is http://localhost:3000/dzm

    <template> <div> DZM test page {{env}} </div> </template> <script> export default {data () {return {// The current startup environment Env: process.env.node_env}} </script>Copy the code

Five,Nuxt.jsdirectlyipVisit the project (both formal and test)

  • Run the development environment $NPM run dev

    ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: Server-side │ │ ▸ Target: server │ │ Listening: http://localhost:3000/ │ │ │ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯Copy the code

  • $NPM run build + $NPM run start

    ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: Server-side │ │ ▸ Target: server │ │ Memory usage: 29.1 MB (RSS: 73.1 MB) │ │ Listening: http://localhost:3000/ │ │ │ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯Copy the code

  • Through the above two results, the obtained address is http://localhost:3000/, this is a fixed localhost:3000 can be accessed, need to change to support local IP also can access, that is, you get the IP of the local computer plus the port can also access. For example: http://10.0.93.169:3000

  • Go to nuxt.config.js and add the following code:

    export default { head: {... }, css: [...] // port: 8000, // default: 3000 host: '0.0.0.0', // default: localhost (recommended) // host: '0', // is equal to host: '0.0.0.0'. timing: false },Copy the code

    Run the project again, either formally or test, and the access address will change to the local IP address plus port:

    ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: Server-side │ │ ▸ Target: server │ │ Memory usage: 29.4 MB (RSS: 74 MB) │ │ Listening: http://10.0.93.169:3000 │ │ │ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯Copy the code

    That’s the end of running the project locally. Now you need to publish the project to the server and get it up and running.

Four,Nuxt.jsUpload server (Nginx + Node + PM2)

  • The following operations can be set up on a local machine if you need to test them, using the local machine as the server.

  • Install Nginx + Node + PM2 on the server.

  • Nuxt.js is dependent on Node, so the server needs to install Node. If Node is installed, it will have NPM installed with it, and then install PM2 via NPM:

    $NPM install -g pm2 $pm2 -hCopy the code

    PM2 is a Node process management tool. Why do you use this? For example, after running a project, the command line window cannot be closed. If you close the command line window, you cannot access the project address. Therefore, you need to support closing the command line window, and the running project is still accessible.

  • Install the above environment, in the Nginx root directory through Git to pull down the source code nuxt. js, you can open a new folder is also available, up to your own

    $git clone XXXXX. $git pullCopy the code

    Here, search on the Internet can search many only need to import several files you can run the project, but sometimes there will be a compiler function can’t find this way, the problems such as resource file not, so if not particularly familiar with Nuxt. Js, directly to the project down, don’t need to import some files alone, This is also perfect to avoid some details of the pit, online articles are generally recommended to import the following files:

    .nuxt
static
nuxt.config.js
package.json
package-lock.json
Copy the code

  • After pulling the code to the server, you need to go through the NPM installation to install the dependencies

    $ npm install
Copy the code

  • And then compile the project

    $ npm run build
Copy the code

  • PM2 runs the project, the background hangs, you can fill in the name of the project, but it is recommended to use the name field in the project package.json file, so that it is easy to distinguish.

    $NPM run dev $NPM run start $NPM run dev $NPM run start $pm2 start NPM -- run dev $pm2 start NPM --name "Your project name" -- run dev $pm2 start./node_modules/nuxt/bin/nuxt.js . $pm2 start NPM -- run start $pm2 start NPM --name "your project name" -- run start.... $pm2 start. /node_modules/nuxt/bin/nuxt.js // For example: Start $NPM run build $pm2 start NPM --name "nuxt-test" -- run start // window The above commands work on both MAC and server, but some of the commands don't work on Windows. I don't use Windows very much, so I didn't bother to use them. Here are some suggestions: // Window PC local test PM2 mount development environment, generate environment currently the above several boot mode can not mount successfully, directly mount the server, local is only used for testing, development environment does not affect the test. $pm2 start. /node_modules/nuxt/bin/nuxt.jsCopy the code

  • You can then check to see if the suspension was successful by checking the $pm2 list

    ┌ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ id name │ namespace │ version │ mode │ │ pid uptime │ ↺ │ status │ │ CPU mem │ user │ watching │ ├ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ │ 0 nuxt - test │ default 1190 │ │ │ │ N/A fork │ │ 0 0 s online 0% 7.8 MB │ │ │ den... │ disabled │ └ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘Copy the code

    Now you can use the IP address and port number of your computer or server to access, for example: http://10.0.90.164:3000/.

  • $pm2 list $pm2 list $pm2 list

    Delete a single suspended process. $pm2 delete ID. // Delete all suspended processes. For example, $pm2 delete 0Copy the code

  • If the project is modified and something new is uploaded, just pull down the code after compiling and restart the PM2 environment process:

    $git pull + $NPM install + $pm2 start NPM –name “your project” — run dev

    $git pull + $NPM install + $NPM run build + $pm2 start NPM –name “name” — run start

    Note: $pm2 start…. $pm2 delete id = $pm2 start…. $pm2 start…. , you only need to restart:

    Test environment – Later version update: $git pull + $NPM install + $pm2 restart ID

    Official environment – Later version update: $git pull + $NPM install + $NPM run build + $pm2 restart ID

  • An extra note: $NPM run dev $NPM run start $NPM run dev $NPM run start $NPM run dev $NPM run start If the port is occupied, a new port will be assigned to it:

    ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: Server-side │ │ ▸ Target: server │ │ Memory usage: 29.4 MB (RSS: 74.6 MB) │ │ Listening: http://10.0.90.164:3000/ │ │ │ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯Copy the code

  • After finally starting the suspension via PM2, we now need to configure Nginx. Previously, the Node service was started and access was fine, but now we need to use Nginx to access Node resource addresses.

  • Go to Nginx’s nginx.conf file and add a new service, as well as an anti-proxy service

    Upstream nuxt server: 0.0.0.0:3000 (upstream: 0.0.0.0:3000); keepalive 64; } server { listen 8083; # server_name www.nuxt.com; Location / {proxy_pass http://nuxt; (110: connection (" link ", "link", "link", "link")) }}}Copy the code

  • After this is configured, start nginx with $nginx or reload the nginx configuration file with $nginx -s reload.

  • After the configuration is complete, start Node and start Nginx, which can be accessed directly through Node IP + :3000 port, or through Nginx IP or domain + :8083 port.

  • To this is done, the other is the internal details of the project configuration with use, will be written in another article!

  • Nuxt.js (Vue SSR) project configuration and development details

  • With the use of PM2 configuration file, the function is to set the formal test environment in the configuration file, just need to execute the configuration file to achieve the effect, of course, you can not go to the configuration file, go to the command line to distinguish the formal test environment, see your preferences.