reactjs - 我如何在 getServerSideProps 中获取本地存储数据

Question

我正在使用 NextJS 12。我正在尝试获取本地存储对象。当我在 getServerSideProps 中使用 localstorage 时，我收到类似这样的错误 ReferenceError: localStorage is not defined。我也尝试在函数外使用它，但仍然出现此错误。有没有办法在 getServerSideProps 中使用它。

export async function getServerSideProps({ query }) {
    const id = query.id;
    const getData = JSON.parse(localStorage.getItem("form"));
    console.log(getData)
  
    return {
      props: {},
}

Answer 1

欢迎使用 StackOverflow，正如它在 documentation 中提到的那样

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

Localstorage 仅在客户端可用，而您正试图在服务器端访问它，您可以使用类似的东西

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

请查看this article获取有关仅运行客户端代码的更多信息。

另一种方法是使用 dynamic 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