ssr血泪史,又㕛叒叕失败了QAQ

2022-03-17 18:00:00

背景

很久不更博?

不是的,真的没有偷懒

去年建站到现在,基本大部分的时间都花在研究ssr上了。由于太菜实在没办法搞定,现在正处于摆烂状态

我为什么要研究ssr

那还不是度娘的锅,建站后,尝试了各种SEO办法,度娘始终不收录本站(其实就是百度搜索yongchin’s blog,无法搜出本站)

那为什么不收录呢?最大的原因就是本站是采用vue编写,属于SPA应用。

ssr很麻烦,我有尝试预渲染,但效果不明显,度娘仍未收录。

迫于无奈,只能尝试ssr。

关于ssr的介绍,可在vue3官方处 了解到

演变过程

顺路聊一下前端内卷变迁史吧:

  1. 最初的 Java、PHP 时代的纯服务端渲染时代
  2. 前后端分离,即使用 JavaScript 运行在客户端,通过请求获取服务端接口数据,借助如 JQuery、Angular、React、Vue 等前端框架操作或生成页面 DOM,充分利用客户端资源,减少服务端压力,前后端分工明确,一直到现在仍是最常用的开发方式。
  3. 同构开发,如 Next.js、Nuxt.js、ssr 框架等框架,都提供了不同的适用场景和开发方式,但目的都是为了同一套代码能同时应用于服务端和客户端。

记一下流水账

  • 更早以前:
    vite ssr 项目创建并试用,载入router出问题,卒
    ssr框架项目下载并试用,一大堆egg,midway无法理解,学习成本庞大,卒

  • 2021年10月12日,nuxt3横空出世。vue3的ssr时代来临。?

  • 2021年12月27日,抽时间学习并创建试用,无法引入主流antdvue、naive-ui等 UI库,卒

  • 2022年1月17日,在浏览naive-ui组件库的时候无意间瞥见ssr,貌似看到了希望,参照vite和naive-ui的ssr例子进行尝试,个别UI无法渲染,官方群询问无果,说是vue3自身的bug,Hydration水合问题,ssr再次以失败告终。

  • 2022年1月24,又来到ssr框架,静下心阅读文档,从ssr框架了解前端发展史。
    再次了解ssr及其原理

  • 2022年1月25日 在 https://github.com/TuSimple/naive-ui/issues/2219 处找到,新进展

  • 2022年1月29日 通过Zolyn大佬的项目进行研究学习,提交issue确认

  • 2022年1月30日 参考vite ssr官方例子,naive-ui ssr 官方例子, Ephemeres项目,vue3 + ts + vite ssr + naive-ui的例子初步搭建完成

  • 2022年4月30日 nuxt3迎来了它的第一个rc版本,满怀欣喜地更新了试用,还是坑!

目前踩坑进度

页面发送的http请求问题,拿不到数据
还是ssr注水问题没弄明白

最终(2022-05-11记)

最终我还是没有完成ssr
但我仍然重构了我博客