Internet data consumption using Vue.Js or similar

Question

Good morning, I have an application in Vue, where the upper and lateral Nav are static, and the content (body) is loaded according to the requests made in the Nav links. Vue speeds up the use a lot, loading only the center, but does that mean that the consumption of internet data is lower just by loading the body? Or he loads it all up again without us knowing?

Example: If there are two identical systems visually, one written in traditional html, and the other using Vue.Js, would Vue consume less internet? (knowing that html loads the full page again with each request)

Answer 1

in general, a SPA page after it is loaded will consume less bandwidth than a traditional application (Multi Page), however depending on how the implementation is, you will have to download a large amount of data in the first request. However, it is possible to overcome this problem using some techniques.

Lazy Loading

The idea here is that the component referenced by the route is loaded on demand. So instead of doing this.:

import SomePage from 'pages/SomePage'

const routes = [
  {
    path: '/some-page',
    component: SomePage
  }
]

we can declare the route as follows.:

const routes = [
  {
    path: '/some-page',
    component: () => import('pages/SomePage')
  }
]

PWA

PWA has come to tone the WEB experience as close as possible to using an application. And a PWA application should be.:

• Progressive - Work well in which browser.
• Responsive - Adapt to which screen you want
• Indepedente de Rede - Work even when offline
• Look like an App - The usage experience should be similar to an installed application.
• Always Updated - no need for comment.
• Sure - Always use HTTPS
• Indexable - Allow indexing by search pages (Google, Binq, etc).
• Engadable - Allow it to easily continue a task or be notified if something new appears (Push).
• Installable - Allow adding a shortcut to the desktop.
• Shareable - Share only using a Link.

To achieve this result, we must use everything within our reach, Services Workers to keep the application always up to date, Push API to notify the User, LocalStorage or IndexedDB to store data locally (dynamic content) and Cache API to store assets (images, fonts, etc).

SSR

Basically it is to allow your pages to be rendered also on the server. as we are talking about VueJS, you will need to use the Nuxt.js

Quasar Framework

Believe me, you can use everything at once, Lazy Loading, PWA, SSR and still deploy to Android and iOS using Cordova and Windows, Mac, Linux using the Electron, and the Quasar Framework will help you keep all these worlds together without creating pandemonium.