是否有可能防止getServerSideProps在初始加载后导致整个页面重新加载？

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在初始加载后导致整个页面重新加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！