javascript使用服务端渲染的示例分析

小编给大家分享一下javascript使用服务端渲染的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

前言

前阵子有搞了 React 服务端渲染的项目，是否应该用这个主要还是看场景吧。

比较适用于大家常说的 SEO 和首屏渲染这些，一般都是 toc 的业务才会需要用到。

同构

现代框架的服务端渲染和 jsp、php 这些还是有不少区别的。因为 nextjs 和 nuxtjs 这种不仅仅是服务端渲染，它们还是同构框架。

什么是同构呢？就是一份代码既可以跑在浏览器端，也可以跑在服务端。这得益于 NodeJS 在服务端的流行。

传统 jsp、php、django 这些服务端渲染框架都是返回 html 字符串，类似于传统的 MPA 多页面模式。所以切换页面的时候就会刷新，重新请求 css 和 js 文件，用户体验比较差。

而现在流行的前端开发模式都是 SPA 单页面，基于 H5 的 History 来实现切换页面无刷新，这样可以带来更好的用户体验。

所以 nextjs 和 nuxtjs 不仅支持服务端渲染，还支持 SPA，常用的是对首页进行服务端渲染，其他页面依然保持 SPA 的无刷新访问模式。

我们这边就有使用 Django 来编写的页面，维护起来很痛苦。因为无法说清楚哪些是前端负责的，哪些是后端负责的。所以为了维护这个，前端和后端都去要学习 Python 和 Django，大大提高了维护成本。

实际应用场景的话，我们这里有几种场景就比较适合用服务端渲染。

支持 Post 请求

一个是重构的 h6 页面，项目以前是新加坡团队用 Python + Django 写的，所以有些页面是第三方网站 Post 提交表单打开的。

我们重构后的 H5 页面都挂在腾讯云 CDN 上面，不支持用 Post 打开的。为什么不改成 Get 呢？因为这是以前他们协定的，然后银行都是爸爸，他们不会为了我们去改协议的。

页面功能都是比较简单的，所以为了赶上重构的时间线，当时旁边的小伙伴用 Express + EJS 实现了一版，只支持 ES5 的语法。

后续需求经历几次变更，想在原来的页面上加功能都比较麻烦。比如我想实现 JS Bridge，我只能用 microbundle 把现有的 npm 包打成一个 umd 文件，然后用 script 标签引入。

动态渲染标题

前阵子遇到了另一个需求，我需要为多家银行实现同样的 H5 页面，功能基本上都是一样的，但 App 头部需要展示不同银行的名字。

在我们 AirPay App 里面，客户端在打开 webview 的时候会去读取我们 HTML 里面的 title，将其设置为原生头部的标题。

如果我在代码里面使用 document.title 的方式动态设置就不会生效，只能通过 JS Bridge 来动态设置头部。

但这个页面不仅会提供给 AirPay 使用，还会提供給 Shopee 使用，需要兼容两套 JS Bridge，有点儿得不偿失。

但如果使用服务端直出的形式，就可以在服务端直接判断好需要渲染的标题，设置到 HTML 的 title 里面。这就是另一种适合的业务场景了。

所以在之前项目基础上添加了 React 服务端渲染的功能，支持用 React 开发同构应用。这里也没有用 Next，只是自己实现的一套同构。

大致实现思路是用 isomorphic-style-loader 和 universal-router 来处理样式和路由的同构，服务端获取到数据后输出到 window._INITIAL_STATE__ 里面，在浏览器获取这个初始化数据实现数据同构的。

同时也保留了原来的 EJS 模板，都是基于 Express 路由分发的，既可以渲染用 EJS 渲染，也可以用 React 服务端直出。

一期的这个页面是挂在腾讯云 CDN 上面的，二期使用了服务端渲染，可以明显感觉到加载速度变快了很多，毕竟以前还是会展示一个 loading 图。

在进程守护方面，整个部门的 Node 服务都是用大佬写的 Node Agent 来做，也经受住了各种大促的考验。

缺点

当然了，服务端渲染也不应该滥用。

比如我们的内部后台管理系统就上了 Nuxt，现在每次本地构建要花10分钟，非常影响开发效率。

Nuxt 功能还是非常强大的，比如会根据路由动态拆分构建文件、鼠标放到 Nuxt-link 路由组件上面就会预加载 JS 文件等等。

但实际上带来的收益几乎为零，因为我们不需要 SEO，也不需要提高首屏加载速度。

几乎组里面每个人都有尝试用各种手段去优化构建，但效果不是很明显。直到最近开始做微前端拆分，才曲线解决这个问题。

除此之外，服务端渲染在写法上也和客户端渲染有一些区别，容易导致 bug。

比如下面在 Vuex 的 state 文件里面的这段代码：

const date = moment().format('YYYY-MM-DD')
export default () => ({  
date
})

打开页面的时候，时间应该展示的是今天。哪怕页面放置刚好跨天了，打开再刷新也应该是当天时间。

但在 Nuxt 里面，这个展示的日期就是你服务启动那天的日期，不管你怎么刷新，它永远不会变化。

因为 Nuxt 初始化的时候会把这些数据存到 store 里面，后续再怎么刷新，这个文件也不会在服务端重新加载，因为模块会被 Node 缓存起来，所以日期就不会更新。

但在客户端渲染里面，由于页面刷新会导致浏览器端重新加载 JS 文件，这个日期也会重新计算。

以上是“javascript使用服务端渲染的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！