Detailed explanation of steps for front-end and back-end isomorphism with JS

This time I will bring you a detailed explanation of the steps for JS to perform front-end and back-end isomorphism. What are the precautions for JS to perform front-end and back-end isomorphism? The following is a practical case, let's take a look.

What is front-end and back-end isomorphism

Clear three concepts: "Back-end rendering" refers to the traditional ASP, Java or PHP rendering mechanism; "Front-end rendering" It refers to using JS to render most of the content of the page, which represents the now popular SPA single-page application; "isomorphic rendering" refers to the front-end and back-end sharing JS, and

Node.js is used to directly output the HTML when rendering for the first time. Generally speaking, isomorphic rendering is a common part between the front and back ends.

It feels like the front-end is really a toss-up. Separation of front-end and back-end was popular before. Why do we need to make front-end and back-end isomorphism now?

The reason is that the popular SPA front-end single-page application is relatively heavy and requires a lot of files to be loaded for the first visit. The first load is too slow and the user needs to wait for the front-end to render the page. It is not conducive to SEO and caching, and has certain development thresholds.

By reusing templates and JS files, the front-end and back-end isomorphism allows a code to run on the server and browser at the same time. For the first rendering, use nodejs to render the page, and then use SPA

RouteJump . It can effectively reduce the waiting time for users to access for the first time, and is friendly to SEO and easy to cache.

Project Introduction

This front-end and back-end isomorphic project is mainly divided into two parts, one is a rendering server based on koa2, and the other is based on native JS and zepto Front-end SPA.

The project is characterized by not using frameworks such as vue and react, low threshold, fast development speed, easy to get started, relatively lightweight, and the core router part only has about a hundred lines of code. It is suitable for scenarios where there are few page interactions and infrequent changes, and can effectively improve performance and loading speed.

Front-end part

The core of the front-end part is the routing part. The specific implementation can be based on history API or hash. There are many implementations on the Internet. This time we mainly talk about the architecture

The front-end part adopts MVC hierarchical structure.

What the router layer does is mainly to create routing examples, call the get method of the routing, and bind functions from the control layer to specific pages.

Form such as:

import control from '../control'
//路由的构造函数支持传入渲染函数，路由的全局名称，路由跳转前调用的钩子
router = new Router(render,'ROUTER',beforeFn)
router.get('/page/a', control.pageA')

The main purpose of the control layer is to load the rendering template and rendering data shared with the backend, and run the page function after rendering the page

Form such as:

let control = {
 pageA(req,res) {
  //webpack的动态加载，代码分割功能
  import(/* webpackChunkName: "pageA" */'script/pageA').then(module=> {
  // 检测该页面是否已有服务器渲染好，是的话直接运行module.default
  //否则加载模板和数据进行渲染,最后再调用页面函数
  if(this.needRender(module.default)) {
  //加载数据时访问的地址就是当前准备渲染的页面地址，只是加上了json=1的参数
   loadData('pageA').then(data => 
    res.render(xtpl,data,module.default))
  }
 }
}
// 捕捉webpack热更新，让他只进行相当于页面跳转的操作而不是刷新页面
if(module.hot) {
 module.hot.accept(['script/pageA'], () => {
  control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
 })
}

The view layer is the template. The xtpl template is used here. It supports rendering the page in both the server environment and the front-end environment.

The form of the page function

page The function requires the use of es6 module writing, in conjunction with the on-demand loading function of webpack

export default () => {
 window.addEventListener('scroll', fn)
//页面函数支持返回一个卸载函数，在页面离开的时候会被调用
//主要用于内存的释放，定时器的清除，事件监听的移除等等
 return function () {
  window.removeEventListener('scroll', fn)
 }
}

Backend part

A rendering server built using koa2, after receiving the front-end transmission When a page request comes, it will request data from the API server and identify whether the page request has the parameter json=1. If it does, it is a request when the front-end route jumps, and the data can be returned directly. If it does not include json Parameters, load the template shared with the front end, render it with the data, and send it to the browser.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of vue-devtools installation steps

Detailed explanation of class usage in js and typescript

The above is the detailed content of Detailed explanation of steps for front-end and back-end isomorphism with JS. For more information, please follow other related articles on the PHP Chinese website!