客户端渲染_判断是否客户端渲染nuxt - CSDN
精华内容
参与话题
  • 最近在学习 React 的服务端渲染,于是使用 Express+React 写了一个 Demo,用于对比和客户端渲染的差异。github 地址 先看一下效果吧: 1、访问 服务器端渲染 Online Demo 2、我们可以看到,首屏数据很快的就显示出来...
        

    最近在学习 React 的服务端渲染,于是使用 Express+React 写了一个 Demo,用于对比和客户端渲染的差异。github 地址

    先看一下效果吧:

    1、访问 服务器端渲染 Online Demo

    2、我们可以看到,首屏数据很快的就显示出来了,可是页面的进度条却还在加载中(因为客户端 js 很大)。

    3、当进度条加载完成后,页面才能进行交互操作(切换路由,登录等)。

    4、查看网页源代码,页面内容都在页面中。

    效果不明显的话,可以打开控制台,在 Network 栏 Disable cache,然后刷新。

    通过这次简单的访问,我们就能看出服务器端渲染的 2 大特点,首屏直出SEO 友好

    为什么要做服务器端渲染?

    1、访问 客户端渲染 Online Demo

    2、我们可以看到,首屏至少等待了 6 秒才渲染出来,这对于一般的用户,是难以容忍的。

    3、不过一旦渲染完成,页面就立即可交互了(切换路由,登录等)。

    4、查看网页源代码,页面只有一个空 div 容器,而没有实际内容。

    通过这次访问,我们就能看出客户端渲染的特点,首屏加载时间长SEO 不友好,但可见即可操作

    其实我们在访问客户端渲染的页面时,请求到的只是一个 html 空壳,里面引入了一个 js 文件,所有的内容都是通过 js 进行插入的,类似于这样:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>ssr</title>
      </head>
      <body>
        <div id="root"></div>
        <script src="bundle.js"></script>
      </body>
    </html>

    正是因为页面是由 js 渲染出来的,所以会带来如下几个问题:

    1、页面要等待 js 加载,并执行完成了才能展示,在这期间页面展现的是白屏

    2、爬虫不能识别 js 内容,所以抓取不到任何数据,不利于 SEO 优化

    为了解决这 2 个问题,我们可以使用服务器端渲染。

    React 服务器端渲染流程

    之前说道,客户端渲染的页面,请求到的是一个 html 空壳,然后通过 js 去渲染页面。那如果请求到的直接是一个渲染好的页面,是不是就可以解决这 2 个问题了呢?

    没错,服务器端渲染就是这个原理。

    简化流程

    1、服务器端使用 renderToString 直接渲染出包含页面信息的静态 html

    2、客户端根据渲染出的静态 html 进行二次渲染,做一些绑定事件等操作。

    服务器端没有 DOM,Window 等概念,所以只能渲染出字符串,不能进行事件绑定,样式渲染等。

    只有第一次访问页面时才使用服务器端渲染,之后会被客户端渲染接管。

    开始写代码吧

    接下来我们一起来写一个 React 服务器端渲染 Demo。

    编写路由

    这里使用 react-router 对前后端代码进行同构。

    1、客户端

    使用 react-router-dom 下的 BrowserRouter 进行前端路由控制。

    2、服务器端

    使用 react-router-dom 下的 StaticRouter 进行静态路由控制,具体操作如下:

    • 使用 react-router-config 下的 matchRoutes 匹配后端路由,使用 renderRoutes 渲染匹配到的路由。
    • 使用 react-router-dom/server 下的 renderToString 方法,渲染出 html 字符串,并返回给前端。
    使用 StaticRouter 中通过 context 可以和前端页面通信,传参。

    状态管理

    在 React 中,我们常常使用 redux 来存储数据,管理状态。

    1、客户端

    使用 redux 进行状态管理,使用 react-redux 提供的 Provider 为组件注入 store。

    2、服务器端

    和客户端一样,但每一次接收到请求需产生一个新的 store,避免多个用户操作同一个 store。

    数据请求

    1、客户端

    使用 axios 在 componentDidMount 中请求数据。

    2、服务器端

    同样使用 axios 去请求数据,但是服务器端不会触发 componentDidMount 生命周期。我们可以在后端匹配到路由的时候,进行数据请求,并把数据存入 redux 中的 store,然后渲染出包含数据的 html 页面,为了避免客户端二次请求,服务器端向 window 中注入 REDUX_STORE 数据,客户端直接使用此数据作为客户端 redux 的初始数据,以免发生数据抖动。

    具体操作如下:

    • 在 routes 对象上挂载一个自定义方法 loadData。
    • 在服务器端 matchRoutes 后,如果有 loadData,则进行请求数据,并把请求到的数据写入 store 中。
    • 服务器端等待请求完成后,再进行 renderToString 渲染。

    样式处理

    1、客户端

    使用 css-loader,style-loader 打包编写好的 css 代码并插入到页面中。

    2、服务器端

    由于 style-loader 会插入到页面,而服务器端并没有 document 等概念,所以这里使用 isomorphic-style-loader 打包 css 代码。

    • 引入 isomorphic-style-loader 后,客户端就可以通过 styles._getCss 方法获取到 css 代码。
    • 通过 staticRouter 中的 context 把 css 代码传入到后端。
    • 后端拼接好 css 代码,然后插入到 html 中,最后返回给前端。

    SEO 优化

    SEO 主要是针对搜索引擎进行优化,为了提高网站在搜索引擎中的自然排名,但搜索引擎只能爬取落地页内容(查看源代码时能够看到的内容),而不能爬取 js 内容,我们可以在服务器端做优化。

    常规的 SEO 主要是优化:文字链接多媒体

    • 内部链接尽量保持相关性
    • 外部链接尽可能多
    • 多媒体尽量丰富

    由于网页上的文字,链接,图片等信息都是产品设计好的,技术层面不能实现优化。我们需要做的就是优化页面的 title,description 等,让爬虫爬到页面后能够展示的更加友好。

    这里借助于 react-helmet 库,在服务期端进行 title,meta 等信息注入。

    你可能不需要服务器端渲染?

    现在,我们成功地通过服务器端渲染解决了首次加载白屏时间SEO 优化。但也带来了一些问题:

    • 服务器端压力增大。
    • 引入了 node 中间层,可维护性增大。

    以上两个问题归根结底还是钱的问题。服务器压力大,可以通过买更多的服务器来解决。可维护性增大,可以招募更多人来维护。但是对于小型团队来说,增加服务器,招募更多维护人员,都会额外增加的支出,所以在选择服务器端渲染时,要权衡好利弊。

    解决 SEO 的另一种方法

    如果只是想优化 SEO,不妨使用预渲染来实现,推荐使用 prerender 库来实现。

    prerender 库的原理:先请求客户端渲染的页面,把客户端渲染完成之后的结果,拿给爬虫看,这样爬虫获取到的页面就是已经渲染好的页面。prerender 库在使用时会开启一个服务,通过传递 url 来解析客户端渲染页面,这就需要我们对服务器端架构进行调整。

    1、 nginx 判断访问类型

    2.1、 用户访问 :直接走客户端渲染

    2.2、 爬虫访问 :走预渲染

    总结

    通过这个 Demo,让我加深了对服务器端的理解,如有错误,麻烦多多指正,谢谢大家!

    如果觉得有用得话给个 ⭐ 吧。react-ssr-demo

    展开全文
  • 客户端渲染和服务端渲染

    客户端渲染和服务端渲染

    展开全文
  • 客户端渲染客户端渲染(Client Side Render),就是用户在通过URL请求访问网站时,服务器端返回给的是html文档,再让浏览器去解析渲染展示页面,其中的js,css,图片文件等均需再次发送请求去服务端请求数据加载...

    前序:简述SEO

    • SEO(Search Engine Optimization)是指搜索引擎优化,通俗说就是总结搜索引擎的检索排名规则,合理的优化网站,使得你的网站在百度或者谷歌这样的搜索引擎中的排名进步,让更多的用户能够访问到你的网站。

    客户端渲染:

    • 客户端渲染(Client Side Render),就是用户在通过URL请求访问网站时,服务器端返回给的是html文档,再让浏览器去解析渲染展示页面,其中的js,css,图片文件等均需再次发送请求去服务端请求数据加载。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gK3fIEBS-1603268250499)(../imgs/image-20201021161510511.png)]

    服务端渲染:

    • 与客户端渲染相对应的就是服务器端渲染(SSR),在服务端看来,所有的前端渲染显示页面都是一串字符串,包括html, js, css都是如此,服务端渲染即是将一段处理好后的html字符串返回给客户端,而在返回的这个html字符串中,服务端知识将需要展示到html的服务端数据等信息直接写入到了这段html字符串中让客户端浏览器能够直接对其进行显示。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXCb9Kve-1603268250501)(../imgs/image-20201021161552689.png)]

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

    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>
    		    <h1>Hello World!</h1>
    		  </body>
    		</html>
    	`
    })
    app.use(router.routes())
    
    app.listen(3000, () => {
    	console.log("koa server listening on 3000")
    })
    

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3TPEpk9N-1603268250503)(../imgs/image-20201021161648488.png)]

    服务端渲染 VS 客户端渲染
    • CSR和SSR最大的区别在于CSR进行页面的渲染是服务端直接返回HTML给客户端渲染显示,而SSR则是将页面的渲染交给了服务端的JS执行。
    • **传统的CSR的弊端 => **
    1. 由于直接返回HTML到客户端进行渲染,客户端需要多次发送AJAX到服务端拉取JS代码执行,导致了页面的首屏加载速度会变慢。
    2. 对于SEO是不友好的,因为我们客户端是从服务端拉取JS过来执行的,而搜索引擎的爬虫只能识别html结构的内容,对于js代码则不能够进行识别。

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

    展开全文
  • 客户端渲染

    2019-05-13 20:06:08
    BSR(csr)客户端渲染 浏览器端渲染 browser side render client side render 通过api调用获取服务器端的数据,在客户端浏览器中进行展示(html标签拼接) 所有数据的拼接处理都是在客户端进行完成的,服务器端只...

    BSR(csr)客户端渲染 浏览器端渲染

    browser side render
    client side render
    通过api调用获取服务器端的数据,在客户端浏览器中进行展示(html标签拼接)
    所有数据的拼接处理都是在客户端进行完成的,服务器端只负责数据的输出
    

    优劣

    1. 可以减少服务器的压力,把页面渲染部分的操作放到用户设备上完成
    2. 可以根据数据在不同终端机上使用不同的展示形式
    3. 存在数据安全问题
    在html里边拼接 只获取那些不同的数据 json数据 然后拼接
    ![客户端渲染](https://img-blog.csdnimg.cn/20190513195558362.png)
    

    SSR服务器端渲染

    server side render
    所有页面组织都是在服务器端完成的,组装好代码之后以完整的页面形式返回
    

    优劣:

    1. 减少网络请求次数,所有操作在服务器端一次完成
    2. 服务器渲染压力会比较大

    npm环境配置
    在这里插入图片描述

    展开全文
  • 客户端渲染:在服务端放了一个html 页面,里面有&lt;script&gt;//发请求,拿数据,模版引擎渲染等,$.ajax ,&lt;/script&gt;客户端发起请求,服务端把页面(响应的是字符串)发送过去,客户端从上到...
  • 要想对比服务端渲染和客户端渲染首先要知道它们的概念? 什么是服务端渲染? 我们用传统的servlet开发来举例:浏览器请求servlet,servlet在服务端生成html响应给浏览器,浏览器展示html 的内容,这个过程就是服务端...
  • 之所以选择服务器端渲染,主要出于以下两点考虑: 能够为客户提供更理想的性能 提供更为一致的SEO表现 正是由于SSR拥有上述优势,因此我们在将自有堆栈转换为React与Node.js时,投入了大量时间与...
  • 模板引擎渲染 Note:第一次请求是拿到页面,第二次请求是拿到动态资源数据 缺点: 对SEO相当不友好 优点: 减轻了服务器端的渲染压力;同时,最大的好处就是:能够实现前后端分离开发; Server: 读取index.html ...
  • 一、前言 主要涉及: 1、什么是服务端渲染 2、什么是客户端渲染 3、两者的区别,以及什么场合使用 二、主要内...
  • Vue客户端渲染和服务端渲染异同

    千次阅读 2018-09-20 18:15:18
    本文比较服务端和客户端渲染的不同,并用实例验证,同时会讲解一些Vue服务端渲染的概念。 本文不讲Vue服务端渲染的具体实现过程,需要学习服务端渲染的同学可以异步Vue服务端渲染官方教程地址: ...
  • 服务端渲染和客户端渲染的区别 概念 服务端渲染(吐) 服务端在返回html之前,在特定的区域,符号里用数据填充,再给客户端,客户端只负责解析HTML 客户端渲染(填) html仅仅作为静态文件,客户端在请求时,...
  • 前端:客户端渲染 vs 服务器渲染

    万次阅读 2016-03-09 11:25:09
    目前通常有两种选择:服务器渲染 与 客户端渲染 笔者是支持客户端渲染的(没错就是钦点的) 以 Jade, YAML 为代表的 模板渲染引擎 一般作用于 服务器 作为 后端 的 视图部分。 而使用 JavaScript 直接 处理 ...
  • 什么是服务器端渲染和客户端渲染?  互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文件之后就...
  • C端项目重构成首屏服务端渲染(SSR:serve side render),对于重构成SSR,redux不是必须的。本文以vue为栗子的项目。 二、什么是服务端渲染 将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态...
  • 服务器渲染 与 客户端渲染 何为渲染? 如果我们只是想显示一堆不变的数据,那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。 但这是基本不可能的事情,数据一般是变化的。 你不可能为每套数据写一个...
  • 尽管我们大力倡导诸如SpringMVC,Vaadin和JavaServer Faces之类的服务器端Web框架,但我们知道客户端渲染也有很多好处。 即使您的组织严重依赖服务器端技术,也请考虑客户端渲染的以下五个好处,并查看它们是否...
  • 服务器端渲染 vs 客户端渲染 vue服务器端渲染的实现 nuxt的使用 什么是服务端渲染 概念:后端先调用数据库,获得数据之后,将数据和页面元素进行拼装,组合成完成的html页面,再直接返回给浏览器,以便用户浏览 ...
  • 目前通常有两种选择:服务器渲染 与 客户端渲染 笔者是支持客户端渲染的(没错就是钦点的) 以 Jade, YAML 为代表的 模板渲染引擎 一般作用于 服务器 作为 后端 的 视图部分。 而使用 JavaScript 直接 处理
  • 最进刚基本完成了一个服务端渲染轮子的搭建,整个流程真的是让人头疼,就目前单纯的前端直接做服务端渲染其实真的是很吃力的,它要求我们不仅需要对前端的东西了解,同时对于服务端的知识也得有一定的接触,哪怕现在...
1 2 3 4 5 ... 20
收藏数 107,110
精华内容 42,844
关键字:

客户端渲染