Vue.js与Nuxt.js的区别

Published at 2024-05-14 23:32:56Viewed 189 times

Pop-science article

Please reprint with source link

Vue.js与Nuxt.js都是前端的两个框架，Vue.js的项目属于单页应用，而Nuxt.js是基于Vue.js的服务端渲染通用框架。

单页应用简称SPA，指的是前端代码将会在浏览器端被浏览器渲染。这对SEO优化不利，搜索引擎爬虫，会爬到空的网页。在Vue项目中，Vue会将JS交给浏览器渲染因此，结果是查看源代码没有别的东西，搜索引擎爬虫也基本只能看到这些，于是便直接下一个了，不会等你渲染。

而服务端渲染，简称SSR，正是该问题的解决方案。前端代码会先在Node.js服务端渲染，然后再交给浏览器进行“二次渲染”。Nuxt.js则是Vue.js的SSR通用解决方案。前端代码经过服务端渲染后，能让搜索引擎爬虫看到完整的网站，同时查看源代码也能看到完整的代码。

服务端渲染能提高网站渲染速度，降低白屏时间。同时，因为要同时运行Node.js服务端，这增加了服务器的负载。在Nuxt.js中，可以设置部分页面SSR，部分页面则是SPA，这样能降低服务器的资源耗费。对于静态网站，可以使用预渲染替代服务端渲染。

预渲染，简称SSG，指提前渲染静态的html，提高页面响应。SSG一般适用于文档、个人博客等场景，即数据不会经常性发生变化的场景。SSG同样有利于SEO优化，同时不需要同时运行多一个服务端，降低了服务器的负荷。Nuxt.js中同样可以设置SSG，你可以根据自己的需求，将不同页面分别设置为SSR页面、SPA页面、SSG页面。

Comments

There is no comment, let's add the first one.

弦圈热门内容

npm run build error: Heap out of memory in Nuxt3

When running npm run build , an error may occur which looked like :<--- Last few GCs ---> [2656:000001DF58927940] 511573 ms: Mark-sweep 2013.9 (2091.6) -> 2012.7 (2091.4) MB, 1022.4 / 0.0 ms (average mu = 0.211, current mu = 0.009) allocation failure; scavenge might not succeed [2656:000001DF58927940] 513611 ms: Mark-sweep 2028.4 (2091.4) -> 2027.2 (2117.4) MB, 2021.5 / 0.0 ms (average mu = 0.083, current mu = 0.008) allocation failure; scavenge might not succeed <--- JS s ...

AI: Deep Learning vs Machine Learning

In the previous article Supervised and Unsupervised learning in machine learning, we explains the meaning of machine learning. As AI is making waves across industries, we often hear the terms "deep learning" and "machine learning" getting thrown around interchangeably. While both are crucial for AI advancements, they are indeed two different subjects with distinct characteristics. Deep learning is a branch of machine learning, whose methods are based on artificial neural networks (ANNs). In othe ...

How to split views.py to several smaller files in Django

When your views.py is too large, it becomes much more difficult to manage your code. So you might want to split views.py into several subviews, each of which contains a single sort of views.To split views.py, you could follow the following steps. Your original views.py might look like this:import ... def view1(request): pass def view2(request): passNow, create a new folder subviews aside with views.py , i.e. /Django/mysite/MyAPI/subviews. Next, create __init__.py, viewsa.py, and viewsb. ...

AI Spark Big Model

IntroductionDeveloping Artificial Intelligence (AI) has paved the way for the introduction of several related fields that rely on the model to enhance their operation. Various fields within global economies have adopted the functional and relevant aspects of AI to enhance their operation and communicate fluency in service delivery to the significant global populace. For instance, global finance, agricultural, legal, education, research, and security organizations have ensured they infused the mo ...

Advantages of AI Spark Big Models and Their Global Economic Benefit

IntroductionAI has been revolutionizing in business and provides the best opportunities for efficiency and novelty. Among the most striking developments that have taken place regarding AI are state-of-the-art models with phenomenal performance, which come in very wide applications. Equipped with sophisticated algorithms and huge volumes of data, such models—like OpenAI's GPT-4—can do versatile tasks in speedy and accurate ways (Hadi et al 2023). The following essay elaborates on the advantages o ...

What is base change map $U\times_{X}X\rightarrow U\times_{Y}Y$?

Let $X,Y$ be schemes. Let $f:X\rightarrow Y$, $g:Y\rightarrow Y$ be morphisms of schemes. Then we can form the base change\begin{CD} X\times_{f,Y,g} Y @>>> Y\\ @VVV @VV{g}V \\X @>{f}>> Y \end{CD}Therefore, for any morphism $U\rightarrow X$, we can form the fibre product $U\times_{Y,g} Y$ as follows:\begin{CD}U\times_{Y,g}Y @>>> X\times_{f,Y,g} Y @>>> Y\\ @VVV @VVV @VV{g}V \\ U @>>> X @>{f}>> Y \end{CD}Let $X\rightarrow X$ be the identity morp ...

Vertically aligning CSS :before and :after content

I am trying to centre the link with the image, but can't seem to move the content vertically in any way.<h4>More Information</h4> <a href="#" class="pdf">File Name</a>The icon is 22 x 22px.pdf { font-size: 12px; } .pdf:before { padding:0 5px 0 0; content: url(../img/icon/pdf_small.png); } .pdf:after { content: " ( .pdf )"; font-size: 10px; } .pdf:hover:after { color: #000; }

cover

A short introduction to category theory

This short note originated from a short talk of basic category theory in 2022. Category theory was first introduced by Samuel Eilenberg and Saunders Mac Lane in the 20th century. It rapidly became a strong tool in almost all domains of mathematics. Category theory studies the abstract structures of different mathematical objects, and it also has applications on computer science, including AI.1. CategoriesIn this section, we will first lay out the general definition of categories, then we give so ...

How to find similar strings with python?

Suppose that we have a string str together with a list of strings arr = [str1, str2, ... ]. How to find similar string of str in arr? To do this, we can calculate the similarity of str and elements in arr one by one. But how to calculate the degree of similarity between str and an element in arr? First, we need a measurement of the similarity of two strings. In fact, there are many methods that measure the similarity of strings. In this tutorial, we will use python to find similar strings of str ...

Vue - Go to anchor smoothly without changing url

In Vue.js, we can define an anchor by RouterLink or HTML tag <a> , while in Nuxt.js, we can additionally use NuxtLink which is similar to RouterLink .<a href="#content">My Link</a> <RouterLink to="#content">My Link</RouterLink> <NuxtLink to="#content">My Link</NuxtLink>However, on loading a page, the above ways would change the url which makes it slow to go to #content . To speed up anchor link and not change the url, there are two ways.The first way is ...

Nuxt 3 Error TypeError: Cannot read properties of null (reading 'shapeFlag')

I encountered such an error when using Nuxt 3.8 :TypeError: Cannot read properties of null (reading 'shapeFlag')The error is a bit misleading to me, because I have defined a Dialog component which is also named Flag . I used Flag in two different pages, one of which was ok, but the other one threw out such an error. I tried to add ClientOnly to Flag , but the error was still there.I thought that the issue is my UI library. I am using ElementUI Plus, and my Flag component is indeed defined by wra ...

数据清洗之异常值处理

在数据清洗过程中，异常值处理是一个非常重要的步骤。异常值，也称为离群值或异常点，是指与大多数观察值明显不同的观察值。这些值可能是由于测量错误、数据录入错误、设备故障或者真实现象的特殊情况而产生的。异常值可能会对数据分析和建模产生负面影响，因此需要进行适当的处理。下面是一些常见的异常值处理方法：删除异常值：最简单的方法是直接删除异常值。这种方法适用于异常值数量较少、对数据整体影响较小的情况。但是，如果异常值数量较多或者对数据整体影响较大，则不建议使用这种方法。替换异常值：可以用数据集的其他统计特征值（如均值、中位数、众数）来替换异常值。这种方法可以保持数据集的整体分布特征，并且相对于直接删除异常值，对数据的影响较小。分箱处理：将数据分成多个箱子（bins），然后用每个箱子的均值或中位数来代替箱子中的异常值。这种方法可以减少异常值对整体数据的影响，并且保持了数据的整体分布特征。基于模型的方法：可以使用回归、聚类或其他机器学习模型来识别和处理异常值。这些模型可以自动识别数据中的异常值，并提供相应的处理方案。使用离群值检测算法：可以使用一些专门用于检测异常值的算法，如孤立森林、局部异 ...