In the separation of front and back ends of the web, how is the big front end realized?

  node.js, question
  • In front-end and back-end separation practice, nodejs is used as a page template rendering alone, but how is it used, how is it combined with the front-end MVVM framework, and how is it shared routing?

  • Taobao mentioned xttemplate, which means that after the Node layer obtains the data, it directly renders the page template with xttemplate? Then the front-end MVVM framework does not need routing or what do you say?

  • It is better to have a specific code instance

  • If Nodejs is also used in the back end, it feels a bit strange to write api separately.

  • I am using vuejs and vue-router now.

  • It is very confusing, thank you, thank you

Well, basically, I understand what my problem is. Let me talk about it.

  • First of all, I mixed up the two problems. I’m very sorry for that. When I read a few articles about the evolution history of the separation of the front and back e nds of the web, I mistakenly thought that the last two stages, that is, the evolution of ajax to the last node hierarchical mode, were the realization of a set of perfect separation scheme of the front and back ends of the web to solve SPA and SEO, but in fact it was not. This was the key point of my thinking error.

  • In fact, the last stage in a series of articles on the separation of the front and back ends of the web does not mention SPA application, but is still a global refresh web application. Therefore, its specific implementation method is to obtain API data from the back end on nodejs, render templates and output HTML in the former back-end mode on node, like thisThe front end is the front end responsible for starting from the node rendering template, and the back end is responsible for the back end api.As the result is still output as HTML, the SEO problem is naturally solved and the front and back ends are completely separated.
    图片描述

  • Naturally, I hope to have a perfect plan to realize SPA, but I don’t know for the time being. In order to realize SEO, the current SPA application has learned from small partners that there are two plans:

  • 1. Use Pjax technology

The back end creates a corresponding pure HTML static page for each page to be captured,
The link href attribute in the website page is set to the static page link generated by the back end. The front end parses the URL of the acquired data through JS according to the rules for AJAX request.
For example, a link to the details of a house on the website:< a href="/house/6734/detail "> villa near XXX university < /a >
The search engine will capturehttp://www.uhouzz.com/house/6734/detailThis background generated static page
The front end requests ajax based on the href attributehttp://www.uhouzz.com/house/6734/detail? _pjax=trueOrhttp://www.uhouzz.com/_pjax/house/6734/detailAnd then render the returned data to the page.
目前GitHub,Twitter等网站都在使用PJAX方案.该方案可行, 但前端&后端工作量都比较大.

  • 2. Use of Search Engine Optimization

At present, there are many Search Engine Optimization for SPA single-page websites abroad, such as Prerender.io
Principles of Search Engine Optimization Technology:
When a search engine crawler accesses your application and sees<meta name="fragment" content="!" >, it will add a to your URL? _escaped_fragment_=tag.
The server intercepts the request and sends it toPrerender.ioHandle this special crawler request.Prerender.ioIt will check whether the requested page has an existing snapshot (or cached page). If so, it will respond to the crawler. If not, it will callPhantomJSTo render the entire page and respond to the crawler.
At presentDomestic Ele.me WebsiteThis service is used. There are many successful cases abroad.Prerender.ioAt present, the fee is based on the number of pages, and is free within 250 pages.
$20/ month within 20,000 pages. Specific charging scheme

At presentPrerender.ioOfficial deploymentNode.jsEnvironmental solution, that is to say, if we adopt this solution, we need support.Node.jsIn addition, there are also solutions developed by third parties that support PHP environment to choose from.

Advantages:

It can be used across projects and reused, and Webapp can also be used in the future with minimal later workload. the service has its owndashboard,
You can summarize and see which search engine crawlers have captured which page data. If you use Node.js service, SEO work requires no back-end colleagues to cooperate, only the front end can be done.
Disadvantages: Charge.

Well, I hope there is a better SPA plan. The current SPA may also use Pjax to carry out targeted SEO, so that those that need to be searched can be statically output to the search engine. Perhaps these are also the reasons why SPA has not developed and popularized so fast. It is not so fast and convenient to implement, and I hope there is a better answer!