Is it possible to prevent getServerSideProps causing a full page reload after initial load?(是否有可能防止getServerSideProps在初始加载后导致整个页面重新加载?)
问题描述
我有一个服务器呈现的next.js应用程序,它是一个3页的结账流程。在第一个页面上,我获取了getServerSideProps
中的各种设置数据,如标签转换和篮子项,如下所示:
UserDetails.js
import React from 'react';
import { LabelsContext } from "../contexts";
import { Component1, Component2 } from '../components'
const UserDetails = () => {
const labels = useContext(LabelsContext);
return (
<div>
<Component1 labels={labels} />
<Component2 labels={labels} />
</div>
)
}
export const getServerSideProps = async (context) => {
const {
locale,
basketId,
} = context.res.locals;
const { cookie } = context.req.headers;
const graphQLClient = new GraphQLClient(
GRAPHQL_ENDPOINT,
{
headers: {
'Content-Language': locale,
'X-Basket': basketId,
cookie,
},
},
);
const { labels } = await graphQLClient.request(getLabels);
return {
labels,
locale,
};
};
export default UserDetails;
然后将此数据从pageProps
传递到_app.js
中的本地状态,并从那里传递到上下文提供程序:
_app.js
import React from 'react';
import { useApollo } from '@apollo/client';
const App = ({ Component, pageProps }) => {
const [labels, setLabels] = useState(pageProps.labels);
const apolloClient = useApollo(pageProps.initialApolloState);
return (
<ApolloProvider client={apolloClient}>
<LabelsContext.Provider value={labels}>
<Component {...pageProps} />
</LabelsContext.Provider>
</ApolloProvider>
);
};
这在初始呈现上运行良好,因为获取成功,并且数据设置为_app.js
状态意味着它们可用于流中的后续页面。但我的问题是,当用户从页面2单击浏览器Back按钮返回到UserDetail页面时,它会执行整个页面重新加载,再次重新获取数据。重新获取数据不是一个大问题,但当页面重新加载时,在表单中输入的所有数据都会丢失。此外,当所有其他页面转换都是快速的客户端加载时,UX会有点不和谐。
在这种情况下,是否可以在页面加载一次后防止重新加载整个页面?
谢谢大家。
推荐答案
重新加载整个页面是因为在客户端转换期间检索UserDetails
页面的json数据的请求失败。
在next.config.js
中包含assetPrefix
条目将产生以下效果:
Next.js将自动将您的资产前缀用于它从
/_next/
路径加载的JavaScript和CSS文件。
然而,当在客户端上检索JSON数据时,资产前缀不不会影响/_next/data/
的/_next/data/
请求,这意味着这些请求将是404,这反过来会触发整个页面重新加载(如您所经历的)。
解决方案是使用basePath
而不是assetPrefix
。这允许您为整个应用程序设置路径前缀,其中包括getServerSideProps
检索页面JSON数据的请求。
目前,没有使用
basePath
的替代方法,因为这是向/_next/data/
请求添加前缀的唯一方法。然而,关于这个问题有一个公开的讨论:https://github.com/vercel/next.js/discussions/25681。
这篇关于是否有可能防止getServerSideProps在初始加载后导致整个页面重新加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:是否有可能防止getServerSideProps在初始加载后导致整个页面重新加载?
基础教程推荐
- 响应更改 div 大小保持纵横比 2022-01-01
- 动态更新多个选择框 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01