likes
comments
collection
share

为什么我将网站用Next.js重写了

作者站长头像
站长
· 阅读数 46

前言

之前使用Nuxt.js 2重写了企业企业网站,由于全部开发都只需要使用Vue的相关知识,整个开发过程相当顺利。 并且Nuxt.js提供了很多便利的库工具,比如MDContent这个可以直接把文件系统当作数据库使用的工具,使得我无需去构建数据库便能够架设起CMS内容后台,反正企业网站么,就是一些产品资料和Markdown文件就够了,整个改造过程加上网站设计差不多两周时间就搞定了。

虽然使用Nuxt.js开发的过程很愉快,不过Nuxt.js 2有一个严重的性能问题,当组件增加到一定数量之后,整个编译过程变得十分漫长,这里说的编译不是最后生成页面,而是开发阶段的编译!那就十分的痛苦了,我只要改动一个字符,然后保存,Nuxt.js就需要花费十五分钟的时间进行重新编译,这种速度能够忍受?

反正我是忍受不了了,网站也搁置了大半年没有更新。可是最近有个新产品要发不到网站,再不更新也不行了,一次十五分钟的等待那也消耗不起,于是就打算重新换一套框架再来写一遍网站。

没想到的是随着Vue 3的发布,Nuxt.js也发布了3.0版本,不过到现在为止还是预览版。本来么都已经到了预览版本阶段的话,说明这个框架是一个基本成熟的状态,只是需要一些修修补补就好了,那么赶紧试一下吧。

没想到Nuxt.js 3在改用了Vite作为编译后台后,使用起来如丝般光滑,一点都没有Nuxt.js 2那种熬人的痛苦了。就决定用Nuxt.js 3来重写了

半成品的预览版

按理来说既然说自己是预览版的话,那至少特性应该是冻结的,基础框架代码也不会再做出改动才对,但是随着我使用Nuxt.js 3之后,越来越感觉,这个框架不但达不到预览版的标准,一些特性居然都没有完善。

比如之前我通过使用hook的方法去掉了__NUXT__这个数据尾巴,然后我在Nuxt.js 3 RC3版本中还是可以用这个方法,但是到了RC5版本后这个方法就失效了,这说明即使Nuxt.js 3进入到了预览版阶段还在改底层代码。

好吧,这个问题暂时不去关注了,毕竟人家官方就是不希望我们能够把__NUXT__去除,但是module接入问题是不是应该早就好解决了呢?我要使用i18n插件,但是在Nuxt.js 3上这个模块始终无法正常的运行,导致我不得不花了一周时间自己去实现i18n功能,自己做路由,自己做字典功能,这一切的根源是Nuxt.js 3的module设计有问题,人家i18n的作者很难适配。希望在我写完这个文章的时候,他们已经搞定了这个问题,但是我不会再去使用了。

最后一个令我感到十分疑惑的就是,Nuxt.js 3对于静态页面的支持,也就是SSR和SSG,Nuxt.js 3对静态的定义很模糊,文档中也没有清晰的定义,说这一切框架会自动帮我们搞定的,结果当我使用异步加载静态资源的时候,直接给我转换成了SPA模式!天呐,我是要做企业展示网站,SPA怎么做搜索优化!不得已改成同步模式,结果就是__NUXT__里面加载了一大堆的数据。

偶然的尝试

在我花了一个月的时间初步把网站迁移到Nuxt.js 3的时候,我实在是受不了了,特别是当我使用Vercel部署的时候,Nuxt.js 3还有兼容性的问题,没办法只好试试看Vercel自己开发的Next.js。

这一试不要紧,前面的所有烦恼Next.js都是开箱即解决的,i18n国际语言开箱直接支持,静态页面都可以由我自己定义,需要哪些页面输出SSG也能完全把控。以前因为Next.js是使用React作为开发的基础框架才不使用,但是经过Nuxt.js 3的折磨后,发现Next.js是真的香。反正现在已经习惯写函数式代码,React就当作函数式代码来学习也是分分钟就能上手的事情,再加上Vue的一些经验,开发起来难度特别低,况且我只是做展示网站,很少用到复杂的UI操作,所以React的性能优化部分暂时就不去学习了。

结果原来用了一个月时间使用Nuxt.js 3开发的网站,现在我花了两周时间全部改写完成,加载速度可以用光速来形容,国内由于证书的关系,第一次打开会比较慢,但是相比较用Nuxt.js编写,现在的打开网站的速度可以用光速来形容了。下面是做好的网站链接,大家可以感受下 使用Next.js重新编写企业官网演示

国内的话第一次打开的时候会比较慢,国外就很快了,然后跳转到其他页面的时候几乎感觉不到加载的情况,因为这部分Next.js采用了SPA技术,预加载了页面JSON数据,同时通过网址也能加载已经渲染好的网页,比如使用这个链接再次登陆的话,也能显示正常的HTML页面,里面的源文件都是有数据的,完全可以被搜索引擎搜索到,两全齐美!

可能经过这次重写网站后,我会去重新学习下React框架,虽然Vue那种三剑客模式的入门门槛比较低,但是有Nuxt.js这样的项目存在,真的拉低了Vue的形象,最后再吐槽一句,Nuxt.js能不能不要花那么多精力在Splash见面上,那种神奇的光照效果除了火狐其他浏览器都不支持,还是多花点精力把基础搞搞好吧