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. Proj THUDBFuzz Paper Reading: 南京大学软件分析课程2020, 15 Soundiness

    Soundness & Soundiness Soundness: the analysis capt […]...

  2. 一个前端开发者换电脑的过程(node篇)

     当然,在我们安装了git和vscode之后,我们这个项目,在本地仍然是跑不起来的对吗?这句“npm run […]...

  3. 决策树(Decision Tree)原理

         决策树的思想在生活中很常见,其实就是根据条件去做决定,选择最符合我们自己东西,例如买房子,我们要考虑 […]...

  4. C#开发Windows服务 附简单实例实现禁止QQ运行

    本实例主要实现下面三个基本功能 1、C#开发windows服务 2、禁止QQ等程序运行 3、为windows服 […]...

  5. VMware发布最新虚拟化桌面管理软件 – Hiu

    VMware发布最新虚拟化桌面管理软件 VMware前日发布了最新软件VMware View 3,在同一产品中 […]...

  6. 初始nodeJS

    初始nodeJS 2018-08-25 21:04 by .智子, … 阅读, … 评 […]...

  7. C# 程序之间传参数,Args 接收参数的处理

           备忘,或者留给暂未接触但需要了解的人。   C#在一个进程内传参数方法那是相当多,但是涉及到程序 […]...

  8. MySQL学习笔记(一)

    一、数据库基本操作 1、创建数据库 SHOW DATABASES; #查看当前存在的数据库 CREATE DA […]...

展开目录

目录导航