因为 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,大家懂得都懂了吧?

配乐 阵雨 郁闷
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君