页面渲染基础知识

最新推荐文章于 2023-04-21 14:39:15 发布

poppy.xu

最新推荐文章于 2023-04-21 14:39:15 发布

阅读量196

点赞数

分类专栏： SSR同构渲染文章标签：前端 html javascript seo

本文链接：https://blog.csdn.net/qq_39045755/article/details/114294070

版权

SSR同构渲染专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们这里所讨论的渲染: 把[数据] + [模板] 拼接到一起

内容概要

传统的服务端渲染
客户端渲染
现代化的服务端渲染(同构渲染SSR)

传统的服务端渲染

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

工作流程
传统服务端工作流程

服务端代码

const express = require('express') const fs = require('fs')
const template = require('art-template') const app = express()
app.get('/', (req, res) => {
// 1. 得到模板内容
const templateStr = fs.readFileSync('./index.html', 'utf-8')
// 2. 得到数据
const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
// 3. 渲染:数据 + 模板 = 完整结果
const html = template.render(templateStr, data)
console.log(html)
// 4. 把渲染结果发送给客户端
res.send(html) })
app.listen(3000, () => console.log('running...'))

客户端代码

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8" />
   	<title>Document</title>
  </head>
  <body>
    <h1>{{ message }}</h1>
    <ul>
		{{ each todos }}
		<li>{{ $value.title }}</li> 
		{{ /each }}
    </ul>
  </body>
</html>

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

客户端渲染

随着Ajax技术的普及，客户端可以请求到数据后进行渲染。可以解决服务端渲染的一些问题

工作流程
客户端渲染工作流程
缺点

首屏渲染慢：因为HTML中没有内容，必须等到JavaScript加载并执行完成才能呈现页面内容。请求顺序为：html > js > data > 渲染
不利于SEO: 同样因为 HTML 中没有内容，所以对于目前的搜索引擎爬虫来说，页面中没有任何有用的信息，自然无法提取关键词，进行索引了。

现代化的服务端渲染

又叫做同构渲染，同构渲染=后端渲染+前端渲染

同构渲染基本流程

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

如何实现同构渲染

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

同构渲染应用的问题

开发条件所限

浏览器特定的代码只能在某些生命周期钩子函数中使用
一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
不能在服务端渲染期间操作dom
某些代码操作需要区分运行环境
…

涉及构建和部署的要求更多
在这里插入图片描述

更多的服务器端负载

在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器需要大量占用CPU资源
如果应用在高流量环境下使用，需要准备相应的服务器负载
需要更多的服务端渲染优化工作
…

服务端渲染使用建议

首屏渲染速度是否真的重要？
是否真的需要SEO ?

poppy.xu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面渲染基础知识

我们这里所讨论的渲染: 把[数据] + [模板] 拼接到一起内容概要传统的服务端渲染客户端渲染现代化的服务端渲染(同构渲染SSR)传统的服务端渲染早期的wb页面渲染都是在服务端进行的工作流程代码服务端代码const express = require('express') const fs = require('fs')const template = require('art-template') const app = express()app.get('/', (.
复制链接

扫一扫