Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

An overview of the

In today’s mainstream single-application development, front-end development builds are packaged as static resource files and then uploaded and deployed to Nginx, or Tomcat. When a user visits a website, the HTML template file will be loaded first, and then js files will be loaded. Js will perform the main rendering, which is called “browser rendering”, or “CSR” for short. Its disadvantages are mainly not conducive to SEO optimization, home page rendering white screen time, etc. In contrast, server-side rendering (SSR) directly returns HTML files for rendering, which has a shorter white screen time and is also beneficial to SEO, but it increases the burden of the server.

The two rendering methods, when measured by indicators, look like this: CSR cannot advance the FMP time, even though it can reduce the white screen time by advancing FP and FCP time through skeleton screen or even one loading. SSR directly advances FMP before JS loading. After all, it returns a rendered HTML file without waiting for JS loading to render and parse the main content.

Knowledge:

  • FP: The time when the first frame is drawn
  • FCP: time of first content drawing
  • FMP: For the first time effectively mapped, the most meaningful piece of content on a site, for example, as opposed to an e-commerce site, might be the product content.

Therefore, the time sequence of the three indicators is: FP -> FCP -> FMP.

Knowing the necessity of SSR, let’s look at the simplest SSR rendering.

Template Rendering examples

Using Node to implement a render JSON file data index template web page. Example simple, directly on the code:

// json data file: data.json

['zhang'.'Ming'.'little red']
Copy the code
<! Index.html -->

<! doctypehtml>
<html>
  <head></head>
  <body>
    <h1>My friend,</h1>
     <! -- % : content to be replaced -->
    <ul><li>%</li></ul>
  </body>
</html>
Copy the code
// node service, SSR

const http = require('http')
const fs = require('fs')

const getTemplate = (data, res) = > {
  // Read the template file
  fs.readFile('./index.html'.(err, data) = > {
    if(err) return res.end('server error')
    const temp = data.toString()
    // Replace template data
    const html = temp.replace(The '%', data.join('</li><li>'))
    // Write the response header and return the data
    res.writeHead(200, {'Content-Type': 'text/html'})
    res.end(html)
  })
}

const renderTemplate = (res) = > {
  // Read json data
  fs.readFile('./data.json'.(err, data) = > {
     if(err) return res.end('server error')
     getTemplate(JSON.parse(data.toString()), res)
  })
}

// Create the Node service
const server = http.createServer(function(req, res){
   renderTemplate(res)
}).listen(80.'127.0.0.1')
Copy the code

This is the simplest SSR server rendering, essentially, template string substitution. It’s just that as you get more complex, you need to define your own set of template rendering rules instead of simply substituting them.

conclusion

There are many server-side template engines such as Pug, EJS, Mustache, etc. Of course, if the stack is Vue, you can use NuxT.js, which is a framework based on a higher level of the Vue ecosystem to handle server-side rendering, making it easier for both server-side and browser-side to share a set of components. Of course, if the React stack is used, you can use the next. Js framework.