web开发模式

1. Web 开发模式

目前主流的 Web 开发模式有两种,分别是

① 基于服务器渲染的传统 Web 开发模式

② 基于前后端分离的新型 Web 开发模式

1. 服务器渲染的Web开发模式

服务器渲染的概念:服务器发送给客户端的 HTML 页面,是在服务器通过字符串的拼接,动态生成的。客户端不需要使用 Ajax 这样的技术额外请求页面的数据

代码示例:

javascript 复制代码
app.get('/index.html', (req, res) => {
    // 渲染的数据
    const user = { name: 'zs', age: 20 }
    // 服务器通过字符串的拼接,动态生成 html 内容
    const html = `<h1>姓名:${user.name}, 年龄: ${user.age}</h1>`
    // 把生成好的页面内容响应给客户端,因此客户端拿到的是带有真实数据的 html 页面
    res.send(html)
})

2. 服务端渲染的优缺点

优点

① 前端耗时少。因为服务器负责动态生成 html 内容。浏览器只用渲染页面就可以了

② 有利于SEO。因为服务器端响应的是完整的 html 内容,所以爬虫更容易爬取获得信息,更有利于 SEO

缺点

① 占用服务器端资源。

② 不利于前后端分离,开发效率低。使用服务器渲染无法分工合作。

3.前后端分离的Web开发模式

前后端分离的概念:前后端分离的开发模式,依赖于 Ajax 技术的广泛使用。前后端分离的 Web 开发模式就是后端只负责提供 API 接口,前端使用 Ajax 调用接口的开发模式

4. 前后端分离的优缺点

优点

① 开发体验好。前端专注于 UI 页面的开发,后端专注于 api 的开发,前端有更多的选择性

② 用户体验好。Ajax 技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新

③ 减轻了服务器端的渲染压力。

缺点

① 不利于 SEO。(解决方法:利用 Vue。React 等前端框架的 SSR(server side render)技术能很好的解决 SEO 问题)

相关推荐
熊的猫44 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书