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