时间戳

首页 > 解决方案 > 重新加载静态页面时未调用 Next.js getInitialProps() 方法

static - 重新加载静态页面时未调用 Next.js getInitialProps() 方法

问题描述

我正在Next.js 中构建一个静态站点。当静态站点生成带有.html扩展名的页面时，我在元素as上使用该属性Link，这允许重新加载我的页面。

我现在已经在我的 URL 中引入了查询字符串的使用，以便在重新加载页面时，它们可以通过使用该getInitialProps()方法记住要显示的内容。

到目前为止，一切都很好，但仅在开发过程中。

我面临的问题是，当站点作为静态版本导出时，Next.js 无法调用该getInitialProps()方法，因此，当刷新浏览器时，我的页面不再知道要显示什么。

任何人都可以提供以下任何帮助：

  1. 是否有另一种方法可以在不使用扩展程序的情况下刷新静态页面？.html
  2. 有没有办法确保在导出静态站点和重新加载getInitialProps()页面时调用该方法？
  3. 是否有另一种方法可以从浏览器 URL 中检索查询字符串，因为 Next.js 似乎甚至无法访问顶级window对象？

标签： staticnext.js

解决方案

getInitialProps仅在服务器端呈现的应用程序上可用。它在开发过程中运行，因为 Next 不知道您希望您的页面是静态的还是 SSR。但是当你运行时next build && next export，它们会变成静态并且getInitialProps不再运行。我相信这也是为什么 next 切换到getServerSideProps而getStaticProps不是getInitialProps（除了_app.js页面之外的所有内容）

针对您的问题清单：

  1. Next 导出以便您不必使用/显示 HTML 扩展，但这也取决于您的托管设置。导出静态站点会导出.html文件，但由您的主机配置决定是否显示这些文件。
  2. 见上文，没有 - 无法getInitialProps在完全静态的导出站点上运行。如果必须使用getInitialProps.
  3. 您的静态站点可以检索查询字符串，但它不会在构建时拥有它。React.useEffect相反，当窗口对象可用时，您需要检查它（通常在 中） 。在静态站点上，这不是在构建时，而是在运行时。查看有关如何在 javascript 中获取查询字符串的答案- 您可以在useEffect.

推荐阅读