哈尔滨手机网站建设价格,杭州品牌策划,简单的个人简历网页代码,电子商务网站开发基础应用场景 内容丰富#xff0c;复杂交互的动态网页#xff0c;对首屏加载有要求的项目#xff0c;对 seo 有要求的项目#xff08;因为服务端第一次渲染的时候#xff0c;已经把关键字和标题渲染到响应的 html 中了#xff0c;爬虫能够抓取到此静态内容#xff0c;因此更… 应用场景 内容丰富复杂交互的动态网页对首屏加载有要求的项目对 seo 有要求的项目因为服务端第一次渲染的时候已经把关键字和标题渲染到响应的 html 中了爬虫能够抓取到此静态内容因此更利于 seo。此方式一些适合的项目活动模板新闻通知类博客系统混合开发等等。 SSR的优势 有利于SEO: 不同爬虫工作原理类似只会爬取源码不会执行网站的任何脚本Google除外据说Googlebot可以运行javaScript。使用了React或者其它MVVM框架之后页面大多数DOM元素都是在客户端根据js动态生成可供爬虫抓取分析的内容大大减少。另外浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML网络爬中就可以抓取到完整页面的信息。 下面使用 node 写一个简单的请求原来获取页面内容 const fs require(fs)fetch(http://localhost:4200).then(response response.text()).then(html {// 使用 fs 将获取到的内容保存到本地便于比对fs.writeFileSync(${__dirname}/CSR.html, html);console.log(HTML:, html);}).catch(error {console.error(Error fetching the page:, error);});对 SSR 和 CRS 页面内容爬取做对比 下图是 CSR 构建的页面通过爬虫获取页面可以看到只爬取到了项目打包后dist 文件中的 index.html 文件其中可以用于 SEO 的数据只有 Title 一行代码对整个项目的 SEO 不太友好 下图是 SSR 构建页面通过爬虫获取到了SSR 构建的页面可以爬到页面上的所有内容包括其中一些在后端渲染好的数据其中读取到的数据都可以用作 SEO 有利于首屏渲染 首屏的渲染是node发送过来的html字符串并不依赖于js文件了这就会使用户更快的看到页面的内容。尤其是针对大型单页应用打包后文件体积比较大普通客户端渲染加载所有所需文件时间较长首页就会有一个很长的白屏等待时间。 比对 SSR 和 CSR 首页加载速度 从 Network 中可以看出 SSR构建的页面初始 HTML 是在服务器上生成的并在服务器上完成渲染。服务器返回已渲染好的 HTML 内容给客户端CRS 构建的项目会先去获取 JS 文件获取完之后再去请求接口获取数据如果 JS 文件比较大就会有一个很长的等待时间形成一个首页白屏的问题 局限 服务端压力较大 SSR 将页面渲染移动到服务器端页面的每一次点击、修改都需要调用因此会增加服务器的压力以其相比还是 CSR 更方便一点 开发条件受限 在服务端渲染中只会执行 ngOnInit 、 ngOnDestroy、 ngAfterViewInit、 ngAfterContentInit 等生命周期钩子因此项目引用的第三方的库也不可用其它生命周期钩子这对引用库的选择产生了很大的限制 复杂的客户端交互 SSR 通常需要更多的服务器端配置和复杂的代码。前后端更紧密耦合开发和维护相对复杂。CSR 更容易实现前后端分离较为彻底前端负责渲染和交互后端提供 API。 在一些项目中也可以采用混合使用 SSR 和 CSR 的方式这被称为“渐进式渲染”Progressive Rendering。这样可以充分利用 SSR 的优势来提高首屏加载性能同时在页面交互性较高的部分使用 CSR。
