这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天.
CSR
客户端渲染(Cilent-Side Rendering).常见B端WEB应用开发模式,前后端分离,服务器压力相对更轻,渲染工作在客户端进行,服务器直接返回不加工的HTML用户在后续访问操作。 SPA:单页面应用,它所需的资源(HTML CSS JS),在一次请求中就加载完成,不需刷新地动态加载,首屏时间更长
SSR
服务器端渲染
<?php if ( count( $_POST ) ): ?>
<?php include WTG_INCPATH . "/wechat_item_template.php’?>
<div style="...">
<div id="wechat-post" class="wechat-post" style-"..."><div class="item" id="item-list">
<?php
$order = 1;
foreach ( $_POST[ "posts'] as $wechat_item_id ) {echo generate_item_list($wechat_item_id, $order );
$order++;
?>
</div>?php
$order = 1;
foreach ( $_POST[ 'posts '] as $wechat_item_id ) {
echo generate_item_html( $wechat_item_id, $order );$order++;
}
?>
<fieldset style="...">
<section stvle_“.0862
<p style="...">如果心中仍有疑问,请查看原文并留下评论噢。(<span style="font-size:0.8e</section>
同构SSR
前后端一体化,一套React代码在服务器上运行一遍,到达浏览器又运行一遍。前端后端都要参与渲染,而且首次渲染出的HTML要一样。
SSG
静态站点生成(Static Site Generation),在构建的时候直接把结果页面输出html到磁盘
每次访问直接把html
返回给客户端,相当于一个静态资源
CDN:建立并覆盖在Internet之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。
相比 SSR,因为不需要每次请求都由服务器端处理,所以可以大幅减轻服务器端的压力
oeo
缺陷在于只能用于偏静态的
页面,无法生成与用户相关的内容,也就是所有的用户访问的页面都是相同的。
SSR和SSG的优势-更短的首屏时间
SSR / SSG 只需要请求一个HTML文件就能展现出页面,虽然在服务器上会调取接口,但服务器之间的通信要远比客户端快,甚至是同一台服务器上的本地接口调取。因为不再需要请求大量js文件,这就使得SSR / SSG可以拥有更短的首屏时间。
SSR和SSG的优势-利用SEO
浏览器的推广程度,取决于搜索引擎对站点检索的排名,搜索引擎可以理解是一种爬虫,它会爬取指定页面的HTML,并根据用户输入的关键词对页面内容进行排序检索,最后形成我们看到的结果。 元