如何深入浅析CSR和SSR

发布时间:2022-01-25 09:37:38 作者:柒染
来源:亿速云 阅读:493

这篇文章给大家介绍如何深入浅析CSR和SSR,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

如何深入浅析CSR和SSR

前序:简述SEO

客户端渲染:
服务端渲染:

这里简单示例一个服务端渲染的例子:

import Koa from 'koa'
import Router from 'koa-router'
const app = new Koa()
const router = new Router()
router.get('/', async (ctx) => {
	ctx.body = `		<html>
		  <head>
		    <title>服务端渲染返回</title>
		  </head>
		  <body>
		    <h2>Hello World!</h2>
		  </body>
		</html>
	`
})
app.use(router.routes())

app.listen(3000, () => {
	console.log("koa server listening on 3000")
})

通过上述服务端返回的html字符串到客户端直接显示成了相应的网页,这样客户端不用再去多次不断的请求服务端加载数据了

如何深入浅析CSR和SSR

服务端渲染 VS 客户端渲染
  1. 由于直接返回HTML到客户端进行渲染,客户端需要多次发送AJAX到服务端拉取JS代码执行,导致了页面的首屏加载速度会变慢。

  2. 对于SEO是不友好的,因为我们客户端是从服务端拉取JS过来执行的,而搜索引擎的爬虫只能识别html结构的内容,对于js代码则不能够进行识别。

因此SSR的出现就是可以解决了传统CSR存在的这种弊端,因为此时客户端请求拿到的就将是我们服务端渲染好的html,这样对于SEO也足够的友好。

如何深入浅析CSR和SSR

关于如何深入浅析CSR和SSR就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. 什么是CSR ? 什么是公钥和私钥?
  2. 深入浅析angular和vue还有jquery的区别

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ssr csr

上一篇:Linux系统中怎么为Vim安装Python-mode

下一篇:Python与C++的引用实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》