问题标签 [getserversideprops]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
1642 浏览

javascript - Next.js: getServerSideProps 与 react-redux 和 redux-persist

我的调度员没有触发减速器并且没有更新状态时遇到问题:

认为我没有按照下一个文档以及这篇博客文章的getServerSideProps建议正确利用。

所以在我进入兔子洞之前:

react-redux 的重点是在您的应用程序中的任何地方都有状态,而无需进行 prop-drill 或将函数传递给子级以更新父级;以及使用的要点getServerSideProps,来自下一个文档:

**

什么时候应该使用 getServerSideProps?

**

仅当您需要预渲染必须在请求时获取其数据的页面时,才应使用 getServerSideProps。第一个字节的时间 (TTFB) 将比 getStaticProps 慢,因为服务器必须计算每个请求的结果,并且如果没有额外的配置,CDN 无法缓存结果。

话虽如此,我认为这将解决我的 redux 调度程序没有减速器火灾的问题是错误的:

getServerSideProps似乎在做mapStateToProps与所有其他 redux 相同的事情。有人可以帮助解释这如何与 redux 一起工作吗?我是否应该只添加getServerSideProps到我的个人资料页面(即页面未更新,操作未触发)因为我不确定为什么我的商店中的某些状态正在更新?

任何帮助,将不胜感激!

0 投票
0 回答
647 浏览

next.js - NextJS getStaticProps 是否应该用于为用户制作内容的 Web 应用程序提供服务?

原始问题发布在Github 讨论中。但目前还没有人回答这个问题。所以让我们在这里试试我的运气。

语境

我正在尝试建立一个平台(又名 web-2.0)网站,用户将在其中创建大部分内容,比如 Ebay。我决定useSWR在页面加载后使用来获取用户特定的数据。现在,我在加载可缓存和支持 SEO 的页面骨架数据getStaticProps之间进行选择。getServerSideProps

getStaticProps生成 HTML 和 JSON 文件,这两者都可以由 CDN 缓存以提高性能。

从文档中,它没有详细说明getStaticProps应该如何在生产中提供 CDN。我想知道它是否仅指纯静态的类似博客的网页,它们不使用fallbacknor regeneration。我有一种感觉,getServerSideProps在 server/lambda 前面使用 CDN 可能是一种更简单、性能更高的缓存架构。

问题

是否应该使用具有后备和再生功能的 NextJSgetStaticProps来为用户制作的内容 Web 应用程序提供服务?

要得到这个问题的答案,我相信我需要先了解一些事情:

我不知道的事情,我找不到任何相关文档

  1. getStaticProps如上面提到的文档,应该如何使用 CDN 提供具有 、 后备和重新生成的页面?
  2. 使用回退时,网络请求是否必须始终通过 NextJs?是否有将预渲染页面的 CDN 放在 server/lambda 前面同时支持fallback&的示例regen?我的想法是避免服务器命中并在有预呈现页面时节省更多的处理时间和资源。
  3. 是否支持将新生成的 HTMLfallbackregenerationJSON 保存在 S3 等远程存储中,并让 NextJS 从中读取?
  4. 如果上述问题的答案是否定的,那么当无服务器时,比如 Lambda,它如何重用新生成的文件?它是否依赖于非冷 Lambda 容器内存/状态?使用服务器时,我可以跨服务器共享新生成的工件吗?

我可能错过了一些文档。任何线索、链接或更正将不胜感激。

提前感谢=]


更新

我找到了更多信息,如下所示

  1. 无服务器 NextJs 当前架构
  2. 无服务器 NextJs RFC 回退
  3. NextJs RFC 关于增量静态再生

对于剩下的问题,我已经在这篇文章中向 NextJS提出了这些问题。

0 投票
1 回答
1574 浏览

javascript - 在 NextJs 如何使用更改事件更改 getServerSideProps

在这里,我试图根据类别更改产品数据,我有一个索引页面和两个名为Productsand的组件Categories。起初我正在获取所有产品,getServerSideProps然后当用户选择一个类别时我需要获取类别明智的产品。

索引页

在这里我收到一个错误Unhandled Runtime Error TypeError: Failed to fetch

我是下一个 js 的新手,所以我不知道该怎么做,我将不胜感激任何建议/建议

0 投票
0 回答
467 浏览

javascript - 在组件级别获取数据并预渲染/ssr nextjs

我是第一次使用 Nextjs。

我正在尝试创建多个布局,这些布局将包含在一个<Header><different-layouts-for-each><Footer>结构上。

我面临的问题是 getStaticProps 或 getServerProps 只能在页面级别运行。

由于我需要在导航上进行 SEO,我想我应该使用上述两种方法之一在每个页面文件上获取它的道具。

这里的问题是我必须在每个页面上获取菜单道具,但是有不同的模板我必须在所有这些模板上重复自己,以便静态或预呈现内容并使 SEO 可读。

在组件上获取菜单道具<MainNav>将是理想的情况。

我尝试在组件上执行 asnyc/await:

<Header>零件

<MainNav>零件

这里的问题是这将返回一个承诺,并且 html 将显示“正在加载”而不是实际的菜单 html。

有什么帮助或文章可以帮助我吗?

谢谢。

0 投票
0 回答
762 浏览

next.js - 如何安全地将 getInitialProps 替换为 getServerSideProps / getStaticProps

下面这句话大家都很熟悉:You should not use getInitialProps, but getServerSideProps instead. 我已经使用它构建了我的应用程序getInitialProps,现在我面临以下问题:“我应该将 getInitialProps 替换为 getServerSideProps 吗?”,如果是这样,我应该如何以正确的方式进行操作而不损坏我的应用程序?

今天,我getInitialProps在几个重要的地方使用:

  1. 在我的习惯_app.jsreact-redux
  1. 在页面的一些 HOC 中:检查用户是否已通过身份验证(否则重定向),如果用户已通过身份验证,则初始化 redux 存储,获取用户信息。

如何用 getServerSideProps 替换 getInitialProps?

任何建议将不胜感激,谢谢

0 投票
1 回答
425 浏览

reactjs - 如何在 Nextjs 的 getServerSideProps 中包含我的凭据?

在异步函数 getServerSideProps 中,我需要从后端进行提取,其中包含我的凭据以实例化会话。我有以下代码:

URL 和所有似乎都可以工作,但控制台显示 500 错误,因为凭据似乎未包含在提取中。在浏览器控制台/邮递员中粘贴确切的调用时,响应是 200 代码,因此后端似乎工作正常。

0 投票
0 回答
1060 浏览

next.js - 在 nextjs 中使用 getServerSideProps 无限滚动

我有一个目录页面,其中展示了一些产品和过滤器。我使用 getServerSideProps 来获取数据并预渲染页面。这里我想使用无限滚动。有没有办法在我的 URL 查询中没有pageNumber 的情况下检索 getServerSideProps 中的 pageNumber ?

最终结果应该是这样的:https ://fr.ign.com/

非常感谢 !

0 投票
0 回答
92 浏览

reactjs - 如何通过 Next.js 中的状态更新 getServerSideProps 中的 URL?(最新版本)

我通过 getServerSideProps 从 HERE Geocoding API 收到一些数据:

我传递给的这个道具:

我想将默认端点内的搜索设置为用户在表单中键入的任何内容,默认值应该是“wimpfener str 40 backnang”,我尝试通过 useState 设置。(我知道如何处理用户输入,这个问题只是关于如何更新 API-URL)

这是一个更清晰的 图像:我的代码的图像

0 投票
0 回答
520 浏览

reactjs - NextJS 将 props 从 getServerSideProps 传递给子组件

我想将Page 组件的getServerSideProps道具传递给子组件,但我 一旦部署(在 Vercel 上)Unhandled error during request: TypeError: Cannot read property 'value' of undefined at Child

重现:

我尝试了很多事情,其中​​包括:

  • 动态导入
  • cloneElement 传递道具

唯一可行的是将所有代码放在同一个 Page 组件上。

0 投票
1 回答
8866 浏览

cookies - 如何为 next.js 中的每个页面使用 getServerSideProps?

我设置了一个带有 nookies 的 cookie,它存储用户选择的所有产品的值。我想使用 getServerSideProps 在服务器端获取 cookie 并将值作为道具传递。我必须在所有页面上显示 cookie 的值。

当我在 _app.js 中尝试 getServerSideProps 时。它没有工作,甚至没有运行代码。

有什么办法吗?