脚本宝典收集整理的这篇文章主要介绍了前端架构之路（9） - 服务器端渲染（SSR）与 node 中间层，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
服务器端渲染（SSR）与 node 中间层
1. 什么时候需要“服务器端渲染或 node 中间层”
在前后端分离之后，后端语言的模板功能被弱化，整个页面的渲染基本上都由前端 js 动态渲染，但这样对于一些应用来说是有缺陷的。比如需要 SEO 的，需要打开页面不用等待就能看到页面的，这尤其对于电商类应用是必需的。
解决这个问题有两个思路：
- 服务器端渲染（SSR）：就是服务器端和前端共用同一个应用，然后通过构建工具及配置，确定哪些组件需要在服务器端渲染，哪些组件需要在客户端渲染；
- node 中间层：保留服务器端模板渲染的功能，但是由 node 程序来代替以往的后端语言进行模板渲染（毕竟前端更懂前端），后端语言与 node 程序只做数据交互。
2. 服务器端渲染
服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。
现有比较好解决方案：
-
next.js: 服务器端渲染 react 组件，用法和介绍建议查看 用Next.js快速上手React服务器渲染。
-
nuxt.js: 服务器端渲染 vue 组件，用法和介绍建议查看 https://zh.nuxtjs.org/。
对于 react, gatsby 也是一个不错的解决方案。
服务器端渲染，社区还在不停的探索中，期待未来的新体验。
如果构建完之后需要自动把代码上传服务器，可以试试 md-sync.
3. node 中间层
首先推荐大家看看：
使用 node 中间层做开发，有一个挑战就是如何让前后端分离的两个项目协同开发与调试。
一般 web 项目开发时都有热更新（Hot Reloading）与热替换（Hot Replacing）功能，像 lila 构建工具都有内置这个功能，如果要自己搭建，推荐 webpack-dev-middleware & webpack-hot-middleware。
而一般 node 项目开发时也有类似的功能，推荐使用 nodemon，它可以监听 node 程序文件变动，然后自动刷新服务器。
如果能将两者结合起来开发，不管改动 web 项目文件还是 node 项目文件，浏览器页面都能够自动刷新，这样就可以在本地调试 node 中间层的模板输出，克服前后端分离带来的弊端，提高开发效率。
当然这个功能需要构建工具去特定的支持。以 lila 工具为例：
- 配置
lila.config.js 中 wrITeFile 为 true: { writeFile: true };
- 运行
lila 模块开发 lila dev test/index;
- 运行 node 应用程序
nodemon app.js，并将 url 指定 path/to/web/PRoject/dev/test/index/index.htML;
- 在浏览器中打开
http://localhost:3000（具体的地址根据 node 应用程序而定）;
- 更改
web/project/src/test/index/ 下的文件，刷新浏览器可以看到变化;
- 更改 node 应用程序文件，刷新浏览器也可以看到变化;
4. 后续
上一篇：单页面应用（SPA）、按需加载
更多博客，查看 https://github.com/senntyou/blogs
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
以上是脚本宝典为你收集整理的前端架构之路（9） - 服务器端渲染（SSR）与 node 中间层全部内容，希望文章能够帮你解决前端架构之路（9） - 服务器端渲染（SSR）与 node 中间层所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。