Next.js-你需要知道的知识点

前言

在开发SSR网站的时候，我相信大家或多或少会遇到好多问题，但是了解SSR网站的本质之后，这些都不是问题，下面就分享一下我的总结，希望能够帮助到大家！

总结

客户端：
1、浏览器通过axios请求后台接口的时候会自动把httponly cookie带到后台
2、axios在登录的时候会自动把后台返回的set-cookie保存到浏览器中

服务端：
1、页面第一次加载或者跳转到某个页面、刷新页面的时候，都会先走getServerSideProps方法再到客户端浏览器端执行useEffect
2、getServerSideProps方法中的数据会全部水合到客户端浏览器__NEXT_DATA__中
3、getServerSideProps方法中使用axios请求接口，不会自动把cookie设置到axios请求头中，cookie要从context中拿，请求完之后如果后台返回set-cookie要通过ctx.res.setHeader.set-cookit设置写入到浏览器，不会自动写入cookie

如：

axios.defaults.headers.cookie = ctx.req.headers.cookie || null
...
ctx.res.setHeader('set-cookie', axios.defaults.headers.setCookie)

4、getServerSideProps数据可以注入到客户端浏览器中，但是客户端的数据不能注入到服务端，举个例子：你点击登录之后请求完接口返回用户的信息是客户端获取的数据，这个时候你刷新页面登录信息会丢失，为什么？因为客户端数据服务端(刷新页面进入getServerSideProps方法时)获取不到，这也就是为什么开发者要把登录信息如token存储到cookie中，刷新页面也能拿！
5、刷新页面的时候，之前客户端获取的数据要正确水合，否则会被初始化(失效)！