I. Introduction
C-terminal project constitutes the first heavy-screen services side rendering (SSR: serve side render), to re-constitute SSR, redux is not necessary. In this paper, vue as chestnuts project.
Second, what is the server-side rendering
The server component or html page generated by a string, and then sent to the browser, and finally the application of static mark "hybrid" is fully interactive on the client.
I order weekly weekly landing page example
Landing page does not use server-side rendering, a request to the login page and return to the body is empty, after performing js html structure will be injected into the body, the combination of css displayed
Another of my vue of nuxt written ssr rendering songEagle , the body is returned home with the html.
Three, SSR rendering and client rendering differences
1, SSR rendering of advantages:
(1) more conducive to SEO;
(2) more conducive to the first screen rendering (especially for slow slow network condition or operation of equipment, content quickly reach)
2, SSR rendering Cons:
(1) Server pressure, consider server load.
(2) development conditions limited only to the implementation of the life cycle of the hook before ComponentMount, references to third-party libraries are not available other lifecycle hook, select a reference library generated a lot of restrictions.
(3) study the cost increases, we should learn to build additional requirements set up and deployment.
Fourth, time-consuming comparison
1, the data request
Request by the first screen data server, not the client request header data screen, which is a major cause of "fast". Intranet server request, fast response speed data. Client data requests in different network environments, and large external network http request overhead, resulting in a time difference.
2, HTML rendering
Server rendering they are first back-end server request data, then generate a complete fold html back to the browser;
The client rendering is such as js code download, load, after the completion of parsing request data rendering, wait for the process page is nothing, that is, the user sees a white screen.
Is the service rendered without waiting for the end js code download and complete the requested data, it can return to the fold has a full page of data.
Fifth, the principle of
With respect to the SPA, vue some extra tools, we first look at the more important a tool-Server-renderer VUE , from the name to know when to call in rendering the service side
Implementation:
1. Create an empty project mkdir vuessr && cd vuessr
2, run npm init to initialize
3, install dependencies cnpm install vue vue-server-renderer --save we need
4, create index.js code is as follows:
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})5, running node index.js can be seen in the console output
<div data-server-rendered="true">Hello World</div>
VI Summary
What is SSR? The server component or html page generated by a string, and then sent to the browser, and finally the application of static mark "hybrid" is fully interactive on the client. There are more conducive to SEO SSR and the first screen rendering, but also has disadvantages: server pressure, restricted development conditions will only perform before ComponentMount life cycle, the third library is limited, a large study costs. The principle is by vue-server-renderer library of createRenderer (), then call rendererToString ().