时间戳

首页 > 解决方案 > 服务器端呈现的页面并不总是正确呈现

javascript - 服务器端呈现的页面并不总是正确呈现

问题描述

我有一个非常简单的 NextJS 项目，它只有一个页面。该应用程序设置为使用 redux、next-redux-wrapper 和 redux thunk。该页面应始终在服务器端呈现。

这是页面代码的样子：

pages/index.js
const index = () => {
    const { products } = useSelector((state) => state.productList);

    return {
        products.map((product) => (
            <div key={product._id} className="column is-4-tablet is-3-desktop">
                <FoodItem foodItem={product} />
            </div>
        ));
    }
}

export const getServerSideProps = wrapper.getServerSideProps(({ store }) => {
  store.dispatch(listProducts());

  return {
    props: {},
  };
});


// pages/_app.js
import { wrapper } from "redux/store";

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
};

export default wrapper.withRedux(MyApp);

我注意到的奇怪行为是，有时当用户刷新浏览器时，并没有调用服务器来重新生成页面。这会导致页面为空。

实际行为应该是当用户刷新页面或导航到页面时，应该调用服务器重新渲染页面。

我不确定有时当用户刷新页面或导航到页面时，浏览器不会重新调用服务器以重新呈现页面。

标签： javascriptreactjsnext.js

解决方案

我是 NextJS 的新手，但我认为您应该尝试将 productList 对象传递给 index.js 页面，而不是 useSelector

所以从props中的getServerSideProps中返回yourObject：{yourObject}，然后从index =（{yourObject}）访问，然后尝试显示它

希望它有效...

推荐阅读