精华内容
下载资源
问答
  • 服务端渲染

    2020-08-27 12:42:04
    服务端渲染服务端渲染与客户端渲染?服务端渲染与客户端渲染优缺点通过vue-server-renderer的createRenderer方法Nuxt.jsnuxt.js优点文件目录路由配置 服务端渲染与客户端渲染? 服务端渲染:dom树在服务器生成返回...

    服务端渲染与客户端渲染?

    	服务端渲染:dom树在服务器生成返回给前端
    	客户端渲染:前端向后端请求数据获取数据后生成dom树
    

    服务端渲染与客户端渲染优缺点

    	客户端优点:	
    			1.前后端分离,开发效率高
    			2.页面之间切换快减少服务器压力
    	客户端缺点:	
    			1.首屏加载慢,得等js加载完毕才能渲染
    			2.不利于seo,爬虫不识别js
    	服务端优点:
    			1.首次加载快,前端耗时少
    			2.利于seo优化
    	服务端缺点:
    			1.服务器压力大
    

    服务端渲染
    基于vue: nuxt.js
    基于react:next.js

    通过vue-server-renderer的createRenderer方法

    const express = require("express")
    const app = express()
    const Vue = require("vue");
    const vueServerRender = require("vue-server-renderer").createRenderer();//可以将vue的实例转为html的形式
    app.get('*', (request, response) => {
        const vueApp = new Vue({
          data:{
            message: "hello ssr"
          },
          template: `<h1>{{message}}</h1>`
        })
        response.status(200);
        response.setHeader("Content-type", "text/html;charset-utf-8");
        vueServerRender.renderToString(vueApp).then((html) => {
          response.end(html);
        }).catch((error)=>console.log(error))
    })
    app.listen(3001, ()=> {
      console.log('服务已经开启成功')
    })
    

    Nuxt.js

    Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架,用于解决网站的SEO优化

    nuxt.js优点

    	1.解决SEO优化
    	2.解决首次加载慢
    	3.路由根据文件夹的层级关系自动划分路由
    	4.内置webpack,不用在自己配置webpack
    	5.支持异步数据,对vuex进一步的封装
    	6.内置less,scss,js,ts以及各种ui框架
    	7.支持热更新
    	8.集成了eslint
    

    文件目录

    ├─ assets —组织未编译的静态资源如 LESS、SASS 或 JavaScript
    ├─ components —组织应用的 Vue.js 组件
    ├─ layouts —组织应用的布局组件
    │ └─ default.vue
    ├─ middleware —存放应用的中间件
    ├─ nuxt.config.js
    ├─ package.json
    ├─ pages —组织应用的路由及视图
    │ └─ index.vue
    ├─ plugins —组织那些需要在 根 vue.js 应用 实例化之前需要运行的 Javascript 插件。
    ├─ static —存放应用的静态文件
    │ └─ favicon.ico
    └─ store —组织应用的 vuex 状态树 文件

    路由配置

    	Nuxt中路由会根据文件夹的层级关系生成路由,一共有三种路由 
    		1.普通路由 
    			普通路由中比如创建一个home的文件夹home下有一个index.vue,
    			那么在跳转的时候就直接是<nuxt-link to=”/home”></nuxt-link>即可
    		2.动态路由 
    			在我们写列表条详情的时候经常用到,
    			动态路由的文件夹必须 _开头如: _id.vue,它对应生成的路由表是/:id
    		3.嵌套路由
    			嵌套路由比如在pages文件夹下写一个goods.vue文件他就是父级,
    			创建个文件夹叫goods(必须与父级同名),文件夹下创建一个list.vue,
    			那么list就是goods的子级
    

    特殊配置

    asyncData()
    //只能写在组件内部,每次加载之前调用,内部没有this

    <template>
        <div>
            <h1>姓名:{{info.name}}</h1>
            <p><nuxt-link to='/'>Home</nuxt-link></p>
        </div>
    </template>
    <script>
    import axios from 'axios'
    export default {
        data() {
            return {
                name: 'muzidigbig',
            }
        },
        asyncData ({ params }) {//请求
    	return  axios({
    	    method: 'get',
    	    url: '.......'
    	}).then(function (response) {
                return { info: response.data};
                error(params)
            })
        }
    }
    </script>
    

    fetch()
    //可写组件内部也可写在vuex中,处理异步与asyncData区别是fetch不能设置组件数据,内部没有this,一般写在vuex中

    <script>
      export default {
        async fetch({ store, params }) {
          await store.dispatch('GET_STARS')
        }
      }
    </script>
    //vuex
    export const actions = {
      async GET_STARS({ commit }) {
        const { data } = await axios.get('http://my-api/stars')
        commit('SET_STARS', data)
      }
    }
    

    head()或head{}
    //使用head方法来设置当前页面的头部标签

    <template>
      <h1>{{ title }}</h1>
    </template>
    
    <script>
      export default {
        data() {
          return {
            title: 'Hello World!'
          }
        },
        head() {
          return {
            title: this.title,
            meta: [
              {
               	hid: 'description',
                name: 'description',
                content: 'My custom description'
              }
            ]
          }
        }
      }
    </script>
    

    middleware:设置中间件
    scrollToTop 属性用于控制页面渲染前是否滚动至页面顶部

    展开全文
  • 一、基本原理1、服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端。...b、服务端渲染生成html,前端通过ajax获取然后使用js动态添加...2、服务端渲染的优劣服务端渲染的好处:a、seo问...

    一、基本原理

    1、服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端。然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式:

    a、服务器通过模板引擎直接渲染整个页面,例如java后端的vm模板引擎,php后端的smarty模板引擎。

    b、服务端渲染生成html,前端通过ajax获取然后使用js动态添加。

    2、服务端渲染的优劣

    服务端渲染的好处:

    a、seo问题,有利于搜索引擎蜘蛛抓取网站内容,利于网站的收录于排名,有利于第三方的统计;

    b、首屏加载过慢问题,现在成熟的SPA项目中,打开首页需要加载完js以及别的资源。通过服务端渲染可以加速首屏加载,如拼多多。

    服务端渲染的坏处:

    给服务端增加压力。

    3、SSR的实现原理

    a2c4d67bbd47756b9db285026534a120.png

    简单讲下,ssr的实现原理。ssr有两个入口文件,client.js和server.js 。webpack通过两个入口文件分别打包成给服务端用的server bundle 和给客户端用的client bundle。当服务端接受到来自客户端的请求后,会创建一个渲染器bundleRender, 这个bundleRenderer会读取上面生成的server bundle 文件,并且执行它的代码,然后发送一个生成好的html到浏览器,等客户端加载了client bundle 之后,会和服务端生成的DOM进行Hydration (判断这个DOM和自己即将生成的DOM是否相同,如果相同就是将客户端的vue 实例挂载到这个DOM上,否则会提示警告)。

    客户端请求服务器,服务器根据请求地址获得匹配的组件,在调用匹配到的组件返回 Promise (官方是preFetch方法)来将需要的数据拿到。最后再通过

    将其写入网页,最后将服务端渲染好的网页返回回去。

    4、实现过程

    创建一个vue实例 ;

    配置路由,以及相应的视图组件;(路由的配置与往常的不太一样,用react  常用的路由表示)

    使用vuex管理数据,在beforeMount 中先进行渲染,与react生命周期中的shouldComponentUpdate差不多

    创建服务端入口文件

    创建客户端入口文件

    配置webpack, 分服务端打包配置和客户端打包配置(避免前端请求的乱套,分模块请求)

    创建服务器端的渲染器,将vue实例渲染成html

    参考网址:https://www.jb51.net/article/132424.htm

    https://segmentfault.com/a/1190000011039920

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,564
精华内容 2,625
关键字:

服务端渲染