开门见山，本人用vite和vite-plugin-ssr做了一个SSR项目小模板，这里是在线示例，部署在vercel

功能

• 首屏 SSR
• 路由动画
• 国际化
• React18
• antd5 + tailwind 动态主题
• rtl/ltr
• docker + pm2部署
• vercel 部署
• 传统nodejs部署
• 传统浏览器兼容

如果对只项目感兴趣的话，可以去github，以下跟项目无关

背景

我是一个工作三年多的前端，回想这三年，我总结了以下几个阶段：

• 第 1 年：写原生js/jquery，会写一点vue，完全无法理解webpack
• 第 2-3 年：熟练vue/react，会用webpack，典型的业务码农吧，跟前端相关的都知道一点，但不明白原理，学习一个新的技术会比较吃力。整个人的视野都在前端圈，完全抗拒后端服务端
• 第 3 年 - 至今：接触SSR，不甘继续做个业务搬运工，开始学习后端的东西，也看了大量的前端构建相关的源码。大概半年的时间吧，提升很大，很多以前完全不明白的，都渐渐领悟了

我想把最近半年的成长经验分享给大家，分享给还困在前端构建/框架等等领域的同学们

故事的开始

一切的开始都源于： 为什么不使用nextjs 在我接触SSR之前，我几乎一直在开发 SPA 项目，基本上就是在用create-react-app vue-cli umi。就好像是被潮流推着走，这些优秀的框架把一切基建都搭好了，我们只管用。很多时候我都不知道某某文件的作用是什么，为什么代码要这样写…（虽然我是计算机专业的）

当我准备做SSR项目的时候，有一个非常成熟的框架摆在我的面前，它就是nextjs。 nextjs太优秀了，它几乎集成了所有前端常用的模块：路由/国际化/预渲染/图片优化等等…。正是因为它太优秀了，所以我放弃了它 我当时心想，如果我继续像以前一样，我可能做完这个SSR项目还是没什么进步，于是选择了vite作为基建，从零搭建一个ssr项目

了解前端的历史

我应该算是入行比较晚的，我入行的时候开始流行SPA了。那时候不懂什么是服务端渲染，为什么会流行客户端渲染。不了解原因（痛点），那就一定不能理解解决方案 做SSR后，我了解了前端渲染的历史，清楚了每个阶段的痛点，这让我可以更容易理解框架服务端渲染的原理。这个学习方式，我也用在学习开源项目中，比如学习vite，可以去看它最初版本的代码，知道其核心原理，以不变应万变

了解服务端

我也不怕丢人，我虽然每次开发都会启动脚手架自带的node服务，但是我以前都不知道这个服务做了什么。可能不仅仅我一个人这样吧，因为大部分时候都是在写SPA静态网站，都是打个包就把资源丢给服务器了，没去思考过本地服务的目的是什么。我想这也是为什么我以前搞不明白webpack的原因。我的思维总是停留在 静态 页面，而忽略了 动态 的服务。做SSR项目，就一定会接触到比较基础的node服务了，这个过程中我明白了前端的开发服务。当我们跳出纯前端来看待开发，会有不一样的感触

知道每个文件的意义

前端项目根目录上会有非常多配置文件。我以前就知道它们大概是什么，但因为司空见惯以及平时基本上不会改动这些文件，导致我没有去深入了解 不知道你有没有思考过 .env文件是怎么被使用到的。.browserslistrc的目标浏览器应该如何配置最适合项目，有哪些插件在使用它。Dockerfile就只知道它是用来部署的，具体是做什么的不知道 如果一直似懂非懂，会局限我们的思维和能力。要明白项目中每个文件的意义，每行代码的意义。这些都能极大提升我们处理事故和扩展项目的能力

学会调试debug

指的是vscode debug，不是浏览器debug。因为开发SSR项目会有node环境相关的bug，所以我开始使用vscode断点debug，非常高效方便。我曾经浪费了很多时间在看开源库上，就嗯看，看着看着就昏昏沉沉了，效率极低，但这种debug走主流程的方式可以让咱们更快更容易理解逻辑

最后

很少写文章，不善言辞。以上都只是一个前端菜鸟的一些感悟，希望能帮助到一些新手同学