Front – and – back – end separation is a recent trend in Web development, and it has been used by a number of companies. So let’s talk about some of the concepts that you need to know and be exposed to in front and back end separation development: SPA, SEO, and SSR. Before we talk about these concepts, let’s talk about what I understand to be the separation of the front and back ends.

I understand the front and back end separation

background

At that time, I planned to participate in a competition. Since no one wrote the back end and the front end of the Web, I started to learn by myself and then did it while learning. We also had a mobile side of the project at the time, so the back end had to provide the interface to the mobile side in addition to providing the data to render the Web front page, and in fact the data at both ends was mostly the same. In traditional Web front-end development, the front end writes the page and then leaves it to the back end to integrate the page into the project. Here there is a front end coupling problem, first of all for the backend, not only to write the back-end logic, also have to integrate the front page (if the page where to have what problem that is more miserable, is tears ~ ~), and for the front end, is not easily to see the real renders the page looks like, display is not conducive to development and debugging, Efficiency is also in question here. It is precisely because of the high coupling between the front and back ends that changes in either side may affect the other. In view of some problems similar to the above, the idea of front and back end separation arises at the historic moment.

Basic Concepts:

The front and back ends interact with each other based on AJAX interfaces. At present, it is common for the back end to directly return data to the front end in JSON format, and the front end manipulates DOM according to the data returned by the back end server

The main advantages

  • The division of labor is clear, and the front and back ends each perform their own duties. The back end focuses on the implementation of business logic and functions, and the front end focuses on page design.
  • The interface is clear and developed in parallel. Before the back-end interface is well realized, the front end can completely simulate the interface by itself through the Web framework such as Node.js Express and KOA to provide test data.
  • Improve development efficiency, reduce the front and back ends to a certain extentCommunication costquarrel

In front end separation, the back end generally provides RESTful apis and usually returns data in JSON format. What does the front end use? This leads to one of our main topics: SPA.

SPA

An overview of the

The full name of SPA is Single Page Application (Single Page Web Application is used in Baidu Encyclopedia and some articles. I think single Page application should be its full name). SPA is a web application (WebApp) model. In traditional websites, switching between different pages is to load a whole new page directly from the server, while in the SPA model, it is to dynamically rewrite the part of the page to interact with the user, avoiding too much data exchange, and the response speed is naturally relatively higher. For example, please see the home page of Zhihu


Broken on the front page







Broken answer


Several SPA frameworks are common today

  • AngularJS
  • React
  • Vue.js

The advantages of the SPA

It has basically all the advantages of front and back end separation mentioned above, in addition to the following advantages

  • Switching between pages is very fast
  • Reduces some of the stress on the back-end server (regardless of page logic and rendering)
  • Back-end applications only need to provide apis, regardless of whether the client is a Web interface or a mobile phone, etc

The disadvantage of the SPA

  • The first screen is slow to open because the first load requires the user to download the SPA framework and the application code before rendering the page.
  • Is not conducive to SEO

According to these shortcomings, we will lead to the next two topics for discussion, SEO and SSR, first talk about SEO.

SEO

An overview of the

Before SEO understanding is not much, but also recently have some basic understanding of SEO. SEO (Search Engine Optimization) SEO is the process of adjusting a website to improve its ranking for certain keywords in search engines by understanding how search engines work (how pages are crawled, indexed, and displayed in order of search results based on specific keywords, etc.).

Commonly used technology

Search engine optimization technology can be roughly divided into two categories: white hat technology and black hat technology, SEO involves a lot of details, the following is wikipedia for some white hat technology introduction:

  • Use a short, unique and relevant heading on each page.
  • Edit the page with the theme of the page. Replace obscure words with specific terms concerned. This helps the audience the site appeals to, search on the search engine and be correctly directed to the site.
  • Add a fair amount of original content to the site.
  • Use reasonably sized, accurately described vocabularies without overusing keywords, exclamation marks, or irrelevant headline terms.
  • Pay attention to url wording to help search engine optimization.
  • Ensure that all pages are accessible through normal links and not only through Java, JavaScript, or Adobe Flash applications. This can be done by using a dedicated web page listing all the content of the site (sitemap)
  • Develop links through nature: Google doesn’t bother with this somewhat confusing guide. Write an email to the webmaster and tell him that you just posted a great article and asked for a link, which is likely to be accepted by the search engines.
  • Web rings that participate in other sites — as long as the other sites are independent, share the same topics, and are of comparable quality.

Without the non-development details, we should be able to extract the following information:

  • Title: that is, HTML<title></title>Labels, such as:The < title > introduction to SPA, SEO, SSR | XXX blog < / title >In GoogleThe related documentsIs no longer used<title>Tags are Meta, but are often used togetherdescriptionAppear on the search results

While technically not a meta tag, this tag is often used together with the “description”. The contents of this tag are generally shown as the title in search results (and of course in the user’s browser)

  • Description: HTML<meta>Of the labeldescription, for example, an entry in Baidu Encyclopediadescription:
<meta name="description" content=" <meta name="description" content=" META tags are used to describe attributes of an HTML web document, such as author, date and time, page description, keywords, page refresh, etc. ..." >Copy the code
  • Keyword: namely HTML<meta>Of the labelkeywords, e.g.
<meta name="keywords" content=" Meta tag function meta tag composition META tag attribute Meta Tag Description Design Meta tag error meta tag tag ">Copy the code

The use of meta keywords is not mentioned in Google’s documentation, and Quora discusses whether Google still uses meta keywords. Most of the answers are that Google no longer uses meta keywords, However, other search engines such as Baidu still use meta keywords.

Conflict between SPA and SEO

SPA mentioned above is not conducive to SEO, because at present, some search engines, such as Google and Bing, have crawlers that support JS execution or even data acquisition through AJAX, but their support for asynchronous data is not enough (or it may be unnecessary for search engine providers). Vue SSR says so

If your application initially displays a loading chrysanthemum graph and then fetts the content via Ajax, the fetching tool does not wait for the asynchronism to complete before fetching the page content.

As mentioned earlier, in SPA applications, data is usually obtained through AJAX, and here it is difficult to ensure that our pages can be properly indexed by search engines. Also, some search engines don’t support JS execution and data retrieval via AJAX, not to mention SEO. SEO is very important for some websites, such as Quora, StackOverflow, Zhihu and Douban, which are mainly about content output. How can SPA be used normally without affecting SEO? Lu xun yue:

There is always technology to solve technical problems

This is where SSR comes in

SSR

An overview of the

SSR stands for Server-side Rendering. In general SPA, it’s about sending frame and website code to the browser, You then generate and manipulate the DOM in the browser (and this is the main reason why the FIRST visit to the SPA site is slower than traditional HTML generation on the back end and sent to the browser with the same bandwidth and network latency), but you can also package the SPA application on the server, render the HTML on the server, and send it to the browser, Such HTML pages are not yet interactive, so they need to work with the SPA framework to “blend” into an interactive application on the browser. Therefore, as long as the reasonable use of SSR technology, not only can solve the problem of slow first screen to a certain extent, but also can obtain better SEO.

The advantages of SSR

  • Faster response time, no need to wait for all the JS to download, the browser can display a more complete page. I know this personally. At the beginning of my blog, I only used vue.js without server rendering. Besides, the server was not in mainland China, so it was almost 4 or 5 seconds, sometimes even longer, after I entered the address for the first time to see the complete page.
  • Better SSR, we can directly render SEO key information into HTML in the background, and ensure that search engine crawlers can crawl to the key data.

The disadvantage of SSR

  • The renderer used in SSR naturally takes more CPU and memory resources than a server that simply needs to serve static files
  • Some common browser apis may not work properly, for examplewindow,docmentandalertAnd so on, if it needs to be used to determine the operating environment
  • Development and debugging can be a bit tricky because of the complexity of managing the life cycle of some of the SPA’s components because browsers and servers are involved
  • The results rendered on the server side may differ from those rendered on the browser side due to certain factors.

Common SSR framework

  • The React of Next
  • Vue. Js Nuxt

I’m not familiar with React and Next, so I’m not going to comment. My blog uses Nuxt to do server-side rendering. I have to say that Nuxt is a pretty good use of Nuxt.

conclusion

The separation of front and back ends reduces the coupling degree of front and back ends and improves the development efficiency.

SPA is a solution of front end in front end separation;

SEO is very important for many websites and ordinary SPA is not good for SEO;

The emergence of SSR to a certain extent solved the problem of slow first screen in SPA, and greatly reduced the adverse impact of ordinary SPA on SEO.

The resources

  1. Search engine optimization – Wikipedia
  2. Search engine optimization – Wikipedia, the free encyclopedia
  3. How single-page Applications Work — Paul Sherman — Medium
  4. Meta tags that Google understands – Search Console Help
  5. Does Google use meta keywords in 2018? -Quora
  6. Vue SSR guide | Vue. Js server side rendering guide

This work is licensed under a Creative Commons Attribution – Non-commercial – No Deduction 4.0 International License. Reprint by staneyffer, first published on my blog, link to: chengfy.com/post/4