How much slower is the frontend part of django than running the pure frontend by talking to django using the API?

Question

Django

I'm going to write my own website. I want, before starting, to get acquainted with Vue.js, nuxt.js. Speaking with one developer, according to him, when he uses Vue.js, and using the API receives data from the server, it is much faster than rendering the page using django Is this true? (But, by the way, his site loads really quickly and it's not just a landing page)

Answer 1

Measure rendering speed with the Google Chrome Developer Tools. This is a very relative statement.
Page rendering speed is not quite the right term. You measure the time:
1. During which you receive a response from the server to your request
2. During which the browser downloads all the files to build the page
3. During which the browser displays the first payload (not the loader)
4. During which the browser completely renders the page
In the case of Django:
1. The request goes through Nginx - to wsgi
2. Wsgi looks for the correct URL binding
3. Wsgi starts all Middleware
4. Wsgi starts the view
5. After the view has completed, the HTML code is returned through all the Middleware
6. The browser receives the code of the whole page with all links to files and images. Let's say a 20 kilobyte page and about a hundred more links on it.
In the case of Vue.js:
1. The request comes to nginx
2. Nginx looks for the required html file and returns it.
3. A small file with one js comes to the browser. There is nothing in fact, except for the vue.js script and an empty html file.
What does it all mean?
1. Django always runs its Middleware to get HTML code. Plus, the view itself
2. Django returns a ready-made HTML page. That's a lot of code and a lot of links in code
3. Modern browsers download files from links in code in parallel. That is, loading and rendering 100 files in parallel will be faster than loading and rendering a single file.
Here, however, it is worth arguing: Loading 100 files to render a page is faster than, say, 5 files because these files immediately begin to be displayed after loading. Part of the page can not be rendered at all and loaded later. In the case of classic browser page rendering, these 5 files will download at once, and we will wait for each of these files.
Of course, if we take data copying or the same FTP, downloading 100 small files will never be faster than downloading one file, since each download will create a request to the server and wait for a response.
So, the user's browser received HTML code with one link to Vue.js. Arrived faster than the Jungi code. Now Vue.js starts to load additional data from the server (multithreaded) and render it. Rendering takes place on the client side, and the final rendering time depends on the speed of the client machine. In any case, Vue.js has already gained an advantage: it downloads data faster to display the primary content, it can download the page in parts in parallel.
Suggestions:
1. Optimize your Django code. Use page caching where possible. Use fast Redis Cache.

from django.views.decorators.cache import cache_page

pages_urls = [
    re_path(
        r'^account/',
        cache_page(
            60 * 60 * 24 * 30
        )(
            TemplateView.as_view(
                template_name='base.html'
            )
        ),
        name='account'
    ),
]

2. With this approach, you can enable gzip compression of pages before caching to reduce their weight.
3. Reduce the Number of Middleware
True, your friend can do the same for Vue.js, and he will have a more significant increase in page rendering speed.
Conclusions:
Vue.js is not exactly faster than Django. It's just that the architecture itself allows it to load larger pages in the same time as Django. Vue.js is ready to show the first content on the page before Django does. Vue.js loads page parts and content in parallel on multiple threads. Vue.js, when receiving static HTML, JS, CSS files, does not wait for the server to execute python or php code, working directly with nginx. So, under equal conditions, this will be faster than getting the entire page from Django.
Also, keep in mind that the browser will wait for Django to fully load the main HTML content before rendering it. During this time, Vue.js will already show the first content. After that, Vue.js will quietly download the remaining files. If you compress all js into one file and all css into one file, then the browser will wait for them to load. Vue.js can render the page first, and then load the missing code later.

Answer 2

because it uses Vue.js and receives data from the server via API, it is much faster than rendering the page with Vue.js.

Based on this - it does exactly that, which renders the page using vue.
You probably mean that he uses nuxt as it is usually faster.