Node server-side rendering (SSR concept)

Single Page Application (SPA)

concept

The full name of single-page application (SPA) is: Single-page application, SPA application is presented on the client (term: CRS).

• SPA applications only return an empty HTML page by default, such as: body only
  。
• The entire application content is dynamically loaded through Javascript, including the application's logic, UI, and all data related to server communication.
• Common libraries and frameworks for building SPA applications include: React, AngularJS, Vue.js, etc.

Advantages and Disadvantages

◼ Advantages of SPA

• Just load it once
  • ✓ SPA applications only need to load the page on the first request, and page switching does not require reloading, while traditional web applications must load the page on every request, which takes more time. Therefore, SPA pages load faster than traditional web applications.
• Better user experience
  • ✓ SPAs provide an experience similar to desktop or mobile applications. Users switch pages without reloading a new page
  • ✓ Switching pages only changes the content, the page does not reload, making the experience smoother
• Easily build feature-rich web applications

◼ Disadvantages of SPA

• SPA applications only return an empty HTML page by default, which is not conducive to SEO (search engine optimization)
• When the resource loaded on the first screen is too large, it will also affect the rendering of the first screen
• Also not good for building complex projects, large files for complex web applications can become difficult to maintain

Crawler-workflow

Search Engine Optimization (SEO)

• ◼ Semantic HTML markup
  • For title

    , there is only one per page; use subtitles

    arrive

  • Do not overuse h tags, multiple uses will not increase SEO (search engine optimization)
  • For paragraphs

    , for lists

    • , and li is only placed in ul and so on.

• ◼ Each page must contain: title + internal links
  • The title corresponding to each page, all pages of the same website have internal links that can point to the home page
• ◼ Make sure the link is crawlable, as shown in the image below:
• ◼ Meta tag optimization: set description keywords, etc.
• ◼ Text tags and img:
  • For example, tags with bold text, crawlers will also pay attention to the content
  • If the alt attribute is added to the img tag, the image loading fails and the crawler will fetch the alt content.
• ◼ robots.txt file: Specifies which URLs on your site can be visited by crawlers.
• ◼ sitemap.xml site map: List all web pages in the site map to ensure that crawlers will not miss certain web pages.

Static Site Generation (SSG)

• ◼ The full name of Static Site Generation (SSG) is: Static Site Generate, which is a pre-generated static website.
  • SSG applications generally determine the content of the website during the construction phase.  If the content of the website needs to be updated, it must be rebuilt and deployed again.
  • Common libraries and frameworks for building SSG applications include: Vue Nuxt, React Next.js, etc.
• ◼ Advantages of SSG:
  • The access speed is very fast because each page is generated in advance during the construction phase.
  • Returning static HTML directly to the browser is also good for SEO
  • SSG applications still retain the characteristics of SPA applications, such as: front-end routing, responsive data, virtual DOM, etc.
• ◼ Disadvantages of SSG:
  • The pages are all static, which is not conducive to displaying real-time content, and real-time content is more suitable for SSR.
  • If the content of the site is updated, it must be rebuilt and deployed again.

Server Side Rendering (SSR)

concept

◼ The full name of server-side rendering is: Server Side Render, which renders the page on the server side and returns the rendered HTML to the browser for presentation.

• The pages of SSR applications are rendered on the server side. Every time a user requests an SSR page, it will be rendered on the server side first, and then the rendered page will be returned to the browser for presentation.
• Common libraries and frameworks for building SSR applications include: Vue Nuxt, React Next.js, etc. (SSR applications are also called isomorphic applications).

◼ Server-side rendering principle:

SSR advantages and disadvantages

◼ Advantages of SSR

• Faster first screen rendering speed
  • ✓ Browsers display static page content much faster than JavaScript dynamically generated content.
  • ✓ When the user visits the home page, the static page content can be returned immediately without waiting for the browser to load the entire application first.
• better SEO
  • ✓ Crawlers are best at crawling static HTML pages, and the server directly returns a static HTML to the browser.
  • ✓ This is helpful for crawlers to quickly crawl and index web content, which is good for SEO.
• SSR applications can still retain the interactivity of Web applications after Hydration. For example: front-end routing, responsive data, virtual DOM, etc.

◼ Disadvantages of SSR

• SSR usually requires more API calls to the server, and rendering on the server side consumes more server resources, which is expensive.
• A certain amount of development cost is added, and users need to care about which codes run on the server side and which codes run on the browser side.
• Caching for SSR-configured sites is usually a bit more complicated than for SPA sites.

SSR solution

◼ SSR solution:

• Option 1: php, jsp...
• Solution 2: Build an SSR project from scratch (Node+webpack+Vue/React)
• Option 3: Use popular frameworks directly (recommended)
  • ✓ React : Next.js
  • ✓ View3 : Nuxt3 | | View2: Nuxt.js
  • ✓ Angular : Anglular Universal

◼ SSR application scenarios are very broad, such as:

• SaaS products, such as: email websites, online games, customer relationship management systems (CRM), procurement systems, etc.
• Portals, e-commerce, retail websites
• Single page, static website, document website
• etc.