上周末的时候打算把自己的网站从vue的ssr转换为react的ssr，鉴于之前在vue中是用的原生的ssr，这次想在react中试试框架，所以首选的就是next.js。 第一次用next.js，根据官方文档来实现实现即可，但是遇到了一些问题，主要是跟store相关的，在vue中我用的是vuex，数据的全都是存储在vuex，相应主要需要数据的话就是在asyncData方法中调用，然后存在store，然后在页面就根据store的值来进行渲染。大致流程如下图

本次迁移出了基础的将vue组件转换为react组件外，重点的部分就是将原逻辑中使用vuex数据这一部分迁移至react的context中。

据我了解，目前nextjs的数据获取是需要在page页export出一个getStaticProps的方法，官方的示例是

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // will be passed to the page component as props
  }
}

上面的return的props里面的数据会作为props传递给page页面。

按照vue中的逻辑，我需要getStaticProps方法中将请求到的数据存入至context，但是问题来了。。

getStaticProps里面并不能使用hooksuseContext，这并不符合hooks的使用规范。。。

怎么弄呢？放弃hooks改用class？

晚些时候试试。