比较NextJS中的数据获取方法-从概念上讲,为什么文档中引用了这么多方法?(Page Router/pre-Next.JS 13.4)

ewm0tg9j  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(99)

我已经在NextJS中使用了各种数据获取方法。
在文档中,数据获取下有4或5个相关术语。

  • getStaticProps
  • getStaticPaths
  • getServerSideProps
  • 增量静态再生
  • 客户端获取
  • “Regular”(useEffect->fetch->setData)
  • SWR

我已经浏览了所有这些,它们看起来都很棒-但如果有一个更高层次的概念性概述,以更好地解释为什么需要它们(以及何时需要),那将是非常有帮助的。
注意:这是13.4之前的版本,所以页面路由器架构将在这里发挥作用。

mtb9vblg

mtb9vblg1#

通过理解这7个概念,可以更好地理解NextJS文档中创建/引用的各种数据获取方法的需求。
概念1:
首先,重要的是要注意NextJS是React沿着的混合体,允许您创建服务器端API。
因此,React将在客户端(在用户的计算机/浏览器上)运行,但服务器端API将从您托管应用程序的位置运行-如果您使用Vercel的托管,则它将从他们的服务器运行。
概念二:
这里还需要注意的是,客户端应用程序调用您在pages/api中定义的API,然后等待从pages/api接收结果需要时间。这在文档中间接提到,但在性能的概念下提出了几次。
概念3:
客户端代码与API代码有不同的安全考虑。您的API代码将驻留在Vercel的服务器上-使其通常安全,不会被窥探(除了真实的“黑客”.这不是你会考虑的基本情况)。另一方面,客户端代码代码将活在用户的计算机上/浏览器。通过这个检查很容易,所以这是一个自然的安全划分,在这个意义上,有些代码对你的用户是非常可见的,有些则不是。
显然,这会导致问题的出现,NextJS试图缓解其中的一些问题;例如,NextJS让你在客户端环境变量前加上NEXT_PUBLIC_,以防止你在客户端代码中使用私有环境变量。不包括这个前缀会破坏构建。(这很酷-你想要这个,他们甚至进一步NextJS v.13.4+)
概念4:
NextJS会从下载到客户端浏览器的bundle中删除一些代码。因此,假设您正在使用VSCode在名为MyCoolPage.js的文件中编写代码。在本地,在VSCode上,您的代码文件会像往常一样编写并保存在MyCoolPage.js上;然而,NextJS实际上会删除一些代码,这样它就不会落在客户端的bundle中。
与这个问题相关的是,你在getStaticProps和getServerSideProps中的代码被删除了。如果你不确定这一点以及你的代码将如何被处理,NextJS已经创建了一个工具,可以动态地向你展示你的代码被删除了什么。这是here;这个工具也可以从getStaticProps和getServerSideProps页面上的文档中链接到。
NextJS从客户端代码中删除了代码,以确保用户看不到这些函数。这是NextJS创建这些特殊函数的部分原因/好处/方便,这些特殊函数在数据获取部分列出。
概念5:
其次,需要注意的是,有静态生成的网站,也有动态生成的网站(动态生成的网站基本上就是你通常认为的“应用”--用户点击内容,然后你的应用做一些事情,比如调用数据库或外部API来获取数据等)。
另一方面,静态生成的站点通常不会根据用户交互进行更新,但是它们可以从其他地方获取数据,这些数据可以在构建时获取。
建设时间?让我们把它作为一个非常实际的,简单的例子。(假设你有一个简单的自动部署设置,从Github到Vercel来构建然后托管你的应用)-在你完成Github签入到main之后,它会触发上传到Vercel,你的应用就构建好了。(在这里你可以看到它在Vercel网站上构建,它会检查错误),如果它通过了检查,它将被部署,用户可以访问这个新版本。
因此,静态生成的站点,在上述构建时间内,将调用各种API,获取所需的数据,然后站点将使用手头的数据构建。然后该站点部署. Net net,您的用户将看到一个预构建的站点,其中预加载了数据-当然,速度是优势。
概念6:
速度当然很重要,但预生成的静态网站也具有SEO优势。网络爬虫可以通过您的静态网站,将数据预先烘焙到网站中,从而使您的网站与搜索引擎相关。
概念7:
现在你已经理解了这一点,你明白了为什么会有数据获取功能来在构建时预加载数据(getStaticProps),现在你明白了为什么会有“常规“客户端获取,这将是useEffect -> fetch -> setData。
让我们称之为两个极端(完全静态和完全动态),将它们放在一条线上进行比较,比如最左边的是fully static功能,最右边的是fully dynamic功能。

现在来回答你关于为什么这些其他函数存在的问题..并且在一段时间或某些其它触发之后自动刷新。
此外,为了给这个简单的答案增加一点复杂性,(列表中提到的最后一个方法)添加了乐观更新等功能,可以在执行某些操作后立即更新用户的应用状态,并且然后稍后(按顺序)使用服务器更新这些更改(与先用服务器更新这些更改,然后更新用户的应用程序状态相比,这是一种普通的方法。.这带来了一系列额外的考虑,例如如何处理错误,回滚和更新缓存。(为什么要提到这一点?因为所有这些功能的大部分重点是与数据上传时间和刷新数据的协调相关的速度和用户体验...... SWR在这方面开辟了一个全新的世界。)

  • getStaticPaths与上面的情况有点不同。它并不完全符合上面的情况,但是当你有大量的项目并且你不想硬编码很多路径时,它会被使用。假设你有一个在线书店,你想给每本书给予它自己的URL,但是不想为每本书硬编码一个新的路径,getStaticPaths就是让你做到这一点的工具。

相关问题