Next.js vs NuxtJS:两个强者的比较

Vue小助理

111人浏览 · 2022-08-27 14:07:48

Vue小助理 · 2022-08-27 14:07:48 发布

by詹妮弗·奥罗-奥格尼·埃特格贝克

随着每年新框架的发布,要跟上 JavaScript 生态系统的发展速度是一项挑战。了解不同的 JavaScript 框架至关重要,尤其是如果您是需要更直接方法的初学者。

如果没有 JavaScript 框架,现代前端 Web 开发是不完整的,它为程序员提供了用于创建可扩展、动态 Web 应用程序的可靠工具。今天,前端开发专业通常需要熟悉框架,因为许多现代企业都将它们用作基本的工具组件。我希望本文能为您在了解不同框架时提供一个很好的起点。

对于有抱负的前端开发人员来说,在学习框架时决定从哪里开始可能具有挑战性,因为有很多选择,不断创建新的,它们在很大程度上操作相似,但执行某些任务不同,还有一些需要注意的事情在使用框架时。

在本文的最后,您将熟悉Next.js和NuxtJS的组件,并对这两个框架有基本的了解并选择适合您的框架。

什么是 NuxtJS?

NuxtJS 是一个免费的开源 JavaScript 框架,用于构建 Vue.js 应用程序。它的目标是让 Vue 开发人员从尖端技术中受益,使其变得简单、快速和有条理。 NuxtJS 受到 Next.js 的影响,Next.js 是一个基于 React.js 构建的具有类似目标的框架。

您的 Vue.js 项目的基础是 NuxtJS,它提供了结构和灵活性,因此您可以放心地构建它。 NuxtJS 专注于提供出色的开发人员体验,旨在使 Web 开发变得简单有效。你可以专注于重要的事情——创建你的应用程序——用它。

NuxtJS 3 公测版中的新功能于 10 月发布,让开发人员有更多时间专注于创造出色的用户体验。结果,NuxtJS 社区的增长呈爆炸式增长。

模块生态系统

为了扩展框架的基础并简化集成,NuxtJS 提供了一个模块系统。 NuxtJS 提供的高阶模块系统使核心得以扩展。 NuxtJS 启动时,模块是按顺序调用的函数。如果有一个现有的 NuxtJS 模块,您不需要从头开始创建它或维护样板文件。 “Nuxt.config”可用于添加 NuxtJS 模块。

可以将插件和配置设置添加到 NuxtJS,但在各种项目中管理这些调整可能是费力、重复和耗时的。但是,如果 NuxtJS 要开箱即用地满足每个项目的要求,那么使用起来会过于复杂和具有挑战性。

这是 NuxtJS 提供模块化架构以支持核心扩展的原因之一。除了许多其他有用的活动之外,他们还可以配置 webpack 加载器、安装 CSS 库和更改模板文件。 NuxtJS 模块在 npm 包中的分布是最好的部分。要了解有关 NuxtJS 模块的更多信息,请单击此处[(https://nuxtjs.org/docs/directory-structure/modules/)和此处。

组件自动导入

为了执行数据获取、访问应用程序上下文和运行时配置、管理状态或构建组件和插件,NuxtJS 自动导入函数和可组合项。您的 components/ 目录中的任何组件都会立即由 NuxtJS 导入(以及您可能正在使用的任何模块注册的组件)。

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

在 NuxtJS 3 中,我们收到了一个名为“composables/”的新文件夹,它将自动导入您编写的 Composition API 函数。组件在“components/”文件夹中自动导入,基于文件的路由在“pages/”文件夹中。单击此处了解有关 NuxtJS 自动导入的更多信息。

渲染模式

渲染是浏览器和服务器通过读取 JavaScript 代码将 Vue.js 组件转换为 HTML 元素的过程。

NuxtJS 支持客户端和全局渲染。可以使用客户端呈现技术创建具有无缝页面转换的复杂动态用户界面 (UI)。在保持客户端渲染优势的同时,通用渲染使 NuxtJS 应用程序能够提供快速的页面加载。此外,由于内容已经包含在 HTML 文本中,爬虫可以毫不费力地对其进行索引。

除了确定服务器应如何响应特定 URL 上的新请求外,混合渲染还允许每个路由使用各种缓存规则。

JavaScript 应用程序经常难以处理 SEO 和 Meta 标签。这是因为当我们依赖 JavaScript 来获取我们的数据(例如内容和元描述)时,页面最初是空的。此外,在执行 JavaScript 之前没有要索引或处理的材料。此外,很多爬虫不支持 JavaScript。因此,如果您在 Facebook 上分享来自 JavaScript 博客的文章,则该文章的标题可能会显示为“未定义”,而不是原始文章的标题。服务器端渲染(SSR)可以在这种情况下拯救我们。 SSR 背后的目标是托管一个服务器,该服务器将生成 HTML 响应并将其提供给爬虫或客户端。因此,在上面提到的示例中,服务器将处理对 API 的调用,之后将设置元数据,并传递最终页面。当爬虫解析页面时,所有的元和 SEO 信息都会出现。

使用 NuxtJS 3,现在可以进行混合渲染。这将使您可以使用增量静态生成等功能,它结合了服务器端渲染 (SSR) 和静态站点生成 (SSG) 以及其他复杂模式。渲染模式也可以在这里找到和这里。

文件系统路由

对于每个页面,NuxtJS 都提供自动路由和代码拆分。 NuxtJS 会根据 pages 目录中的 Vue 文件树自动创建 Vue-router 配置。在页面目录中创建 .vue 文件以使基本路由正常工作后,您无需进行任何其他配置。

这个文件树:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

会自动生成:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

使用 Vue Router 作为后端,可以使用基于文件的路由在您的在线应用程序中构建路由。如果您只使用 app.vue,则不会包含 vue-router,因为此目录是可选的,从而减少了应用程序的包大小。在整个应用程序中,NuxtJS 提供了一个定制的路由中间件框架,非常适合在转到特定路由之前提取您想要执行的代码。

在 NuxtJS 应用程序的 Vue 组件中运行的是路由中间件。尽管名称相似,但它们与在应用的 Nitro 服务器上运行的服务器中间件不同。更多关于 NuxtJS 文件路由的信息可以在这里找到。

零配置

NuxtJS 的默认配置涵盖了大多数用例。 nuxt.config.js 文件允许替换默认配置。您可以使用 NuxtJS 指定要使用的全局 CSS 文件、模块和库(包含在每个页面上)。将这些 CSS 资源添加到 nuxt.config.js:

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

NuxtJS 将根据其扩展名自动确定文件的类型,并为 webpack 使用适当的预处理器加载器。如果你想使用它们,你仍然必须安装必要的加载器。您可以省略 NuxtJS 配置文件中 CSS 数组中指定的文件的文件扩展名,例如 CSS、SCSS、Postcss、Less、Stylus 等。

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

当您直接处理应用程序代码时,NuxtJS 会处理其余部分。这里是有关 NuxtJS 配置的更多信息。

数据获取

您可以使用 NuxtJS 将任何来源的内容获取到支持 SSR 的 Vue 组件中。 NuxtJS 提供 Fetch 方法 和 asyncData 方法 作为从 API 获取数据的两 (2) 种方法。

组件实例建立后,Fetch 是在导航和服务器端渲染期间在客户端调用的钩子。 fetch 钩子应该(通过 async/await 显式或隐式地)返回一个将被履行的承诺:在第一页呈现在服务器上之前,以及在组件安装到客户端之后。

使用静态托管时,仅在创建页面时使用 fetch 挂钩,然后缓存输出以供客户端使用。为您的组件提供一个名称可能很重要,否则,提供一个特殊的 fetchKey 实现以防止缓存冲突。

全局数据检索的另一个钩子是 asyncData。与 Fetch 不同,它需要您执行 Vuex 操作或更改组件实例的属性以保留您的异步状态,asyncData 只是将返回值与组件的本地状态相结合。使用@nuxt/http 库,考虑以下示例:

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

N/B:asyncData 仅供页面访问;钩子无法访问它。有关数据获取的更多信息,请参阅此指南。

SEO优化

NuxtJS 有三个选项可以在应用程序中包含元数据:

1、全局使用nuxt.config.js

局部以头部为对象
在本地使用 head 作为函数来检索数据和计算属性

NuxtJS 提供元标记管理和更快的内容以实现出色的索引。这里是关于元标签和 SEO 的更多指南。

NuxtJS 的优点

NuxtJS 是可扩展的,并且由于其强大的模块生态系统和钩子引擎,可以轻松集成您最喜欢的 REST 或 GraphQL 端点、CMS、CSS 框架等。以下是使用 NuxtJS 的众多好处中的一部分:

您可以在 NuxtJS 的帮助下部署快速且对 SEO 友好的全栈 Vue 应用程序,它还提供了一个引人注目的解决方案和一个伟大的生态系统。
凭借其创新方法,NuxtJS 将卓越的开发人员体验与可重用、完全集成的功能融合在一起,从而加速您即将推出的网站或应用程序的创建和功能。
NuxtJS 的简单性和循序渐进的学习曲线使其成为一个绝佳的选择。
在服务器端渲染 (SSR) 和静态站点生成之间,NuxtJS 提供了多功能性 (SSG)。
除了自以为是的设置和结构外,NuxtJS 还提供自动代码拆分、有效的团队合作以及可靠的目录布局和约定。

NuxtJS 的缺点

每个好处都有一个匹配的缺点。下面列出了使用 NuxtJS 的缺点:

由于其社区较小,NuxtJS 可用的资源较少,而且可能不太完整的产品文档。
在您的服务器上,高流量可能特别费力。
只有特定的 Hooks 允许您与 DOM 交互和查询。
让自定义库与 NuxtJS 一起工作可能具有挑战性。
毫无疑问,有流行的、可靠的插件或缺少的元素,例如日历、谷歌地图、矢量地图等。虽然还有额外的组件,但它们通常都没有得到很好的维护。

开源会话重放

OpenReplay是一个开源的会话回放套件,可让您查看用户在您的 Web 应用程序上的操作,帮助您更快地解决问题。 OpenReplay 是自托管的,可以完全控制您的数据。

开始享受您的调试体验 -开始免费使用 OpenReplay.

Next.js是什么?

Next.js 是任何 React 开发人员学习和改进项目的最佳工具。它是一个建立在 Node.js 之上的开源 Web 开发框架,有助于服务器端渲染和为基于 React 的 Web 应用程序部署静态网站。

Next.js 提供了最好的开发人员体验,它具有生产所需的所有功能,包括 TypeScript 支持、智能捆绑、路由预取以及混合静态和服务器渲染。无需配置。

Next.js 提供的几项尖端功能将推动您的在线应用程序。 Next.js 的特点如下:

文件系统路由

以页面为基础,Next.js 有一个基于文件系统的路由器。将文件添加到 pages 目录时,路由将自动变为可用。您可以使用 pages 目录中的文件定义大多数模式。

索引路由、嵌套路由和动态路由的分段在此处可用。当使用这个 Index 路由时,路由器会自动将名称为 index 的文件定向到目录的根目录。

'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'

路由器与嵌套路由中的嵌套文件兼容,嵌套文件夹结构仍会类似地自动传输文件。

'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

此外,您可以在动态路线段中使用括号语法。由于这一点,您现在可以匹配命名参数。

'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')

查看路线文档以了解有关它们如何工作的更多信息。

服务器端渲染

根据您的应用程序的用例,Next.js 中的数据获取使您能够以各种方式呈现您的信息。这些包括使用静态站点生成 (SSG) 或服务器端呈现 (SSR) 预先呈现,以及使用增量静态重新生成动态内容创建或更新。如果您从页面导出页面,Next.js 将使用名为“getServerSideProps”(服务器端渲染)的函数提供的信息预渲染页面。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

无论呈现方法如何,每个“prop”都会发送到页面组件,并且可以在客户端读取第一个 HTML。为了适当地滋润页面,这是必要的。

静态站点生成

如果页面使用“getStaticProps”并包含动态路由,则必须定义应静态创建的路径列表。从使用动态路由的页面导出的名为“getStaticPaths”(静态站点生成)的函数提供的任何路径都将由 Next.js 静态预渲染。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

API 参考涵盖了可以与“getStaticPaths”一起使用的所有选项和属性。 Next.js 在单个项目的构建时 (SSG) 或请求时 (SSR) 预呈现页面。

图像优化

HTMLimg元素已通过 Next.js 的 'next/image' 组件针对现代网络进行了扩展。借助一系列内置的性能增强功能,您可以获得良好的 Core Web Vitals。这些评级是衡量用户对您网站的反应程度的重要指标,并且在确定搜索结果时会被 Google 考虑。 Next.js 会以导入的文件为基础,自动计算图片的宽高。在加载图像时,这些设置用于停止累积布局移位s。

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt= "Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

自动分码

仅使用呈现页面所需的 JavaScript 和库。 Next.js 不是创建包含所有应用程序代码的单个 JavaScript 文件,而是自动将应用程序划分为多个资源。加载页面时,仅加载该特定页面所需的 JavaScript。为了实现它,Next.js 会检查导入的资源。

存在一个值得注意的例外。如果在至少 50% 的网站页面中使用了导入,则将其移动到主 JavaScript 包中。

TypeScript 支持

Next.js 具有强大的 TypeScript 支持,因为它是由 TypeScript 编写的。通过零配置设置和页面、API 等的内置类型,Next.js 提供了集成的 TypeScript 体验。使用 '-ts, --typescript flag',您可以使用 'create-next-app' 创建一个 TypeScript 项目,如下所示:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

类型检查是 Next.js 的“下一个构建”的标准功能。要了解有关 Next.js 打字稿的更多信息,请单击此处的。

API路由

Next.js 改变游戏规则的特性之一是它通过使您能够使用 API 路由编写服务器代码来构建全栈 React 应用程序的一体化方法。 Next.js 的 API 路由提供了一种构建 API 的方法。

文件夹 'pages/api' 中的任何文件都映射到 '/api/*' 并且处理起来更像 API 端点而不是 'page'。它们不会增加客户端捆绑包的大小,因为它们只是服务器端捆绑包。

Next.js 的优点

全球最大和最知名的企业经常使用 Next.js。它被认为是增长率最高的 React 框架之一,非常适合用于静态站点。采用Next的优点如下:

对于 SEO,Next.js 非常棒。它使您能够创建具有所有必要功能和交互性的 Web 应用程序,同时保留基于静态文本的网页的 SEO 优势。多亏了它,您可以建立强大的在线形象。
Next.js 的用户体验非常好。您无需遵守电子商务或 CMS 平台施加的任何插件、模板或其他限制。你有完全的自由来改变你认为合适的前端,你也可以不受任何限制地创造性地编辑东西。
使用 Next.js 增强了您的网站或 Web 应用程序的性能。虽然一次下载和运行大量 JavaScript 代码不会导致浏览器停止,但它可以大大提高总阻塞时间 (TBT) 等指标。始终瞄准小于 300 毫秒的时间。您的 TBT 增加得越快,人们就会越快在您的在线应用中发现价值。
如果您使用 Next.js,您的网站或应用程序将是安全的。 Next.js 静态网站与数据库、依赖项、用户数据或任何其他私有数据没有任何直接连接,因为它们没有任何这些东西。从而保证数据安全。
Webpack 是 Next.js 的一个组件,允许对资产编译、热重载和代码拆分提供开箱即用的帮助,所有这些都可以加快开发速度。随着 React 和 Next.js 越来越流行,使用它们的开发者社区也越来越流行。找到一家企业或独立承包商进行改造将很容易。开发人员一致认为 Next.js 提供了对资产编译、代码拆分和热重载的最佳支持。

Next.js 的缺点

尽管 Next.js 提供了出色的开发体验,但始终存在局限性。 Next.js 团队正在努力解决这些问题。因此,约束每天都在变得越来越小。以下是对 Next.js 使用的一些限制:

Next.js 存在弱插件生态系统。易于适应的插件在使用方面受到限制。
也没有内部状态管理器。这意味着如果需要,您必须在应用程序中包含 Redux、MobX 或其他状态管理器。
Next.js 提供的多功能性有一个缺点,那就是持续维护。您将需要一个具有必要知识的忠诚的个人来成功实施任何请求的调整。
Next.js 只允许单个路由器使用。换句话说,使用路由的方法不能被调整。如果您的项目涉及动态路由,则必须使用 Node.js 服务器。

Next.js 与 NuxtJS 比较

Next.js 是开发人员构建复杂 Web 应用程序的首选,因为它能够快速构建复杂的网站。 Next.js 的开发人员将其推广为 React 项目的单命令、零配置工具链。它是一个 React 框架,可以透明地为您管理服务器端渲染,并提供一个通用架构,使构建前端 React 应用程序变得简单。当 Next.js 注意到保存到磁盘的修改时,页面会重新加载。它与其他 JavaScript、Node 和 React 组件一起运行良好。在将 HTML 传输到客户端之前,您可以使用 Next.js 在服务器端渲染 React 组件。

一个广受欢迎的 Vue.js 框架是 NuxtJS。它使为 Web 构建单页或全局 Vue.js 程序变得更加容易。 NuxtJS 框架的目标是具有足够的通用性,可以作为 Web 开发人员的主要项目基础。借助 NuxtJS,您可以通过在服务器和客户端之间共享相同的代码来专注于 Web 应用程序的逻辑。 NuxtJS 允许您访问组件上的许多属性,例如“isClient”和“isServer”,因此您可以快速确定是在服务器上还是在客户端上呈现某些内容。这仅仅是 NuxtJS 开发通用 Web 应用程序的广泛好处列表的开始。

Next.js 比 NuxtJS 更好吗?

没有优越的结构。这取决于您发现什么是有效的及其各种品质。

本质上,Next.js 是一个 React 框架,可以在用户需要在具有挑战性的环境中快速渲染时使用。

另一方面,NuxtJS 是一个 Vue 框架,有助于简化和加速 Web 开发过程。

NuxtJS 的最佳用例

NuxtJS 的创建是为了解决与创建单页应用程序 (SPA) 相关的问题,这是许多当代 JavaScript 框架的重点。强制约定优于配置策略是 NuxtJS 最独特的应用。在使用 NuxtJS 时,您不必创建许多配置文件。相反,您设置文件夹结构,以便 NuxtJS 可以理解它,然后构建应用程序的最终包。

您的应用程序的高度优化包是使用 NuxtJS 创建的。一个示例用例是Storyblok和渗透测试工具站点。

Next.js 的最佳用例

Next.js 的最佳功能之一是您可以创建静态页面,但其功能却与动态页面一样。这在以下情况下是理想的:(a) 内容将定期更改或需要始终保持最新。 (b) 例如,多用户站点需要实时发布能力。 (c) 使用 SSG 重建整个网站将花费大量时间(和金钱),并且没有风险。一个重要的电子商务网站就是一个很好的例子。

Next.js 帮助程序员避免典型问题。 Next.js 通过为执行具有挑战性的 UI 任务提供单一抽象来防止开发人员意外添加问题,例如在组件树深处过度获取。如果需要,开发人员确切地了解在哪里寻求获取新数据。复杂的底层 API 不需要任何人学习。

一些非常好的案例研究是Hulu和Typeform网站。

结论

通读全文后,Next.js 和 NuxtJS 框架的优缺点可能会一目了然。我们无法强调 Javascript 的流行程度以及几乎所有当前的移动和在线应用程序都是使用它构建的,因此需要使用 Next.js 和 NuxtJS 等框架。因此,必须根据他们的需要选择和使用最有效的框架。我希望这篇文章能帮助您为即将到来的项目在 Next.js 和 NuxtJS 之间做出决定。

本文的目的不是教你一切;相反,它是逐步向您介绍 Next.js 和 NuxtJS 的全部潜力。

要了解更多关于我没有包含的所有功能和功能,其中一些非常棒,我建议彻底阅读官方Next.js和NuxtJSs 文档。

最后,让我说,如果你开始为你的职业或知识学习它们中的任何一个,你不会失去任何东西。

编码很有趣!