SPA页面同构渲染和服务端渲染这是我参与8月更文挑战的第10天，活动详情查看: 8月更文挑战基于客户端渲染的前端框架

这是我参与8月更文挑战的第10天，活动详情查看: 8月更文挑战

基于客户端渲染的前端框架

Angular
React
Vue

SPA 单页面应用

优点

用户体验好
开发效率高
渲染性能好
可维护性好
....

缺点

首屏渲染时间长
不利于 SEO

同构应用

通过服务端渲染首屏直出，解决 SPA 应用首屏渲染慢以及不利于 SEO 问题
通过客户端渲染接管页面内容交互得到更好的用户体验 这种方式通常称之为现代化的服务端渲染，也叫同构渲染 这种方式构建的应用称之为服务端渲染应用或者是同构应用

1. 服务端渲染基础

什么是渲染？

{
    "message": "你好，世界"
}

<h1>{{ message }} </h1>


转换成 <h1>你好，世界</h1>

渲染：把【数据】 + 【模板】拼接到一起

传统的服务端渲染

早期的 Web 页面渲染都是在服务端进行的

通过 Node.js 演示传统的服务端渲染模式

// index.html
<body>
<h2> {{ title }} </h2>
<ul>
{{ each posts }}
<li>{{ $value.title }}</li>
{{ /each }}
</ul>
</body>

// express框架
// index.js

const express = require('express')
const app = express()
const template = require('art-template')

app.get('/', (req, res) => {
    // res.send('hello world')
    // 1. 获取页面模板
    const templateStr = fs.readFileSync('./index.html', 'utf-8')
    
    // 2. 获取数据
    let data = fs.readFileSync('./data.json', 'utf-8')
    data = JSON.parse(data)
    
    // 3. 渲染： 数据 + 模板 = 最终结果
    // 使用 art-template
    const html = template.render(templateStr)
    
    
    // 4. 把渲染结果发送给客户端
    res.send(html)
})

app.listen(3000, () => console.log('running...'))

缺点：网页越来越复杂的情况下，存在很多不足

前后端代码完全耦合在一起，不利于开发和维护
前端没有足够发挥空间
服务端压力大
用户体验一般

随着客户端 Ajax 技术的普及, 使得客户端动态获取数据成为可能, 服务端渲染工作 -> 来到了客户端

2. 客户端渲染 (Client Side Renderer)

以 Vue.js 项目为例系统了解客户端渲染流程

【后端】负责处理数据接口
【前端】负责将接口数据渲染到页面中

【前端】更为独立，不再受限制于【后端】 不足：

首屏渲染慢
不利于 SEO

1. 为什么首屏渲染慢

请求周期长，相关资源较多

2. 为什么不利于 `SEO`

// 搜索引擎是怎么获取网页内容的？
const http = require('http')

http.get('http://localhost:8080/', res => {
    let data = ''
    res.on('data', chunk => {
        data += chunk
    })
    res.on('end', () = () => {
        console.log(data)
    })
})

// 查出的 html 只有 <div id="app"></div>
// 并不是渲染之后的结果

3. 现在化的服务端渲染 - 同构渲染

同构渲染 = 后端渲染 + 前端渲染

基于 React、Vue 等框架，客户端渲染和服务器端渲染的结合
- 在服务器端执行一次，用户实现服务器端渲染（首屏直出）
- 在客户端再执行一次，用户接管页面交互
核心解决 SEO 和首屏渲染慢的问题
拥有传统服务端渲染的优点，也有客户端渲染的优点

如何实现同构渲染？

使用 Vue、React 等框架的官方解决方案
- 优点：有助于理解原理
- 缺点：需要搭建环境，比较麻烦
使用第三方解决方案
- React 生态的 Next.js
- Vue 生态的 Nuxt.js
- ...

以 Vue 生态的 Nuxt.js 为例演示同构渲染应用

SPA页面同构渲染和服务端渲染