Home > Developer > JavaScript
Exploring vue server rendering (SSR), vuessr
Preface
First, let's talk about server rendering. Simply put, the server parses and renders data and directly generates html fragments and returns them to the front-end. There are also many specific usage methods:
The traditional server template engine renders the entire page
Service rendering generates an htmll code block. The front-end AJAX gets the code and then js dynamically adds
Advantages and disadvantages of server Rendering
The first is the seo problem. The content of the front-end dynamic rendering cannot be captured, but this problem can be solved by using server rendering. There is also the problem of slow loading of the first screen. For example, in the SPA, opening the homepage requires loading a lot of resources initially. In this case, using server rendering for the first screen is also an optimization solution. However, when using SSR, it is bound to increase the pressure on the server. It may also need the same structure of the front and back ends. Using the same template engine seems to be in conflict with the idea of separating the front and back ends. Here, let's take a look at the server rendering in the vue framework.
Vue-server-renderer
Vue-server-renderer is a module for processing server load in vue. Official documentation: worker. First, create a test. js file and use npm to install dependency express, vue, vue-server-renderer. As the basic template.
const renderer = require('vue-server-renderer').createRenderer({ template: require('fs').readFileSync('./temp.html', 'utf-8')})
Temp.html:
<!DOCTYPE html>Next, define some rendering data, create a node server with express, and then define a vue instance. Then call the renderer's renderToString method to render and generate html. After the rendering is successful, it is returned to the client.
Const Vue = require ('vue ') const server = require ('express') () const context = {title: 'Hello'} const mocktitle = 'my favorite fruit 'const mockdata = ['banana ', 'apple', 'orange'] server. get ('*', (req, res) =>{ const app = new Vue ({data: {url: req. url, data: mockdata, title: mocktitle}, template: <div> The visited URL is: {url }}< h3 >{{ title }}. We can see that the rendering rules on the server using vue are the same as those on the front-end rendering, and both v-for and v-if can be used normally. Enter node test. js in the command line and open http: // localhost: 8080 in the browser. The result is as follows:
You can see that the server directly returns a rendered Doc, And the demo of the example ends here.
Conclusion
Server-side rendering or client-side rendering. I personally think it is necessary to make a selection based on specific business scenarios. I don't know much about the server as a front-end. If there is something wrong with it, please correct it.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
