Server-side rendering basics

SPA single page application

• advantage
  • Good user experience, high development efficiency, good rendering performance, good maintainability...
• Disadvantage
  • The first screen rendering time is long, not the server-side rendering is good, but js generates html on the client-side
  • Not conducive to seo. When the search engine crawls the html content, the html of a single page has no content, and it needs js to parse it to generate the web content

Isomorphic application

• The front-end framework code is executed on the server side to generate web content, which is returned to the client, and the client is only responsible for displaying
• Through the server-side rendering of the first screen straight out, solve the problem that the spa application's first screen rendering is too slow and not conducive to SEO
• Take over page content interaction through customer service side rendering to get a better user experience
• This method is usually called modern server-side rendering, also called isomorphic rendering
• Applications built in this way are called server-side rendering applications or isomorphic applications

Rendering

• Splicing data and templates together, the essence: analysis and replacement of character exchange

Traditional server rendering

• Disadvantages of complex web pages
  • The front-end and back-end codes are completely coupled together, which is not conducive to development and maintenance
  • There is not enough room for the front end
  • Server pressure is high
  • General user experience (refresh every page you visit)

Client rendering

• Ajax makes it possible for the client to dynamically obtain data
• The backend is responsible for processing the data interface
• The front end is responsible for rendering the interface data to the page
• The front end is more independent and not restricted by the back end
• insufficient
  • First screen rendering is slow
  • Not conducive to seo

Why is the client rendering slow (white screen)

• At least three http request cycles are required
  • Request html
  • Request js script
  • Request data
• Server-side rendering and loading HTML once

Modern server rendering

• Isomorphic rendering = back-end rendering + front-end rendering
• Process
  • Based on frameworks such as react and vue, the combination of client-side rendering and server-side rendering
    • Execute once on the server to implement server-side rendering
    • Execute again on the client side to take over the page
• The core solves the problem of slow rendering of seo and first screen
• Has the advantages of traditional server-side rendering and also has the advantages of client-side rendering

Issues with isomorphic rendering applications

• Limited by development conditions
  • Browser-specific code can only be used in certain lifecycle hook functions
  • Some external extension libraries may require special processing before they can be used in server-side rendering applications
  • Cannot manipulate dom during service rendering
  • …
  • Certain code operations need to distinguish the operating environment
• More requirements involving build setup and deployment
  • Construction: client-side rendering only needs to build the client-side application, isomorphic rendering needs to build two ends
  • Deployment: The client can be deployed to any web server, and isomorphic rendering can only be deployed on node.js Server
• More server load
  • Rendering a complete application in node requires a lot of CPU resources compared to a server that only provides static files
  • If the application is used in a high-traffic environment, the corresponding server load needs to be prepared
  • Need more server-side rendering optimization work processing
  • …
• Suggestions for server-side rendering
  • Does the first screen rendering speed really matter?
  • Do you really need SEO