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. 数据结构的一些基本概念

    数据结构,你必须会! 数据结构之基本概念 我们不论作为计算机专业的同学还是已经工作的程序猿/媛,都绕不开数据结 […]...

  2. Ajax-javascript

     一、Web 2.0的特点   提到Ajax不得不提到WEB2.0   1、用户贡献内容   2、内容聚合RS […]...

  3. Flutter Widgets 之 InkWell 和 Ink

    Flutter Widgets 之 InkWell 和 Ink 注意:无特殊说明,Flutter版本及Dart […]...

  4. git bash字体设置

    Git工具安装完毕之后,快速启动栏目显示有Git Bash、Git CMD和Git GUI。其中,Git Ba […]...

  5. 大厂面试过程复盘(微信/阿里/头条均拿offer,附答案篇)

    背景 本人前端,3年经验,由于个人的原因,决定跳槽,于是大概3月开始找工作,总历时大概2个月,面试了微信/阿里 […]...

  6. Git + 码云(gitee)托管配置、搭建静态网站

    gitee搭建的静态网页 版本库Git安装...

  7. java环境的配置——实现win10下双击直接运行jar文件

    java环境的配置——实现win10下双击直接运行jar文件 在渗透测试的过程中很多工具的安装和使用需要jav […]...

  8. 使用K8s的一些经验和体会

    坑 Java应用程序的奇怪案例 ​ 在微服务和容器化方面,工程师倾向于避免使用 Java,这主要是由于 Jav […]...

展开目录

目录导航