工作日写代码、休息日写文章。

可能这就是吾之日常也。

所需要解决的问题

1、首屏加载速度还未达到极致。

在一个基于现代化框架的Web服务里、尽管服务端渲染（以下简称SSR）首屏加载速度已经远超单页面程序了（以下简称SPA）、但相比直接访问静态化文件、还是有一定加载速度上的差距。

2、网页静态化无法实现动态路由

元古时期的网址一般都是通过拼接字符串获取query信息的方式来访问。这种地址很丑、很长、很简陋。已经跟不上当代前端的发展审美了。

而动态路由地址、则好看的多。

就比如以下对比：

query字符串地址：https://aiiko.club/user?username=shiinaaiiko

动态路由地址：https://aiiko.club/shiinaaiiko

所以、您觉得哪个更简单好看？

而静态化网页则无法实现动态路由。一旦有新的数据或者更新了老数据、则无法访问。需服务端渲染才可以完成。毕竟、静态化都是渲染好了存放起来的文件而已。

静态化与服务端渲染访问同一个网页的速度对比

(服务端渲染)

(静态化渲染)

很明显、静态化的访问速度比服务端渲染还要快很多。

而如果仅仅只是加载DOM、优势更大！

静态化服务端渲染是什么？

静态化的同时、也提供服务端渲染！

静态化服务端渲染、就是将上面2个问题可以同时解决的方案。

此方案适用于基于Vue的NUXT项目。

既可以满足静态化的首屏快速访问、又可以满足动态路由的数据实时性与优雅。完美！

哪些内容适合静态化、哪些不适合静态化？

适合静态化的内容：

文章页的标题正文、

视频页的标题正文、

等等

而其实用户打开页面最多的也就是这些了。（毕竟量大

不适合静态化的内容：

推荐列表（此需要实时更新）、

用户频道页（如果用户发了新内容岂不是看不见？）、

文章视频的阅读数、分享数、收藏数等（这些东西你静态化了岂不是就一直写死了吗）、

评论弹幕等交互信息（交互的内容是没法静态化的、同样是有一定动态性）。

等等

文章视频页面的静态化解决方案

一般情况下、文章视频都是通过api一次性获取到正文内容与收藏阅读点赞次数。

而我们则将此分开。

正文内容这些我们通过静态化获取、毕竟这些很少改动。改动了也就是重新获取而已。

而收藏阅读点赞等信息则在用户加载静态化HTML成功后通过API拉取。

您别看一个接口的东西分成2个接口好像是繁琐了。

实际上、正文内容静态化只有在渲染的时候才会获取一次。后续任何用户范围都不会再获取。除非更新或删除。

而仅仅只是通过api拉取点赞收藏等各个数字而已。。。各种数字传输起来还是比正文更快吧？

更新有解决方案了、那删除怎么办？

如果用户或管理员删除了一篇内容。

而用户依然可以通过静态文件访问。这岂非很费解之？删除还有何用？

所以建议是在nuxt项目里。我们会运行node程序的。

通过node定时监听有哪些数据被删除了。

如果这些数据属于我们静态化的内容、则通过node终端命令直接对static下的文件进行删除处理。

我想这个定时器可以设置到1分钟或者5分钟之间。不能太快。也不能太慢。

至于如何检测哪些内容删除。

我想我们可以通过对数据库的delete字段与updateTime字段判断。

删除也会更新updateTime。

只要delete为true、而updateTime又符合node定时任务之后的时间。

则此内容就是需要删除的！

而为了以防万一有漏网之鱼。

我们可以在深夜宁静之时、再次检索数据库。

将当日已删除的内容获取出来。并对静态文件再一次进行删除处理。有则删、无则跳过也。

静态化服务端渲染的实现构思与步骤想法

此方案是以Nuxt项目为例作为构思方案。

目前仅做了试验性实验、暂未部署到正式环境下。

不过我想问题应该不大

1、使用后端API接口返回一个需要静态化的网址数组

如、我们的动态路由地址是aiiko.club/article/:id

这就是一个以文章id作为动态参数的路由地址、如果我们有几十万甚至百万篇文章。可能还是后端一次性处理起来更方便呢。因为这意味着有几十万个地址。

nuxt官方项目采用的是直接在nuxt.config.js配置文件里获取远端api的数据然后map出数组。

且如果一次性返回的数据量太大。也会浪费nuxt静态化打包的时间

所以、我们采用通过API给nuxt配置文件返回一个数组即可。其他的交给Nodejs直接分析数据拼接

2、在nuxt.config.js配置文件里通过generate.routes里返回一个Promise对象。

此异步对象就是将api里的数据传给nuxt配置文件。

有哪些需要静态化的就传哪些。

然后开始nuxt generate！

3、将之前输出的静态化文件转移到nuxt根目录static文件夹下

静态化之后不仅仅有我们指定输出的动态路由网页。也包括了其他我们不需要静态化的地址。比如说推荐首页。

一般情况下推荐首页代表了信息的实时性。我们不建议对它进行静态化。

所以我们将静态化输出目录dist文件夹的所有内容通过node或者其他方式进行筛选、非我们指定地址全部进行删除处理。

最终得到的这些文件通过终端命令转移到static文件夹下即可。

4、最终完成

开启nuxt build && npm run start

这样我们就完成了。

只要static有对应的静态文件。那么nuxt就会优先加载静态文件。

而没有的则会以服务器端渲染的方式加载。

我们每天晚上在熟睡之际、让程序自动对当日新内容或新更新的内容定时静态化并转移到static下即可。

以此我们就实现了静态化服务端渲染！

是不是听着如此的美妙？