This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

MPA – Multiple pages application

Multi-page applications have a more classic architecture. Each page sends a request to the server and fully updates all data. Even these small numbers can affect speed and performance.

In Node, for example, when we request the home page, we are essentially asking for a piece of HTML code, and if we want to jump to About, we need to load about.html.

var http = require('http');
http.createServer(function (req, res) {
    if (req.url == "/") {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(fs.readFileSync( '/index.html'));
    }
     if (req.url == "/about") {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(fs.readFileSync( '/abour.html'));
    }
}).listen(8080, function () {
    console.log("http://localhost:8080");
});
Copy the code

Advantages:

Easy to manage SEO appropriately. It provides a better opportunity to rank different keywords because applications can be optimized for one keyword per page.

Easy to develop. Typically, developing multi-page applications requires a smaller technology stack.

Disadvantages:

Application development takes longer. In most cases, you need to write the back-end code from scratch. The front and rear ends are difficult to separate. Usually, they interact very closely with each other. The work of front-end and back-end developers is increasingly complex. The main advantages of MPA are good SEO optimization and many framework solutions.

MPA is a tightly coupled front-end and back-end unit, meaning that the code is not well decoupled, so repetitive code cannot be reused

SPA- Single Page Application

A single-page application is an application that runs in a browser and does not require a page reload during use.

They are faster than traditional Web applications because they perform logic in the Web browser itself rather than on the server. After the initial page loads, only data is sent back and forth, not the entire HTML, which reduces bandwidth. They request tags and data independently and render the page directly in the browser.

For example, in VUE. We will have an index.html as a template for page loading

The first is a static template file called index.html <! DOCTYPE html> <html lang="en"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <head> <title>Document</title> </head> <body> <div id="app"></div> </body> </html>Copy the code

Then, in main.js, you might have a node with id=app as the root node of the element, where all the elements end up hanging.

import Vue from 'vue'
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App),
})
Copy the code

We’ll also have an app. file with a TAB that displays the page needed to display it. For example, on the About page, it simply loads the about.vue content into the tag and eventually mounts it into the index.html file

<template>
    <router-view />
</template>

<script>
</script>
Copy the code

Single-page application routing jump, although the browser’s url address changes, but did not send the request, no refresh the entire page, according to our configuration of routing information and routing and switching per click will switch to the different components, according to the similar to the realization of the function of tabs, but at the same time will change the url address bar

Advantages:

Speed and responsiveness – single-page Web applications are fast; With them, the server doesn’t have to reload most resources, such as HTML + CSS + scripts, with each interaction – just initial loading. Then only new data is downloaded from the server. In addition, spAs only reload specific pieces of content, so their servers are less loaded.

The ability to separate data, UI-SPA can distinguish between data and the user interface. This can greatly help simplify testing during single-page application development. The interface is not affected.

Disadvantages:

The first screen is slow to load, because all required JA CSS files are requested and all components are loaded when the home page is loaded. You can check the loading speed through network. For VUE, we can use the lazy loading feature that comes with vue-Router to load components. Or you can use NuxT for server-side rendering.

Not good for SEO, SPA is part of the rendered data, the rest will not be captured by search engines.