Question

我尝试将项目迁移到Next.js框架以获得SSR（服务器端呈现）功能。这是我的简单页面：

class Example extends React.Component {
  static getInitialProps() {
    // api getting data. Need authentication data under local storage
  }
  render() {
    return <div>{this.props.data}</div>;
  }
}

我遇到的问题是：我希望我的数据首先来自getInitialProps（这是SSR的目的）。但是在发送时，我需要有关后端API用户的信息。但是在这个功能上，渲染发生在服务器上，所以我无法从本地存储中获取数据。你怎么能解决这个问题。

由于

Answer 1

您可以将对localStorage的调用放入反应组件生命周期方法中，例如componentDidMount，然后将setState()放入结果中。

这不是很好，但是可以工作。

请注意，这显然不会使用SSR。

Answer 2

这对我有用：

const USER = 'user'
const URL = 'http://www.example.com/user'

// here you can also use isServer
if (req) {
    const {data: user} = await Axios.get(URL) 
    localStorage.setItem(USER, JSON.stringify(user))
} else {
    const user = await JSON.parse(localStorage.getItem(USER))
}

NextJS：在getInitialProps方法中从本地存储中获取数据

2 个答案: