最近经常听到其他主攻 Vue
项目的前端小组提到 SSR
这个名词,一直都不明白是什么东西,只以为是他们内部做的什么工具之类的东西,虽然有些好奇,但也没怎么在意,直到后来在某技术论坛闲逛的时候忽然也看到这个名词了,点进去后通篇看完才知道 ssr
是个什么东西。
SSR的概念
Server Slide Rendering
,缩写为 ssr
,即服务器端渲染,因为是后端出身,所以其实早就明白是怎么回事,只是没这个具体名词的概念罢了,这个词被频繁提起也是拜近年来前端飞速发展所赐,主要针对 SPA
应用,目的大概有以下几个:
- 解决单页面应用的
SEO
单页应用页面大部分主要的HTML
并不是服务器返回,服务器只是返回一大串的 脚本,页面上看到的大部分内容都是由脚本生成,对于一般网站影响不大,但是对于一些依赖搜索引擎带来流量的网站来说则是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息,自然也就无流量可言。
- 解决渲染白屏
因为页面HTML
由服务器端返回的脚本生成,一般来说这种脚本的体积都不会太小,客户端下载需要时间,浏览器解析以生成页面元素也需要时间,这必然会导致页面的显示速度比传统服务器端渲染得要慢,很容易出现首页白屏的情况,甚至如果浏览器禁用了JS
,那么将直接导致页面连基本的元素都看不到。
Vue
和 React
是用来做单页应用最普遍的框架,因为我对 react
更熟悉,所以这里我只说下 React SSR
。
客户端部分
新建 React页面
首先,要有一个用于展示的 React
页面,例如:
// ./client/components/About/index.jsx
import React, { Component } from 'react'
import styles from './style.scss'
import './style'
export default class About extends Component {
constructor() {
super()
this.state = {
txtInfo: ''
}
}
componentWillMount() {
this.state.txtInfo = 'zhangsan'
}
componentDidMount() {
this.getInfo()
}
render() {
return (
<section className={styles['about-wrapper']}>
<p className="title">About Page</p>
<p className="txt-info">{
this.state.txtInfo}</p>
</section>
)
}
getInfo() {
fetch('/api/user/getInfo', {
credentials: