使用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?
晚些时候试试。
- 分类:
- Web前端
更新时间:
上一篇:下一篇: