ssr/服务渲染nuxt

znLam 2021-09-03 原文


ssr/服务渲染nuxt


1.传统web开发:网页内容再服务端渲染完成,一次性传输到浏览器(php,javaweb,pythonweb) [ 客户端发送url请求,服务端查询数据库,拼接html字符串,返回html,前端再渲染html ]

练习 安装express: npm i express -S

//01-tradition.js
const express = require(\'express\');
const app = express();

app.get(\'/\',function(req,res){
    res.send(`
        <html>
            <body>
                <div id="app">
                    <h1>开课吧</h1>
                    <p class="demo">开课吧还不错</p>
                </div>
            </body>
        </html>
    `)
})

app.listen(3000,()=>{
    console.log(\'启动成功\')
})
//node 01-tradition.js启动
//就会将此代码发到前端

2.单页面应用(SPA): 页面内容由JS渲染出来,这种方式称为客户端渲染 [ 只给html壳和json数据 ] 

 

 跟传统的web渲染相比:

  • SEO(Search Engine Optimization 搜索引擎优化)不友好 [SEO解释: https://blog.csdn.net/kang_k/article/details/100514042]
  • 首屏加载时间相对过长

3.服务端渲染 Server Side Render (SSR)

SSR解决方案,后端渲染出完整的首屏的dom结构返回,前端拿到的内容包括首屏及完整spa结构,应用激活后依然按照spa方式运行,这种页面渲染方式被称为服务端渲染 (server side render)

 

 SSR是一种这种方案:利用vue语法编写程序,还能再服务端渲染html内容

 1) 新建vue-cli3工程: vue create ssr

 2) 安装依赖: npm install vue-server-renderer express -D (node server安哪个都可)

 3) 安装路由: npm i vue-router -s

发表于
2020-07-14 18:55 
znLam 
阅读(32
评论(0
编辑 
收藏 
举报

 

版权声明:本文为znLam原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/znLam/p/13300895.html

ssr/服务渲染nuxt的更多相关文章

随机推荐

  1. OpenCV (C++) 几何形状识别(面积过滤、横纵比过滤等等)

    1 #include <opencv2/opencv.hpp> 2 #include <io […]...

  2. 探索ADC的原理(自制3位并行比较型ADC)

    追溯模数转换器的历史,阐释其工作原理、种类,并对其未来发展做出预测。最后,回到1970年,自制3-bit、40 […]...

  3. 突然地心血来潮,为 MaixPy( k210 micropython ) 添加看门狗(WDT) C 模块的开发过程记录,给后来的人做开发参考。

    事情是前几天群里有人说做个看门狗不难吧,5分钟的事情,然后我就怼了几句,后来才发现,原来真的没有看门狗模块鸭。 […]...

  4. Mybatis【8】– Mybatis返回List或者Map以及模糊查询怎么搞?

    使用mybatis的时候,经常发现一个需求,我怎么知道自己是不是增加/修改/删除数据成功了? 好像执行sql之 […]...

  5. SpringBoot缓存管理(二) 整合Redis缓存实现

    SpringBoot支持的缓存组件 在SpringBoot中,数据的缓存管理存储依赖于Spring框架中cac […]...

  6. 建造者模式和工厂模式的区别

    它们目的都是创建一个复杂的对象 工厂模式注重的是整体对象的创建方法,而建造者模式注重的是对象的创建过程,创建对 […]...

  7. 精选互联网运营必读的 8 本书籍

    运营书籍推荐~ 文末有小福利 关于互联网运营相关的书籍可谓层出不穷,但是资源贵精不贵多,在这里,小编在给各位推 […]...

  8. 多线程二(线程通信)

    线程通信 一. 传统的线程通信 Object类提供了三个方法由同步监视器调用。分为两种情况 对于使用synch […]...

展开目录

目录导航