美文网首页
一个简单的服务器渲染(ssr)的例子

一个简单的服务器渲染(ssr)的例子

作者: 好名字都让你们用了 | 来源:发表于2019-08-28 17:03 被阅读0次

一个简单的服务器渲染(ssr)的例子

  1. 创建一个 Vue 实例
  2. 创建一个 renderer
  3. 将 Vue 实例渲染为 HTML
const Vue = require('vue')
module.exports = async ctx => {
    // 第 1 步:创建一个 Vue 实例
    const app = new Vue({
        data: {
            list: [
                {path: '/login',name: '登陆'},
                {path: '/logout',name: '登出'},
                {path: '/list',name: '购物车列表'},
            ]
        },
        template: 
        `<ol>
        <li v-for="(item,index) in list" :key="index"><a :href="item.path">{{item.name}} {{item.path}} </a></li>
        </ol>`
    })
    // 第 2 步:创建一个 renderer
    const renderer = require('vue-server-renderer').createRenderer()
    // 将 Vue 实例渲染为 HTML
    let result = await renderer.renderToString(app);
    // 给前端输出html
    ctx.body = result;
}

相关文章

  • 一个简单的服务器渲染(ssr)的例子

    一个简单的服务器渲染(ssr)的例子 创建一个 Vue 实例 创建一个 renderer 将 Vue 实例渲染为 ...

  • 本期小结(二)

    vue★ vue-ssr服务端渲染简单例子 vue-ssr服务端渲染框架Nuxt.js vue2.0仿饿了么web...

  • 服务器渲染(SSR)

    概述 服务器渲染 (Server Side Render) SSR是什么?简单理解就是,服务器返回浏览器的是一个包...

  • 搭建Vue的SSR服务端渲染

    SSR是什么 SSR:Server Side Rendering服务端渲染,由服务器进行渲染并返回给客户端渲染完成...

  • 关于 SAP 电商云 Spartacus UI Transfer

    Angular 的 TransferState 类使服务器端渲染 (SSR) 和预渲染 (Prerendered-...

  • SSR服务端渲染

    什么是SSR?,SSR有什么用? 服务端渲染(Server Side Render,简称“SSR”),服务器端直接...

  • SSR的原理及好处

    什么是SSR SSR是Server Side Render简称,叫服务端渲染 在客户端请求服务器的时候,服务器到数...

  • SSR、CSR、

    1.什么是SSR和CSR  SSR(Server Side Rendering,服务端渲染),指的是页面在服务器...

  • 服务端渲染

    服务器端渲染(SSR) 学前准备 ES6 Node Vue 什么是服务器端渲染 前端渲染:html页面作为静态文件...

  • SPA客户端渲染和SSR服务器渲染

    SPA客户端渲染和SSR服务器渲染 一、SPA 所谓SPA(single page application)就是我...

网友评论

      本文标题:一个简单的服务器渲染(ssr)的例子

      本文链接:https://www.haomeiwen.com/subject/tpdmectx.html