Reactjs 在Next/React组件中导入全局vs getStaticProps

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

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

export default function Home () {

// ... component here

}

或

甚至我也可以在Vercel中设置一个环境变量来使用fetch。 每种方法的优缺点是什么

编辑：我应该在getStaticProps中使用import（address），witch将在默认参数中返回一个带有json“array”的对象，所以请更正我自己：

export async function getStaticProps() {

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

return {

    props: { contactList: list.default }

    }

}

---

基本上可以归结为更好的性能。从文档中：

注意：您可以导入顶级作用域中的模块，以便在getStaticProps中使用。getStaticProps中使用的导入不会绑定到客户端

因此，如果您在

getStaticProps

中使用导入，那么数据将在构建时获取，访问网站的用户将不得不下载更少的数据，这将导致更快的页面

编辑： Next.js文档明确声明不使用

fetch

获取内部数据：

注意：不应在getStaticProps中使用fetch（）调用API路由。相反，直接导入API路由中使用的逻辑。对于这种方法，您可能需要稍微重构代码。 从外部API获取是可以的

---

非常感谢，因此getStaticProps外部的导入将在客户端的每次刷新时运行，而内部的导入将在服务器端的构建时运行，对吗？那么使用fetch而不是import呢？我看到很多人使用fetch进行编码（缺点是必须设置环境变量，因为fetch需要一个绝对URL），但我记得读过一些文章，其中import在性能上是一个更好的选择，因为fetch会发出http请求，而import不会。那么？基本上是的，即使说每次刷新都会运行它在技术上是不精确的，因为文件就在生成的代码包中。getStaticProps中的代码只在构建时执行一次。next.js文档明确声明不应使用fetch获取内部数据。我会用它更新我的答案。

export async function getStaticProps() {

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

return {

    props: { contactList: list.default }

    }

}