如何获取global.window.localstorage Inside getServersideProps

Question

我有一些组件，可以通过数据获取道具并渲染数据。在我的getServersideProps函数中，我需要从localstorage获得数据，但是由于window is undefined 。

我尝试使用if（typeof window！=='undefined'），但它仍然不起作用。我的代码怎么了？

const MainComponent = ({serverResponseData}) => {
  // ... some code
  console.log(serverResponseData))
  // ... some code
}

export async function getServerSideProps() {
  let filterId = []

  if (typeof window !== 'undefined') {
    filterId = global.window?.localStorage.getItem('filterId') || '';
  }

  // ...some code, and filterId variable still empty array
  const scoresRes = await fetchData('scores',{filterId});

  return {
    props: {scoresRes}
  };
}

我也尝试使用使用效果，但出错

React Hook“ useffect”在函数“ getServersideprops”中称为 既不是React功能组件，也不是自定义React Hook 功能。

Answer 1

参考 documentation

如果您从页面中导出一个称为getServersideProps（服务器端渲染）的函数，则Next.js将使用getserverversideprops 。




localStorage仅在客户端上可用，并且您正在尝试仅在服务器端函数中访问它，您可以使用诸如

if (typeof window !== 'undefined') {
// your code 
  const id = query.id;
    const getData = JSON.parse(localStorage.getItem("form"));
    console.log(getData)
}

请访问

另一种方法是使用 dynamigic import Hello3组件将包含访问本地存储的代码。

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

Answer 2

getserverserversideprops 仅在服务器端触发，并且在客户端无法使用

getServersideProps仅在服务器端运行，并且永远不会在浏览器上运行。

如果您想拥有该存储逻辑，我建议您改用cookie。不像LocalStorage，服务器端和客户端都可以使用Cookie。

来修改逻辑

export async function getServerSideProps(context) {
  const filterId = context.req.cookies.filterId || ''; //get filterId from cookies

  // ...some code, and filterId variable still empty array
  const scoresRes = await fetchData('scores',{filterId});

  return {
    props: {scoresRes}
  };
}

您可以使用cookie的另一种可能的方法 ，是使用 getInitialProps 双方都可以使用

MainComponent.getInitialProps() {
  let filterId = []

  if (typeof window !== 'undefined') {
    filterId = global.window?.localStorage.getItem('filterId') || '';
  }

  // ...some code, and filterId variable still empty array
  const scoresRes = await fetchData('scores',{filterId});

  return scoresRes;
}