因为 NextJS 的 SSR 特性,继续踩坑...

2021-07-01 · 周四郁闷阵雨

今天的主要任务是将 CodeSandBox 的组件代码移出,搭建一个正式的基于 NextJS 的环境,并尝试接入腾讯 IM 的 SDK。光是因为 NextJS 的特性,相较于 Vite(CSR)就踩了三个坑。

NextJS 的 Less 支持还是不友好,三个采用不同版本 NextJS 的项目,我分别用了 3 种不同的方法去配置,还是找 @Shawn 介绍了个名为 next-with-less 的库,才解决了最新 V11 版本的使用,少踩了些坑。唯独发现这个库没加入 TS 定义,需要自己指定一次。《NextJS 使用 Less 编译 Antd》这篇文章因此又得到了一次更新...

接入腾讯 IMSDK 之后实例化就出现各种报错,提示找不到 window 对象,估计是因为 NextJS 以 SSR 为主的设定,不能在页面渲染前就调用使用到 window 的函数。而放到 Vite 那边,一切都正常执行。

具体解决方法,主要使用到了一个新标准 await require("xxxx") 去异步引入模块。我是把它放在了页面组件的 useEffects 里面执行的,在这里绝对能保证页面已经渲染出来。但是感觉怎么写都是很别扭,但没有想到别的「更优雅」的办法。

这方法还是是找 @Innei 之后再结合了下官方文档解决的。他告诉我,NextJS 并不适合写后台,他还直言用 SSR 写后台很傻,文件架构什么的全部都暴露了。

我看了下的确存在这样的问题,无论是持久化进程模式(SSR)还是静态文件(next export)生成的方式,最终在浏览器 view-source 得到的都是较为完整的文档内容,爬虫什么的识别起来确实比纯 CSR 的页面更容易了!至于为什么我不继续用 Vite,大家懂得都懂了吧?

misty rain(烟雨)

misty rain(烟雨)

Hea2t
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

近期评论

鲍小螺: 前辈多多指教!ahu: 后生可畏寻梦xunm: 真不错,板子很好看。timochan: 太惨了( ,更新暴毙,如果恢复没成功,数据也 dump 不出来鲍小螺: 在这部分对话中,广树和保罗继续讨论生活的不同方面。保罗提到了技术更新和国内的优秀 IT 技术。广树解释了在国内积累的经验如何在日本产生穿越的感觉,并表达了对于日本生活节奏的喜爱。他还提到了医疗水平的差异和对于生活方式的感受。保罗表示,通过动漫和现实的对比,艺术来源于现实,日本生活的确有着独特之处。他们讨论了国内的生活节奏和就医等方面的压力,以及个人选择的自由。最后,他们也谈到了不结婚不买房的选择和对于房价的困扰。鲍小螺: 该对话进一步讨论了房地产和税收的问题。保罗提到了国内的房地产税和增值税以及日本的固定资产税。广树解释了日本房地产税的收取方式,以及房产税对于国内房产的影响。他认为,与国内相比,日本的房子质量和服务更好。保罗提出疑问,为什么自己拥有的地也要交税。广树解释了类似增值税的原理,并指出在日本拥有房产是稳定安全的。最后,保罗表示从广树的角度来看,情况确实是如此。鲍小螺: 这篇文章的聊天记录也尝试过用 GPT 总结,结果并不是太好,不知道是不是 Prompt 的问题,实际出来的内容过于简练了,于是又耗费了半小时写完,呼~
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君