category
tags
type
status
slug
date
summary
icon
password
文章来源说明

🤔前言

我在我的Reactjs项目中使用了Nextjs。现在需求是在客户端的cookie中缓存用户选择的主题,用户打开页面时展示该主题的界面。用户关闭浏览器后,下次打开页面主题又回到默认。
而在nextjs中,服务器端通过调用 getInitialProps() 以进行第一页加载。我的其它页面渲染是在服务端getStaticProps()完成的,故而无法获取客户端的 localstorage 、以及cookie,也就不便于做一些基于浏览器缓存的操作。让人头大。
 

可使用的API

1.ReactJS获取cookie
2.ReactJS获取LocalStorage
 

一种方案可能的方案

直接在服务端获取客户端请求中的Cookie:我们可以在网站的第一页访问入口处获取,也就是_document.js中的getInitialProps中获取:
然而这里的 initialProps.cookies没有办法直接传给别的组件。一种可行方案是作为URL的传参,放在全局路由中,这样就可以在其他组件中获取到参数。而这样会破坏页面地址的美观性,最后还是采取了如下另一种方案。
 

📝由前端进行Cookie读取和渲染

利用useEffect()函数,由客户端在页面渲染生效时,进行默认主题的读取和切换:将cookie中保存的主题信息,添加到相应DOM的classList当中,例如:document.getElementById('wrapper').classList.add('theme')
这里我创建了一个Provider,用useState进行变量的绑定,便于其他模块调用useTheme勾子来实现全局主题的手动切换。

theme.js文件:

DarkModeButton.js

实现点击按钮切换主题

BaseLayout.js

🤗总结归纳

服务端解决不了,那就客户端解决。相关代码可以在我的Github项目中查看。
NotionNext
tangly1024Updated Apr 20, 2024

行动建议

💡
我在使用NextJS+NotionAPI开发我的独立博客站,欢迎您在底部评论区留言,一起交流~
 

参考