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

Question

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

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

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

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

任何人都可以帮助解决以下任何问题：

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

Answer 1

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

针对您的问题列表：

1. Next 导出以便您不必使用/显示 HTML 扩展，但这也取决于您的主机设置。导出静态站点会导出 .html 文件，但是否显示这些文件取决于您的托管配置。
2. 见上文，没有 - 没有办法让 getInitialProps 在完全静态的导出站点上运行。如果必须使用 getInitialProps，则需要切换到服务器端呈现的站点。
3. 您的静态站点可以检索查询字符串，但它不会在构建时获得它。相反，您需要在窗口对象 可用时检查它（通常在React.useEffect）。在静态站点上，这不是在构建时，而是在运行时。 Check out this answer on how to get the query string in javascript - 你可以在你的 useEffect 中使用它。