Nuxt - Universal (SSR / SSG) / single page app (rendering mode)

Preface

Current front-end rendering mode , Roughly divided into 3 Kind of , Interested can Check out this article .

1. Client rendering CSR (Croswer Side Render)
2. Server rendering SSR (Server Side Render)
3. Static website generation SSG (Static Site Generation)

When you create a project , Do you remember such a multiple-choice question as the following ：

Nuxt.js Will let you choose a rendering mode , Let's make a good analysis .

One 、Universal（SSR / SSG）

from Universal Look at the English words , It's broad 、 general , More common rendering modes .

After you select , It includes （ built-in ） Server side rendering （SSR） And static website generation （SSG） Two rendering modes .

---

Server rendering （SSR）：

Server-side rendering means that the client sends a request to the server , Then the runtime dynamically generates html Content and return to the client .

Pictured above , Use Universal Pattern , Any routing request （ Not activated Vue ） The following operations will be performed ：

• Render the requested page on the server side
• The browser gets the new page and the new page displays
• request JavaScript file
• start-up Vue, The page has basically become a regular SPA

route ：

Pictured above , Launch... In the browser Vue after , Routing operations are as follows ：

• Sent out a JavaScript request , Render with inheritance only /about-us Required for page components JavaScript
• Conduct API Call to get the data to render
• Render the page

Nuxt.js The code splitting function is used by default , And split each page into different JavaScript file , These files are loaded only when needed . such , Our application does not pre download a large amount of component code that may or may not have been loaded .

---

Static website generation （SSG）：

This is simple , Static website rendering is performed at build time , When making a request , Direct will html Send back to client .

The original web pages are all like this .

Two 、Single Page App

In English , It means a single page application （ There's only one page ）, You might as well spell the first letters of three words together ,SPA！

After you select , It is equivalent to rendering according to the single page application mode .

In ordinary Web In the application , When the user requests http://myapp.com/about-us When the server returns normally about-us.html.

Pictured , In a single page application , Any routing request will do the following ：

• download index.html
• download Vue Applications JavaScript
• initialization Vue application
• initialization Vue Router And route to the appropriate component
• Conduct API Call to get the data to render
• Render the page

SPA The initial load of the application may be slow , Once the load is complete , fast .

Written in the back

Generally speaking , Static website rendering is faster at run time , Because there is no need for the server to handle , But the disadvantage is that any change to the data needs to be completely rebuilt on the server side ; The server-side rendering will dynamically process the data , No complete reconstruction is required .

in addition , use Nuxt.js The main thing is server-side rendering （SSR）.