在我的Next.js应用程序中,我有搜索过滤器,过滤器由复选框组成,为了呈现这些复选框,我需要从API中获取(GET)所有可能的选项。
这些过滤器在许多页面上都可用,所以无论用户在哪个页面,我都需要立即获取过滤器的数据,并将其放在本地存储中,以避免进一步的过多API调用。
我看到一个选择是把getInitialProps
中的API调用放在_app.js
中,但是根据Next.js文档,自动静态优化将不起作用,我的应用程序中的每个页面都将在服务器端呈现。
那么,在Next.js中获取这样的全局数据的正确方法是什么呢?
- -------更新
所以现在我使用了下一个解决方案:在_app.js中,我放置了useEffect
React Hook,一旦前端准备就绪,我会检查整个应用程序的数据是否在本地存储中。如果不是,则从服务器获取数据,并将其放在本地存储中以供将来使用。
第一个
1条答案
按热度按时间o2g1uqev1#
似乎这个过滤器位于标题菜单或侧边栏菜单?
如果是这样的话,我建议(_app.js以外的选项)将API调用者放在header/ sidebar组件中,并在layout/ pages组件上调用header/sidebar组件。
因此,您将得到与您所描述的相同的行为(不是在每个页面上调用SSR,静态优化仍然有效,因为概念与_app.js相似(只是将其放在一个结构中)。