在 Next/React 组件中导入 global vs getStaticProps

Posted 2023-02-19

【中文标题】在 Next/React 组件中导入 global vs getStaticProps

【英文标题】：Import global vs getStaticProps in Next/React Component

【发布时间】：2021-06-06 08:25:59

【问题描述】：

所以我是 Next.js 的新手，我想知道，在页面中的 index.js 文件中，我有一个组件，它将从 JSON 对象返回一个列表。那么在我的组件之外导入这个 JSON 文件或在 getStaticProps 中获取它有什么区别？

import contactList from '../../public/contactList.json'

export default function Home () 

// ... component here

或

export async function getStaticProps() 

import contactList from '../../public/contactList.json'

return 

    props: contactList

    



export default function Home () 

// ... component here

或者我什至可以在 Vercel 中设置一个环境变量来使用 fetch。 各有什么优缺点？

编辑：我应该在 getStaticProps 中使用 import(adress)，女巫会在默认参数中返回一个带有 json“数组”的对象，所以更正自己：

export async function getStaticProps() 

const list = await import ('../../public/contactList.json');

return 

    props:  contactList: list.default 

    

【参考方案1】：

基本上归结为更好的性能。来自Next.js 文档：

注意：您可以在***范围内导入模块以在 getStaticProps 中使用。 getStaticProps 中使用的导入不会捆绑到客户端。

因此，如果您在getStaticProps 中使用导入，则数据将在构建时获取，访问该网站的用户将不得不下载更少的数据，从而加快页面速度。

编辑： Next.js 文档明确声明不要使用fetch 来获取内部数据：

注意：您不应该使用 fetch() 来调用 getStaticProps 中的 API 路由。相反，直接导入 API 路由中使用的逻辑。您可能需要针对这种方法稍微重构您的代码。 从外部 API 获取很好！

【讨论】：

非常感谢，getStaticProps 外部的导入将在客户端每次刷新时运行，而内部的导入将在服务器端的构建时运行，对吗？那么使用 fetch 而不是 import 呢？我看到很多人使用 fetch 进行编码（缺点是必须设置环境变量，因为 fetch 需要一个绝对 URL），但我记得在某处读到 import 是性能更好的选择，因为 fetch 发出 http 请求，但 import 不会。那么？

基本上是的，即使说它在每次刷新时运行在技术上也不准确，因为文件只是在生成的代码包中。 getStaticProps 中的代码仅在构建时执行一次。 next.js 文档明确声明您不应使用 fetch 获取内部数据。我会用它更新我的答案。