Angular Advanced Four: SSR Application Scenarios and Limitations

Application scenarios

Dynamic web pages with rich content and complex interactions, projects that require first-screen loading, and projects that require seo (because of the service When the client renders for the first time, the keywords and titles have been rendered into the response html . The crawler can crawl this static content, so More conducive to seo). Some projects suitable for this method: event templates, news notification classes, blog systems, hybrid development, etc.

Advantages of SSR:

AdvantageSEO:

Different crawlers work similarly. They will only crawl the source code and will not execute any scripts on the website (except for Google, it is saidscript. >, the complete page information can be captured during web crawling. JavaScript a>HTML and can be crawled by crawlers The content for analysis is greatly reduced. In addition, browser crawlers will not wait for our data to be completed before crawling our page data. What the server-side rendering returns to the client is the final HTMLjs elements are dynamically generated on the client based on DOM framework, most of the pagesMVVM or other React). After using javaScriptcan runGooglebot

Next, use node to write a simple request to obtain the page content.

const fs = require('fs')

fetch('http://localhost:4200')
  .then(response => response.text())
  .then(html => {
    // 使用 fs 将获取到的内容保存到本地便于比对
    fs.writeFileSync(`${__dirname}/CSR.html`, html);
    console.log('HTML:', html);
  })
  .catch(error => {
    console.error('Error fetching the page:', error);
  });

Comparison of SSR and CRS page content crawling

The picture below is the page built by CSR . When the page is obtained through a crawler, you can see that only the project package is crawled dist in file index.html file
where The data that can be used for SEO is only Title one line of code, for the entire project SEO not very friendly

The picture below is SSR constructed page, obtained through crawler
SSR The built page can crawl all the content on the page, including some of the data rendered on the backend, and the read data can be used as SEO

Conducive to first screen rendering

The rendering of the first screen is sent bynodehtmlStrings do not depend on js files, which will allow users to see the content of the page faster. Especially for large single-page applications, the file size after packaging is relatively large. It takes a long time for ordinary clients to render and load all the required files, and there will be a long white screen waiting time on the homepage.

• Compare SSR and CSR home page loading speed
  • It can be seen from Network that the initial HTML of the page built by SSR is generated on the server and rendered on the server. The server returns the rendered HTML content to the client
  • The project built by CRS will first obtain the JS file, and then request it after obtaining it. The interface obtains data. If the JS file is relatively large, there will be a long waiting time to form a white screen on the homepage

limitations

The server is under great pressure

SSR Move page rendering to the server side. Every click and modification of the page needs to be called, which will increase the pressure on the server. Compared with this, < a i=2> CSR More convenient

Development conditions are limited

In server-side rendering, only ngOnInit , ngOnDestroy, ngAfterViewInit, ngAfterContentInit and other life cycle hooks, so the project The referenced third-party libraries also cannot use other life cycle hooks, which greatly limits the choice of reference libraries;

Complex client interactions

SSR: typically requires more server-side configuration and complex code. The front-end and back-end are more tightly coupled, and development and maintenance are relatively complex.
CSR: is easier to implement, and the front-end and back-end are completely separated. The front-end is responsible for rendering and interaction, and the back-end provides a>. API

In some projects, a mixture of SSR and CSR < a i=4> way, this is called"Progressive rendering"(Progressive Rendering). This can make full use of the advantages of SSR to improve the first-screen loading performance, and at the same time use it in the more interactive parts of the page. CSR.