Home > Developer > JavaScript
Introduction to Vue 2.0 Server rendering, vue2.0
1. What is server-side rendering SSR?
Server side render
It is to obtain data through the backend vomit template instead of using the front-end ajax and splice strings.
2. Why SSR?
SEO is required because crawlers do not wait for ajax results.
The client network is slow, loading is slow, and user experience is affected.
3. Another solution: Pre-rendering
Instead of downloading the entire single-page application at a time, pre-rendering only generates specific static pages for specific routes during build.
You can use webpack to easily add pre-rendering through prerender-spa-plugin.
4. Write Vue SSR in NodeJS
First, npm install -- save-dev has vue express vue-server-renderer
// Server. js 'use strict '; var fs = require ('fs'); var path = require ('path'); global. vue = require ('vue ') var layout = fs. readFileSync ('. /index.html ', 'utf8') var renderer = require ('vue-server-renderer '). createRenderer () var express = require ('express ') var server = express () server. use ('/assets', express. static (path. resolve (_ dirname, 'asset') server. get ('*', function (req, res) {// render the Vue instance as an HTML renderer. renderToString (// create an application instance require ('. /assets/app') (), // process the rendering result function (error, html) {if (error) {console. error (error); return res. status (500 ). send ('server error')} // send layout and HTML file res. send (layout. replace ('<div id = "app"> </div>', html)}) server. listen (5000, function (error) {if (error) throw errorr; console. log ('server is running at localhost: 100 ')})
// index.html <!DOCTYPE html>// Assets/app. js (function () {'use strict 'var createApp = function () {return new Vue ({template: '<div id = "app"> you have spent {counter} seconds here. </Div> ', data: {counter: 0}, created: function () {var vm = this; setInterval (function () {vm. counter + = 1 ;}, 1000) }} // exposes the interface if (typeof module! = 'Undefined' & module. exports) {module. exports = createApp} else {this. app = createApp ()}). call (this)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
