Traditional server-side rendering

Early Web page rendering was a simple example done on the server side, with the Node side reading the HTML of a page, embedding the data, and finally returning the page to the front end

const express = require('express') const fs = require('fs') const template = require('art-template') const app = Express () app.get('/', (req, res) => {const TPL = fs.readfilesync ('./index.html',) Parse (fs.readfilesync ('./data. JSON ', const data = json. parse(fs.readfilesync ('./data. JSON ', 'utF-8 ')) // 3, execute const HTML = template.render(TPL, data) // 4, send(HTML)}) app.listen(3000, () => console.log('running... '))Copy the code

The final page displays the data in data.json, and the data returned by the interface requested by the front-end is the HTML code that has been processed. This method is completely acceptable in the case of uncomplicated application, but there are many disadvantages in the case of complex application:

  • The front-end code is completely coupled and not conducive to development and maintenance
  • There’s not enough room on the front end
  • The server is under heavy pressure
  • The user experience is normal. When switching to other pages, you need to refresh the page

Client-side rendering

The advent of Ajax makes it possible for clients to retrieve data dynamically. The work on the server side has been moved to the client side. The back end handles the data interface and the front end renders the data to the page, making it more independent and not limited to the back end. However, there are some obvious disadvantages:

  • The first screen rendering is slow
  • Is not conducive to SEO

Why does the client render the first screen take a long time?

Taking the Vue SPA project as an example, loading a page requires first request for static page, second request for JS script in the page, and finally ajax if there is Ajax. These three parts are not carried out at the same time, but the server rendering only makes one request and directly gets the compiled STATIC HTML content. So the server will render the first screen faster than the client.

Why client-side rendering is bad for SEO?

Search engine request each website, get the static HTML string returned, according to the content of the string for analysis, collection, ranking and other operations. In the case of server-side rendering (SSR), the search engine gets the HTML string after inserting the data, i.e. WYSIWYG, which is good for ranking the site, but in the case of client-side rendering (CSR) pages, take Vue SPA project as an example, All the search engine gets is an HTML string with

. It doesn’t load the static resources in it. The content is empty and SEO is out of the question.

Now server rendering (isomorphic rendering)

Isomorphic rendering = back-end rendering + front-end rendering basic process:

  • Based on React, Vue and other frameworks, the combination of client-side rendering and server-side rendering
    • Execute once on server for server rendering (first screen straight out)
    • This is done again on the client side to take over the page interaction
  • The core is to solve SEO and slow rendering of the first screen
  • It has the advantages of traditional server-side rendering as well as client-side rendering

How to achieve:

  • Official solutions using Vue, React and other frameworks
    • Advantages: Helps to understand principles
    • Disadvantages: need to build an environment, more trouble
  • Use a third-party solution
    • React ecosystem next-js
    • Nuxt.js for Vue Ecology
    • .

Problems with isomorphic rendering applications

  • Limited development conditions
    • Specific code in the browser can only be used in certain lifecycle hook functions
    • Some external extension libraries may require special processing to run in server-side rendering applications
    • DOM cannot be manipulated during server-side rendering
    • Some code operations need to be context-specific
  • There are more build and deployment requirements, and homogeneous rendering applications can only be deployed on Node.js Server
  • More server side rendering optimization work handling, if the traffic is high, need to do some server load work

Suggestions for server-side rendering

  • First screen rendering speed really matters
  • Whether SEO is really needed

Nuxt.js of Vue Ecology is taken as an example to demonstrate the application of isomorphic rendering

ssr-demo