服务器端渲染(SSR)

2024-06-14 02:44
文章标签 渲染 服务器端 ssr

本文主要是介绍服务器端渲染(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性能指标很好。(客户端网络差的时候尤其明显)


这篇关于服务器端渲染(SSR)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1059150

相关文章

OpenGL ES 2.0渲染管线

http://codingnow.cn/opengles/1504.html Opengl es 2.0实现了可编程的图形管线,比起1.x的固定管线要复杂和灵活很多,由两部分规范组成:Opengl es 2.0 API规范和Opengl es着色语言规范。下图是Opengl es 2.0渲染管线,阴影部分是opengl es 2.0的可编程阶段。   1. 顶点着色器(Vert

Java Socket服务器端与客户端的编程步骤总结

一,InetAddress类: InetAddress类没有构造方法,所以不能直接new出一个对象; 可以通过InetAddress类的静态方法获得InetAddress的对象; InetAddress.getLocalHost(); InetAddress.getByName(""); 类主要方法: String - address.getHostName(); String - addre

【鸿蒙HarmonyOS NEXT】调用后台接口及List组件渲染

【鸿蒙HarmonyOS NEXT】调用后台接口及List组件渲染 一、环境说明二、调用后台接口及List组件渲染三、总结 一、环境说明 DevEco Studio 版本: API版本:以12为主 二、调用后台接口及List组件渲染 后台接口及返回数据分析 JSON数据格式如下: {"code": 0,"data": {"total": 6,"pageSize"

TCP网络通信服务器端简单示例

服务器端: #include <stdio.h> #include <winsock2.h> //和网络通信相关的函数的声明,类型的声明,常量的定义等都在此头文件中 #pragma comment(lib,"ws2_32.lib") int main() { //第一步:初始化Socket函数库 WSADATA wsaData; //向系统请求使用2.2版本的Socket函数库,wsaDat

【爬虫渲染神器】selenium 和pyppeteer 的动态渲染ajax反爬虫

许多网页是动态加载的网页,其中不乏使用了ajax异步技术,那么我们有没有一种渲染工具,直接省略分析过程,模拟浏览器渲染的操作呢,获取到我们想要的内容。当然有,下面我们介绍两种渲染工具的实战使用。 目标网站: http://www.porters.vip/verify/sign/ 点击参看详情页的里面内容。 前一篇文章,我们介绍了,js逆向分析两种方法JS逆向–签名验证反爬虫】sign签名验证

如何将 Redshift Cryptomatte AOV 与 teamrender 结合使用,成都渲染101云渲染

这篇文章将讨论在 Cinema 4D 中将 cryptomatte AOV 与 teamrender 结合使用时常见的问题和解决方案。在 Cinema 4D 中使用 AOV 时,用户希望它们的工作方式与其他 AOV 完全相同。但事实并非如此,尤其是与 teamrender 结合使用时。  在 Cinema 4D 中,使用AOV 面板中的Multi-pass和Direct复选框之间的区别非常重要。

vue中跳转当前页无法重渲染且报错问题

1、解决报错: // router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 解决报错👇const routerPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(l

HarmonyOS开发实战( Beta5版)高负载组件的渲染实践规范

简介 在应用开发中,有的页面需要在列表中加载大量的数据,就会导致组件数量较多或者嵌套层级较深,从而引起组件负载加重,绘制耗时增长。虽然可以通过组件复用避免组件重复创建,但是如果每个列表项中包含的组件较多,在转场或者列表滑动的时候列表项就会一次性加载大量的数据,可能引起卡顿掉帧等性能问题。 转场场景 由于业务需求,从当前页面进入一个新页面时,会有转场动画播放,并且在动画首帧中加载新页面所需要的

浏览器输入url到渲染完成经历了那些内容

问: 浏览器输入url到渲染完成经历了那些内容 回答: 从浏览器输入 URL 到页面渲染完成的过程涉及多个步骤,每个步骤都涉及特定的网络和计算机科学技术。以下是这一过程的基本流程: URL 解析: 用户在浏览器地址栏输入 URL(统一资源定位符)。浏览器解析 URL,分解成协议(如 HTTP/HTTPS)、域名、路径、查询参数等。 DNS 查询: 浏览器检查本地缓存是否有该域名的 IP

自定义渲染组件及材质 / 引擎源码 / Dashboard

B站视频: Cocos Creator 3D 官方中文教程——《快上车3D》案例添加链接描述 (请点击跳转) cocos creator 1.x shader 没有经过包装,可以直接定义shader,替换 sprite 原来的 shader,可以参考之前博客; cocos creator 2.x 引入了材质系统,使用 shader 必须通过材质,这里介绍下如何使用自定义 shade