道招

使用next.js服务端渲染经历

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

使用next.js服务端渲染经历

上周末的时候打算把自己的网站从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?

晚些时候试试。

更新时间:
上一篇:下一篇:

相关文章

关注道招网公众帐号
联系博主