服务器端渲染(SSR)

什么是服务器端渲染 ssr

SSR 的全称是 Server Side Rendering,对应的中文名称是:服务端渲染,也就是将页面的 html 生成工作放在服务端进行。
网页通常是通过后端路由直接给客户端的。也就是说网页的html一般是后端服务器里通过模板引擎渲染好后再交给前端的。

什么是前端渲染

以VUE为例,我们查看生产环境的页面的html源码,会得到如下的样子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue</title>
</head>
<body><div id="app"></div><script type="text/javascript" src="xxxx.xxx.js"></script><script type="text/javascript" src="yyyy.yyy.js"></script><script type="text/javascript" src="zzzz.zzz.js"></script>
</body>
</html>

这里只有空的 <div id="app"></div> 入口,以及一系列的js。其实,我们看到的页面就是由这些js渲染出来的,这就是前端渲染

阶段实现方式
1. 早期 SSR基于模板引擎(PHP、JSP)生成静态 HTML 页面
2. CSR基于 SPA 框架,在客户端进行动态渲染
3. 同构 SSR基于同一套代码在服务端和客户端都能执行的特点实现。首次访问页面为 SSR,后续交互为 SPA 的体验
早期SSRCSR(SPA)同构 SSR
首屏速度
SEO
页面跳转体验差,跳转需要刷新
服务器压力

spa页面例子

在这里插入图片描述
spa应用的特点是依赖 JS 运算生成对应的 DOM 节点, html 文件里本来是不存在具体的DOM节点。而 SSR 是可以在服务器渲染好完整的DOM结构再返回给客户端。

在这里插入图片描述
服务端渲染时候执行的生命周期顺序和客户端渲染是一致的,但是需要注意是在服务端执行的生命周期钩子内,是无法执行浏览器特有的api


Nuxt.js 构建服务器端

使用Vue.js创建SSR应用Vue.js 是一种流行的 JavaScript 框架,广泛用于构建响应式和高效的 UI。Vue.js 提供了许多强大的功能和 API,使开发人员能够快速构建高性能的应用程序。为了创建基于 Vue.js 的 SSR 应用程序,我们需要使用 Nuxt.js。Nuxt.js 是一个基于 Vue.js 的 SSR 框架,是一个构建 Vue.js 应用程序的灵活和易用的工具。在接下来的示例中,我们将演示如何使用 Nuxt.js 创建一个基本的 SSR 应用程序。

步骤1: 安装Nuxt.js并创建项目

首先,我们需要安装 Nuxt.js。要安装 Nuxt.js,请运行以下命令:

npm install nuxt

安装完毕后,我们需要创建 Nuxt.js 项目。要创建项目,请运行以下命令:

npx create-nuxt-app my-project 

这个命令将提示您在项目中选择一些配置选项。选择与您的需求相对应的选项。

步骤2: 创建页面

在 Nuxt.js 中,页面保存在位于/pages目录中的.vue 文件中。我们可以创建一个新的页面并在其中添加一些内容。以下是一个名为index.vue的基本页面:

<template><div><h1>{{ title }}</h1><p>{{ message }}</p></div>
</template><script>
export default {data () {return {title: '欢迎来到Nuxt.js应用程序',message: '欢迎使用Vue.js创建服务器端渲染应用程序'}}
}
</script><style scoped>
h1 {color: red;
}
</style>

在这个页面中,我们定义了一个简单的 HTML5 模板,其中包含一个标题和一些文本内容。我们还使用 Vue.js 的 data() 方法定义了一些数据,并使用插值语法将这些数据绑定到页面中的标记中。

步骤3: 运行您的应用程序

要运行您的 SSR 应用程序,请以开发模式运行 Nuxt.js。运行以下命令:

npm run dev

这个命令将使用 Node.js 启动一个本地服务器,您可以在浏览器中访问该服务器。

步骤4: 在浏览器中查看应用程序

打开您的浏览器,然后在地址栏中输入 http://localhost:3000。您应该可以看到您的应用程序。查看页面源代码,您将看到我们在.vue 文件中定义的文本。

步骤5: 样式永远不会撞车

在 Nuxt.js 中,您可以将 CSS 样式添加到Vue.js 组件或文件中,就像在普通的 Vue.js 应用程序中一样。由于服务器端渲染和客户端渲染之间的差异,因此您必须以一种特定的方式加载样式,以确保它们在渲染过程中起作用。
在 Nuxt.js 中,您可以在.vue 文件中使用

h1 {color: red;
}
</style>

Nuxt.js遵循特定的目录结构,其中一些关键目录如下

├── .nuxt/                # 自动生成的文件,包含编译后的代码和配置
├── assets/               # 用于存放未编译的静态资源,如CSS、图片、字体
├── components/           # 自定义Vue组件
├── layouts/              # 应用的布局文件,定义页面的通用结构
│   └── default.vue       # 默认布局
├── middleware/           # 中间件文件
├── pages/                # 应用的路由和视图,每个文件对应一个路由
│   ├── index.vue         # 默认首页
│   └── [slug].vue        # 动态路由示例
├── plugins/              # 自定义Vue.js插件
├── static/               # 静态资源,会被原样复制到输出目录
├── store/                # Vuex状态管理文件
│   ├── actions.js        # Vuex actions
│   ├── mutations.js      # Vuex mutations
│   ├── getters.js        # Vuex getters
│   └── index.js          # Vuex store入口文件
├── nuxt.config.js        # Nuxt.js配置文件
├── package.json          # 项目依赖和脚本
└── yarn.lock             # 或者npm.lock,记录依赖版本

什么是 Next.js

Next.js 通过提供所有生产环境需要的功能来给你最佳的开发体验:构建时预渲染,服务端渲染,TypeScript 支持,智能打包,路由预加载,零配置等等
是一个非常全面的现代全栈应用构建方案。它包含了非常优雅的 TypeScript 和 React 支持,同时提供了现代应用常见的需求解决方案,例如:路由,API,PostCSS 工具和代码分割等

项目创建

我们将使用 TypeScript 模版来创建一个默认的 Next.js 应用

npx create-next-app@latest --typescript nextjs-fullstack-app-template-zncd nextjs-fullstack-app-template-zn// ESLInt : YES
// `src/` directory : YES
// `app/` directory : NOyarn dev

Next.js 应用的常见目录结构

my-next-app/
|-- pages/
|   |-- index.js        # 主页
|   |-- _app.js         # 可选的 App 组件,用于初始化页面
|   `-- [其他页面].js
|-- public/             # 静态文件放置目录,如图片、favicon 等
|-- styles/             # 样式文件目录
|-- node_modules/       # 项目依赖目录
|-- package.json        # 项目依赖和脚本配置文件
|-- next.config.js      # 可选的 Next.js 配置文件
`-- [其他配置文件]

SSR优点

利于seo优化,方便搜索引擎抓取数据。服务端和客户端分工明确,仍保留客户端路由管理,全局数据状态管理等功能。大幅提高页面访问性能。
在这里,我主要想展开说说为什么可以明显地提升性能。
1️⃣. 把依赖接口的数据提前在服务端获取,节省了等待接口响应的时间。
2️⃣. 获取到了接口数据,根据特定逻辑渲染成真正的DOM结构。这个步骤也放到了服务端执行,节省客户端渲染时间。(客户端机型性能差的时候尤其明显)
3️⃣. 浏览器加载资源,无需等待任何JS文件的加载,就可以渲染出初始页面,LCP和FCP性能指标很好。(客户端网络差的时候尤其明显)


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/852032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统入门系列-MIT6.828(操作系统工程)学习笔记(七)---- 系统调用函数与GDB(Lab: system calls)

系列文章目录 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;一&#xff09;---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;二&#xff09;---- 课程实验环境搭建&am…

【设计模式之享元模式 -- C++】

享元模式 – 共享对象&#xff0c;节省内存 享元模式&#xff08;Flyweight Pattern&#xff09;是一种用于性能优化的模式&#xff0c;其核心是运用共享技术来有效支持大量细粒度的对象。享元模式可以避免大量非常相似类的开销。在程序设计中&#xff0c;有时我们需要生成大量…

vue-router 源码分析——6.命名路由

这是对vue-router 3 版本的源码分析。 本次分析会按以下方法进行&#xff1a; 按官网的使用文档顺序&#xff0c;围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码&#xff0c;更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升&#xff0c;甚至面试时…

Python 围棋游戏【含Python源码 MX_008期】

简介&#xff1a; 围棋&#xff0c;源自中国&#xff0c;是一种两人对弈的策略棋类游戏。它被认为是世界上最复杂的棋类游戏之一&#xff0c;因为它的规则简单&#xff0c;但变化复杂多样。围棋的游戏目标是在棋盘上占领更多的地盘&#xff0c;并用自己的棋子围住对手的棋子&am…

docker-compose harbor 2.11

harbor 前言 “Harbor” 是一个用于管理容器镜像的开源仓库项目。由 VMware 开发和维护,Harbor 提供一个企业级的 Docker 镜像仓库,具有丰富的功能,包括: 镜像管理:提供存储和分发 Docker 镜像的能力。安全性:支持镜像签名和漏洞扫描,确保镜像的安全性。身份认证:集成…

项目代码导出到word脚本

需求 之前课程需求&#xff0c;需要将项目代码导出到一个word进行存档。当时就写了这个脚本来进行导出&#xff0c;现在毕业论文又有这个需求了&#xff0c;将这个脚本总结并帮助更多的人。 项目地址github项目&#xff0c;如果有人想更加完美的可以进行修改。 实现与操作 …

Android基础-JNI

一、JNI概述 JNI&#xff0c;全称Java Native Interface&#xff0c;是Java平台标准版&#xff08;Java SE Platform&#xff09;的一部分&#xff0c;它允许Java代码与其他语言写的代码进行交互。在Android系统中&#xff0c;JNI尤为重要&#xff0c;因为它连接了Java层与底层…

MySQL CDC

一、MySQL CDC概念 MySQL CDC&#xff08;Change Data Capture&#xff09;&#xff0c;即MySQL变更数据捕获&#xff0c;是一种能够捕获MySQL数据库中数据变化&#xff08;包括插入、更新和删除操作&#xff09;的技术。这些变化可以实时或准实时地同步到其他系统或服务中&am…

41 mysql subquery 的实现

前言 sub query 是一个我们经常会使用到的一个 用法 我们这里 看一看各个场景下面的 sub query 的相关处理 查看 本文, 需要 先看一下 join 的相关处理 测试数据表如下, 两张测试表, tz_test, tz_test03, 表结构 一致 CREATE TABLE tz_test (id int(11) unsigned NOT NUL…

vuex4.x 升级pinia,router 中使用同步组件导致项目启动失败

背景描述 升级的项目本来是vue2的项目&#xff0c;先升级成vue3&#xff0c;这个过程相关的问题都被决绝&#xff0c;当时状态管理使用的还是vuex4.x版本。 后面发现变成复杂模块时&#xff0c;后续再对复杂模块的功能进行迭代时&#xff0c;由于js的弱类型&#xff0c;改动时…

Python3 数据结构

列表 Python中列表是可变的&#xff0c;这是它区别于字符串和元组的最重要的特点&#xff0c;一句话概括即&#xff1a;列表可以修改&#xff0c;而字符串和元组不能。 以下是 Python 中列表的方法&#xff1a; 方法描述list.append(x)把一个元素添加到列表的结尾&#xff0…

管道(channel)和协程案例

请完成协程和管道协同工作的案例&#xff0c;具体要求&#xff1a; 1、开启一个writeData协程&#xff0c;向管道中写入50个整数 2、开启一个readData协程&#xff0c;从管道中读取writeData写入的数据 3、注意&#xff1a;writeData和readDate操作的是同一个管道 4、主线程需要…

0120__多字节字符vs宽字符

【字符集二】多字节字符vs宽字符-CSDN博客 多字节字符与宽字节字符_宽字符-CSDN博客

热门开源项目推荐:技术与地址概览

随着开源项目的不断兴起&#xff0c;越来越多的优秀项目涌现出来&#xff0c;为开发者们提供了丰富的资源和灵感。在此&#xff0c;我将为大家推荐几个热门的开源项目&#xff0c;并附上它们的开源地址&#xff0c;以供大家参考和了解。 1. TensorFlow 项目简介&#xff1a; …

Get、Post的区别------重定向和转发的区别-----http、https的区别!!!

一、Get和Post的区别 1、用途 Get&#xff1a;用于从服务器请求数据&#xff0c;幂等&#xff0c;不改变服务器的数据。Post&#xff1a;用于向服务器发送数据&#xff0c;可能改变服务器数据。 2、数据传输方式 Get&#xff1a;通过url传参&#xff0c;使用&符号连接多…

QT调用vs2019生成的c++动态库

QT调用vs2019生成的c动态库 dll库的创建方法&#xff1a; VS2019创建c动态链接库dll与调用方法-CSDN博客 加减法示范&#xff1a; 头文件 // 下列 ifdef 块是创建使从 DLL 导出更简单的 // 宏的标准方法。此 DLL 中的所有文件都是用命令行上定义的 DLL3_EXPORTS // 符号编…

SurfaceView->SurfaceView基本概念

绘制过程 View和SurfaceView绘制过程 PhoneWindow&#xff1a;Window的具体实现&#xff0c;在Activity中调用setContentView()方法时&#xff0c;一个PhoneWindow实例会对应一个ViewRootImpl实例&#xff0c;绘制&#xff0c;事件分发传递给ViewRootImpl进行ViewRootImpl&…

少样本学习元学习

基本概念 首先是机器学习&#xff1a; 然后&#xff0c;什么是元学习&#xff08;what is meta learning?) 之前&#xff0c;Component都是让人自己设置的。在Meta Learning中&#xff0c;我们期望它能够自己学出来。 不同的meta learning方法就是想办法去学learning algori…

Python记忆组合透明度语言模型

&#x1f3af;要点 &#x1f3af;浏览器语言推理识别神经网络 | &#x1f3af;不同语言秽语训练识别数据集 | &#x1f3af;交互式语言处理解释 Transformer 语言模型 | &#x1f3af;可视化Transformer 语言模型 | &#x1f3af;语言模型生成优质歌词 | &#x1f3af;模型不确…

安卓兼容的编程语言有哪些:探索多样化的开发选择

安卓兼容的编程语言有哪些&#xff1a;探索多样化的开发选择 在安卓应用开发的世界里&#xff0c;编程语言的选择丰富多样&#xff0c;每一种语言都有其独特的优势和适用场景。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入剖析安卓兼容的编程语言&#xf…