Web前端
使用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？ Read more…