node服務端渲染(完整demo)

阿新 • • 發佈：2019-01-09

簡介

nodejs搭建多頁面服務端渲染

技術點
1. koa 搭建服務
2. koa-router 建立頁面路由
3. nunjucks 模板引擎組合html
4. webpack打包多頁面
5. node端非同步請求
6. 服務端日誌列印

專案原始碼 git clone gitee.com/wjj0720/nod…

執行
- npm i
- npm start

一、現代服務端渲染的由來

服務端渲染概念：是指，瀏覽器向伺服器發出請求頁面，服務端將準備好的模板和資料組裝成完整的HTML返回給瀏覽器展示

1、前端後端分離

早在七八年前，幾乎所有網站都使用 ASP、Java、PHP做後端渲染，隨著網路的加快，客戶端效能提高以及js本身的效能提高，我們開始往客戶端增加更多的功能邏輯和互動，前端不再是簡單的html+css更多的是互動，前端頁在這是從後端分離出來「前後端正式分家」
2、客戶端渲染

隨著ajax技術的普及以及前端框架的崛起(jq、Angular、React、Vue) 框架的崛起，開始轉向了前端渲染,使用 JS 來渲染頁面大部分內容達到區域性重新整理的作用
- 優勢
  - 區域性重新整理，使用者體驗優
  - 富互動
  - 節約伺服器成本
- 缺點
  - 不利於SEO(爬蟲無法爬取ajax)請求回來的資料
  - 受瀏覽器效能限制、增加手機端的耗電
  - 首屏渲染需要等js執行才能展示資料
3、現在服務端渲染

為了解決上面客戶端渲染的缺點，然前後端分離後必不能合，如果要把前後端部門合併，拆掉的肯定是前端部門
- 現在服務端渲染的特點
  - 前端開發人員編寫html+css模板
  - node中間服務負責前端模板和後臺資料的組合
  - 資料依然由java等前服務端語言提供
- 優勢
  - 前後端分工明確
  - SEO問題解決
4、前、後端渲染相關討論參考

二、專案開始

確保你安裝node

第一步讓服務跑起來

目標: 建立node服務,通過瀏覽器訪問,返回'hello node!'(html頁面其實就是一串字串)

  /** 建立專案目錄結構如下 */
    │─ package-lock.json
    │─ package.json
    │─ README.md
    ├─bin
      │─ www.js

  // 1. 安裝依賴 npm i koa 
  // 2. 修改package.json檔案中 scripts 屬性如下
    "scripts": {
      "start": "node bin/www.js"
    }

  // 3. www.js寫入如下程式碼
    const Koa = require('koa');
    let app = new Koa();
    app.use(ctx => {
      ctx.body = 'hello node!'
    });
    app.listen(3000, () => {
      console.log('伺服器啟動 http://127.0.0.1:3000');
    });

  // 4 npm start 瀏覽器訪問 http://127.0.0.1:3000 檢視效果

複製程式碼

第二步路由的使用

目標:使用koa-router根據不同url返回不同頁面內容

依賴 npm i koa-router koa-router 更多細節請至npm檢視

  /** 新增routers資料夾   目錄結構如下 
    │─.gitignore
    │─package.json
    │─README.md
    ├─bin
    │   │─www.js
    ├─node_modules
    └─routers
        │─home.js
        │─index.js
        │─user.js 
  */
  //專案中應按照模組對路由進行劃分,示例簡單將路由劃分為首頁(/)和使用者頁(/user) 在index中將路由集中管理導, 出並在app例項後掛載到app上
複製程式碼

  /** router/home.js 檔案 */
  // 引包
  const homeRouter = require('koa-router')()
  //建立路由規則
  homeRouter.get(['/', '/index.html', '/index', '/home.html', '/home'], (ctx, next) => {
    ctx.body = 'home'
  });
  // 匯出路由備用
  module.exports = homeRouter

  /** router/user.js 檔案 */
  const userRouter = require('koa-router')()
  userRouter.get('/user', (ctx, next) => {
    ctx.body = 'user'
  });
  module.exports = userRouter

複製程式碼

  /** router/index.js 檔案 */
  // 路由集中點
  const routers = [
    require('./home.js'),
    require('./user.js')
  ]
  // 簡單封裝 
  module.exports = function (app) {
    routers.forEach(router => {
      app.use(router.routes())
    })
    return routers[0]
  }
複製程式碼

  /** www.js 檔案改寫 */
  // 引入koa
  const Koa = require('koa')
  const Routers = require('../routers/index.js')
  // 例項化koa物件
  let app = new Koa()

  // 掛載路由
  app.use((new Routers(app)).allowedMethods())

  // 監聽3000埠
  app.listen(3000, () => {
    console.log('伺服器啟動 http://127.0.0.1:3000')
  })

複製程式碼

第三步加入模板

目標: 1.使用nunjucks解析html模板返回頁面 2.瞭解koa中介軟體的使用

依賴 npm i nunjucks nunjucks中文文件

  /*
    *我向專案目錄下加入兩個準備好的html檔案 目錄結構如下
    │─.gitignore
    │─package.json
    │─README.md
    ├─bin
    │   │─www.js
    │─middlewares  //新增中介軟體目錄  
    │   ├─nunjucksMiddleware.js  //nunjucks模板中介軟體
    ├─node_modules
    │─routers
    │   │─home.js
    │   │─index.js
    │   │─user.js 
    │─views  //新增目錄 作為檢視層
        ├─home
        │   ├─home.html 
        ├─user
            ├─user.html
   */
複製程式碼

  /* nunjucksMiddleware.js 中介軟體的編寫 
    *什麼是中介軟體: 中介軟體就是在程式執行過程中增加輔助功能
    *nunjucksMiddleware作用: 給請求上下文加上render方法 將來在路由中使用 
  */
  const nunjucks = require('nunjucks')
  const path = require('path')
  const moment = require('moment')
  let nunjucksEVN = new nunjucks.Environment(new nunjucks.FileSystemLoader('views'))
  // 為nkj加入一個過濾器
  nunjucksEVN.addFilter('timeFormate',  (time, formate) => moment(time).format( formate || 'YYYY-MM-DD HH:mm:ss'))

  // 判斷檔案是否有html字尾
  let isHtmlReg = /\.html$/
  let resolvePath = (params = {}, filePath) => {
    filePath = isHtmlReg.test(filePath) ? filePath : filePath + (params.suffix || '.html')
    return path.resolve(params.path || '', filePath)
  }

  /** 
  * @description nunjucks中介軟體 新增render到請求上下文
  * @param params {}
  */
  module.exports = (params) => {
    return (ctx, next) => {
      ctx.render = (filePath, renderData = {}) => {
        ctx.type = 'text/html'
        ctx.body = nunjucksEVN.render(resolvePath(params, filePath), Object.assign({}, ctx.state, renderData))
      }
      // 中介軟體本身執行完成 需要呼叫next去執行下一步計劃
      return next()
    }
  }
複製程式碼

  /* 中介軟體掛載 www.js中增加部分程式碼 */

  // 頭部引入檔案 
  const nunjucksMiddleware = require('../middlewares/nunjucksMiddleware.js')
  //在路由之前呼叫 因為我們的中介軟體是在路由中使用的 故應該在路由前加到請求上下文ctx中
  app.use(nunjucksMiddleware({
    // 指定模板資料夾
    path: path.resolve(__dirname, '../views')
  })
複製程式碼

  /* 路由中呼叫 以routers/home.js 為例 修改程式碼如下*/
  const homeRouter = require('koa-router')()
  homeRouter.get(['/', '/index.html', '/index', '/home.html', '/home'], (ctx, next) => {
    // 渲染頁面的資料
    ctx.state.todoList = [
      {name: '吃飯', time: '2019.1.4 12:00'},
      {name: '下午茶', time: '2019.1.4 15:10'},
      {name: '下班', time: '2019.1.4 18:30'}
    ]
    // 這裡的ctx.render方法就是我們通過nunjucksMiddleware中介軟體新增的
    ctx.render('home/home', {
      title: '首頁'
    })
  })
  module.exports = homeRouter

複製程式碼

第四步抽取公共模板

目標: 抽取頁面的公用部分如導航/底部/html模板等

  /**views目錄下增加兩個資料夾_layout(公用模板) _component(公共元件) 目錄結構如下
    │─.gitignore
    │─package.json
    │─README.md
    ├─bin
    │   │─www.js  /koa服務
    │─middlewares  //中介軟體目錄  
    │   ├─nunjucksMiddleware.js  //nunjucks模板中介軟體
    ├─node_modules
    │─routers  //服務路由目錄
    │   │─home.js
    │   │─index.js
    │   │─user.js 
    │─views  //頁面檢視層
        │─_component
        │   │─nav.html (公用導航)
        │─_layout
        │   │─layout.html  (公用html框架)
        ├─home
        │   ├─home.html 
        ├─user
            ├─user.html
  */
複製程式碼

  <!-- layout.html 檔案程式碼 -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
  </head>
  <body>
    <!-- 佔位 名稱為content的block將放在此處 -->
    {% block content %}
    {% endblock %}
  </body>
  </html>


  <!-- nav.html  公用導航  -->
  <ul>
    <li><a href="/">首頁</a></li>
    <li><a href="/user">使用者頁</a></li>
  </ul>
複製程式碼

  <!-- home.html 改寫 -->
  <!-- njk繼承模板 -->
  {% extends "../_layout/layout.html" %}
  {% block content %}
    <!-- njk引入公共模組 -->
    {% include "../_component/nav.html" %}
    <h1>待辦事項</h1>
    <ul>
      <!-- 過濾器的呼叫 timeFormate即我們在中介軟體中給njk加的過濾器 -->
      {% for item in todoList %}
        <li>{{item.name}} ---> {{item.time | timeFormate}}</li>
      {% endfor %}
    </ul>
  {% endblock %}


  <!-- user.html -->
  {% extends "../_layout/layout.html" %}
  {% block content %}
    {% include "../_component/nav.html" %}
    使用者中心
  {% endblock %}

複製程式碼

第五步靜態資源處理

目標: 處理頁面js\css\img等資源引入

依賴
1. 用webpack打包靜態資源 npm i webpack webpack-cli -D
2. 處理js npm i @babel/core @babel/preset-env babel-loader -D
3. 處理less npm i css-loader less-loader less mini-css-extract-plugin -D
4. 處理檔案 npm i file-loader copy-webpack-plugin -D
5. 處理html npm i html-webpack-plugin -D
6. 清理打包檔案 npm i clean-webpack-plugin -D
相關外掛使用檢視npm相關文件

  /* 專案目錄 變更 
  │  .gitignore
  │  package.json
  │  README.md
  ├─bin
  │  www.js
  ├─config  //增加webpack配置目錄
  │  webpack.config.js
  ├─middlewares
  │  nunjucksMiddleware.js
  ├─routers
  │  home.js
  │  index.js
  │  user.js
  ├─src
  │  │─template.html  // + html模板 以此模板為每個入口生成 引入對應js的模板
  │  ├─images // +圖資源目錄
  │  │  ww.jpg
  │  ├─js // + js目錄 
  │  │  ├─home
  │  │  │   home.js
  │  │  └─user
  │  │      user.js
  │  └─less // + css目錄
  │      ├─common
  │      │   common.less
  │      │   nav.less
  │      ├─home
  │      │   home.less
  │      └─user
  │          user.less
  └─views
      ├─home
      │  home.html
      ├─user
      │  user.html
      ├─_component
      │      nav.html
      └─_layout  // webpac打包後的html模板
          ├─home
          │   home.html
          └─user
              user.html
  */
複製程式碼

  <!--  template.html 內容-->
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{title}}</title>
  </head>
  <body>
    <!-- njk模板繼承後填充 -->
    {% block content %}
    {% endblock %}
  </body>
  </html>
複製程式碼

  /* src/js/home/home.js 一個入口檔案*/
  
  import '../../less/home/home.less' //引入css
  import img from '../../images/ww.jpg' //引入圖片
  console.log(111);
  let add = (a, b) => a + b; //箭頭函式
  let a = 3, b = 4;
  let c = add(a, b);
  console.log(c);
  // 這裡只做打包演示程式碼 不具任何意義
複製程式碼

  <!-- less/home/home.less 內容 -->
  // 引入公共樣式
  @import '../common/common.less';
  @import '../common/nav.less';

  .list {
    li {
      color: rebeccapurple;
    }
  }
  .bg-img {
    width: 200px;
    height: 200px;
    background: url(../../images/ww.jpg); // 背景圖片
    margin: 10px 0;
  }
複製程式碼

  /* webpack配置  webpack.config.js */
  const path = require('path');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const CopyWebpackPlugin = require('copy-webpack-plugin');

  // 多入口
  let entry = {
    home: 'src/js/home/home.js',
    user: 'src/js/user/user.js'
  }

  module.exports = evn => ({
    mode: evn.production ? 'production' : 'development',
    // 給每個入口 path.reslove 
    entry: Object.keys(entry).reduce((obj, item) => (obj[item] = path.resolve(entry[item])) && obj, {}),
    output: {
      publicPath: '/',
      filename: 'js/[name].js',
      path: path.resolve('dist')
    },
    module: {
      rules: [
        { // bable 根據需要轉換到對應版本 
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        { // 轉換less 並交給MiniCssExtractPlug外掛提取到單獨檔案
          test: /\.less$/,
          loader: [MiniCssExtractPlugin.loader,  'css-loader', 'less-loader'],
          exclude: /node_modules/
        },
        { //將css、js引入的圖片目錄指到dist目錄下的images 保持與頁面引入的一致
          test: /\.(png|svg|jpg|gif)$/,
          use: [{
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: './images',
          }
          }]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [{
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: './font',
          }
          }]
        }
      ]
    },
    plugins: [
      // 刪除上一次打包目錄(一般來說刪除自己輸出過的目錄 )
      new CleanWebpackPlugin(['dist', 'views/_layout'], {
        // 當配置檔案與package.json不再同一目錄時候需要指定根目錄
        root: path.resolve() 
      }),
      new MiniCssExtractPlugin({
        filename: "css/[name].css",
        chunkFilename: "[id].css"
      }),
      // 將src下的圖片資源平移到dist目錄
      new CopyWebpackPlugin(
        [{
          from: path.resolve('src/images'),
          to: path.resolve('dist/images')
        }
      ]),
      // HtmlWebpackPlugin 每個入口生成一個html 並引入對應打包生產好的js
      ...Object.keys(entry).map(item => new HtmlWebpackPlugin({
        // 模組名對應入口名稱
        chunks: [item], 
        // 輸入目錄 (可自行定義 這邊輸入到views下面的_layout)
        filename: path.resolve('views/_layout/' + entry[item].split('/').slice(-2).join('/').replace('js', 'html')),
        // 基準模板
        template: path.resolve('src/template.html')
      }))
    ]
  });

  <!-- package.json中新增 -->
  "scripts": {
    "start": "node bin/www.js",
    "build": "webpack --env.production --config config/webpack.config.js"
  }

  執行 npm run build 後生成 dist views/_layout 兩個目錄
複製程式碼

  <!-- 檢視打包後生成的模板 views/_layout/home/home.html-->
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{title}}</title>
    <!-- 引入了css檔案 -->
  <link href="/css/home.css" rel="stylesheet"></head>
  <body>
    {% block content %}
    {% endblock %}
    <!-- 引入了js檔案 此時打包後的js/css在dist目錄下面 -->
  <script type="text/javascript" src="/js/home.js"></script></body>
  </html>
複製程式碼

  <!-- view/home/home.html 頁面改寫 -->
  <!-- njk繼承模板 繼承的目標來自webpack打包生成 -->
  {% extends "../_layout/home/home.html" %}
  {% block content %}
    <!-- njk引入公共模組 -->
    {% include "../_component/nav.html" %}
    <h1>待辦事項</h1>
    <ul class="list">
      <!-- 過濾器的呼叫 timeFormate即我們在中介軟體中給njk加的過濾器 -->
      {% for item in todoList %}
        <li>{{item.name}} ---> {{item.time | timeFormate}}</li>
      {% endfor %}
    </ul>
    <div class="bg-img"> 背景圖</div>
    <!-- 頁面圖片引入方式 -->
    <img src="/images/ww.jpg"/>
  {% endblock %}
複製程式碼

  /**koa處理靜態資源 
   * 依賴 npm i 'koa-static
  */

  // www.js 增加 將靜態資源目錄指向 打包後的dist目錄
  app.use(require('koa-static')(path.resolve('dist')))
複製程式碼

執行 npm run build npm start 瀏覽器訪問127.0.0.1:3000 檢視頁面 js css img 效果

第六步監聽編譯

目標: 檔案發生改實時編譯打包

依賴 npm i pm2 concurrently

  /**專案中檔案發生變動 需要重啟服務才能看到效果是一件蛋疼的事,故需要實時監聽變動 */
  <!-- 我們要監聽的有兩點 一是node服務 而是webpack打包 package.json變動如下 -->
    "scripts": {
      // concurrently 監聽同時監聽兩條命令
      "start": "concurrently \"npm run build:dev\" \"npm run server:dev\"",
      "dev": "npm start",
      // 生產環境 執行兩條命令即可 無監聽
      "product": "npm run build:pro && npm run server:pro",
      // pm2 --watch引數監聽服務的程式碼變更
      "server:dev": "pm2 start bin/www.js --watch",
      // 生產不需要用監聽
      "server:pro": "pm2 start bin/www.js",
      // webpack --watch 對打包檔案監聽
      "build:dev": "webpack --watch --env.production --config config/webpack.config.js",
      "build:pro": "webpack --env.production --config config/webpack.config.js"
    }
複製程式碼

第七步資料請求

目標: node請求介面資料填充模板

依賴 npm i node-fetch

  /*上面的程式碼中routers/home.js首頁路由中我們向頁面渲染了下面的一組資料 */
  ctx.state.todoList = [
    {name: '吃飯', time: '2019.1.4 12:00'},
    {name: '下午茶', time: '2019.1.4 15:10'},
    {name: '下班1', time: '2019.1.4 18:30'}
  ]
  /*但 資料是同步的 專案中我們必然會向java獲取其他後臺拿到渲染資料再填充頁面 我們來看看怎麼做*/
複製程式碼

    /*我們在根目錄下建立一個util的目錄作為工具庫 並簡單封裝fetch.js請求資料*/
  const nodeFetch = require('node-fetch')
  module.exports = ({url, method, data = {}}) => {
    // get請求 將引數拼到url
    url = method === 'get' || !method ? "?" + Object.keys(data).map(item => `${item}=${data[item]}`).join('&') : url;
    return nodeFetch(url, {
          method: method || 'get',
          body:  JSON.stringify(data),
          headers: { 'Content-Type': 'application/json' },
      }).then(res => res.json())
  }
複製程式碼

  /*在根目錄下建立一個service的目錄作為資料層 並建立一個exampleService.js 作為示例*/
  //引入封裝的 請求工具
  const fetch = require('../util/fetch.js')
  module.exports = {
    getTodoList (params = {}) {
      return fetch({
        url: 'https://www.easy-mock.com/mock/5c35a2a2ce7b4303bd93fbda/example/todolist',
        method: 'post',
        data: params
      })
    },
    //...
  }
複製程式碼

  /* 將請求加入到路由中 routers/home.js 改寫 */
  const homeRouter = require('koa-router')()
  let exampleService = require('../service/exampleService.js') // 引入service api
  //將路由匹配回撥 改成async函式 並在請時候 await資料回來 再呼叫render
  homeRouter.get(['/', '/index.html', '/index', '/home.html', '/home'], async (ctx, next) => {
    // 請求資料
    let todoList = await exampleService.getTodoList({name: 'ott'})
    // 替換原來的靜態資料
    ctx.state.todoList = todoList.data
    ctx.render('home/home', {
      title: '首頁'
    })
  })
  // 匯出路由備用
  module.exports = homeRouter
複製程式碼

第八步日誌列印

目標: 使程式執行可視

依賴 npm i log4js

  /* 在util目錄下建立 logger.js 程式碼如下 作簡單的logger封裝 */
  const log4js = require('log4js');
  const path = require('path')
  // 定義log config
  log4js.configure({
    appenders: { 
      // 定義兩個輸出源
      info: { type: 'file', filename: path.resolve('log/info.log') },
      error: { type: 'file', filename: path.resolve('log/error.log') }
    },
    categories: { 
      // 為info/warn/debug 型別log呼叫info輸出源   error/fatal 呼叫error輸出源
      default: { appenders: ['info'], level: 'info' },
      info: { appenders: ['info'], level: 'info' },
      warn: { appenders: ['info'], level: 'warn' },
      debug: { appenders: ['info'], level: 'debug' },
      error: { appenders: ['error'], level: 'error' },
      fatal: { appenders: ['error'], level: 'fatal' },
    }
  });
  // 匯出5種類型的 logger
  module.exports = {
    debug: (...params) => log4js.getLogger('debug').debug(...params),
    info: (...params) => log4js.getLogger('info').info(...params),
    warn: (...params) => log4js.getLogger('warn').warn(...params),
    error: (...params) => log4js.getLogger('error').error(...params),
    fatal: (...params) => log4js.getLogger('fatal').fatal(...params),
  }
複製程式碼

  /* 在fetch.js中是喲logger */
  const nodeFetch = require('node-fetch')
  const logger = require('./logger.js')

  module.exports = ({url, method, data = {}}) => {
    // 加入請求日誌
    logger.info('請求url:', url , method||'get', JSON.stringify(data))

    // get請求 將引數拼到url
    url = method === 'get' || !method ? "?" + Object.keys(data).map(item => `${item}=${data[item]}`).join('&') : url;

    return nodeFetch(url, {
      method: method || 'get',
        body:  JSON.stringify(data),
        headers: { 'Content-Type': 'application/json' },
    }).then(res => res.json())
  }

  <!-- 日誌列印 -->
  [2019-01-09T17:34:11.404] [INFO] info - 請求url: https://www.easy-mock.com/mock/5c35a2a2ce7b4303bd93fbda/example/todolist post {"name":"ott"}

複製程式碼

注: 僅共學習參考,生產配置自行斟酌!轉載請備註來源!

node服務端渲染(完整demo)

簡介 nodejs搭建多頁面服務端渲染技術點 koa 搭建服務 koa-router 建立頁面路由 nunjucks 模板引擎組合html webpack打包多頁面 node端非同步請求服務端日誌列印專案原

node服務端渲染和客戶端渲染的區別

1.客戶端渲染不利於SEO搜尋引擎優化 2.服務端渲染是可以被爬蟲抓取到的，客戶端非同步渲染是很難被爬蟲抓取到的 + 所以你會發現真正的網站既不是純非同步也不是純服務端渲染出來的 + 而是兩者結合來做的 + 例如京東的商品列表就採用的是服務端渲染，目

vue2 ssr 服務端渲染入門demo

('*', (req, res) => { const app = new Vue({ //data資料供下面的template模板渲染使用 data: { url: req.url, data: mockdata,

使用Node搭建reactSSR服務端渲染架構

狀態 nod reac ESS 初始化 ant log4 ack 文件如題；本文所講架構主要用到技術棧有：Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs, log4js, scss，echarts，a

node——10-服務端渲染和客戶端渲染的區別

客戶端渲染不利於 SEO 搜尋引擎優化服務端渲染是可以被爬蟲抓取到的，客戶端非同步渲染是很難被爬蟲抓取到的所以你會發現真正的網站既不是純非同步也不是純服務端渲染出來的而是兩者結合來做的例如京東商品列表是採用的服務端渲染，目的是為了 SEO 搜尋引擎優化而它的商品評論列表

node做服務端渲染

1、為什麼使用服務端渲染？後端提供的介面所返回的資料格式有時候太適合前端直接使用，這些處理雖可以放在前端來進行，但也許資料量一大便會浪費瀏覽器效能。因而現今，增加node端便是一種良好的解決方案。客戶端渲染路線： 1. 請求一個html 2. 服務端返回一個htm

基於 PhantomJS + Node + Express + VueJS 1.x 的服務端渲染實踐

專案地址：github.com/jrainlau/vu… 隨著Vue 2.0的釋出，服務端渲染一度成為了它的熱賣點。在此之前，單頁應用的首屏載入時長和SEO的問題，一直困擾著開發者們，也在一定程度上制約著前端框架的使用場景。React提出的服務端渲染方案，較好得解決了上述兩個痛點

前端學習 node 快速入門系列 —— 服務端渲染

>其他章節請看： > >[前端學習 node 快速入門系列][1] ## 服務端渲染在[簡易版 Apache][簡易版 Apache]一文中，我們用 node 做了一個簡單的伺服器，能提供靜態資源訪問的能力。對於真正的網站，頁面中的資料應該來自伺服器（伺服器查詢資料庫），我們來模擬

Server-Side Rendering(服務端渲染)的優點與缺點

spa 性能 ide 渲染額外優點一定的 size 壓力優點 1. SEO 客戶端渲染，頁面中只有初始的幾個html容器，js生成內容填充到容器中，爬蟲只能識別到初始的html容器，js生成的內容一般不會被識別,而服務端渲染直接給出html，爬蟲可以識別到所有內容

如何使用vue2做服務端渲染

amt linu ongl inux 渲染 poc bbu xsd mtk linux%E4%B8%8B%E8%BF%9B%E7%A8%8B%E6%8F%8F%E8%BF%B01%E8%BF%9B%E7%A8%8B%E6%8E%A7%E5%88%B6%E5%9D%97 ?

追求極致的用戶體驗ssr(基於vue的服務端渲染)

這樣的 console ports modules 為我返回意思 mage nop 首先這篇博客並不是ssr建議教程，需要ssr入門的我建議也不要搜索博客了，因為官網給出了詳細的入門步驟，只需要step by step就可以了，這篇博客的意義是如何使用ssr，可能不同的

Nuxt.js服務端渲染實踐，從開發到部署

atd 格式驗證 for replace 註冊 ear coo java 感悟經過幾個周六周日的嘗試，終於解決了服務端渲染中的常見問題，也成功說服了公司新項目采用前後端分離的解決方案，當SEO不在是問題的時候，或許才是我們搞前端的真正的春天，其中也遇到了一些小坑，Nux

基於Express 在服務端渲染React組件

ejs js模板安裝分享圖片頁面 save 3.3 這一 webp 服務端渲染React組件的思路是：在服務端先將React組件轉化成字符串，然後將字符串填充到ejs模板中，客戶端就得的了html頁面。但這還沒完，還要在客戶端render 一遍React 組件。這就

服務端渲染 SSR

log 返回都在 div gpo 服務端 post style pan 1、概述 SSR：網站內容由服務端渲染，然後返回客戶端（查看網頁源代碼，所有內容都在源代碼裏面）。 2、SSR優勢（1）SSR利於SEO。（2）SSR減少請求量和客戶端渲染時間。服務

服務端渲染

AR 異步渲染 pla 一個客戶端發送 ajax請求京東　　客戶端渲染，代碼中含有ajax請求，ajax請求回來的數據，在瀏覽器中右鍵->查看源代碼，是看不到的，檢查元素可以看到。百度爬出無法抓取ajax請求的數據，不利於seo。　　服務器渲染，在服務器上

用prerender-spa-plugin插件Vue項目優化SEO做ssr服務端渲染及預渲染

優先 plugin npm color target ins sset 對比 col 　　今天在做公交的時候沒幹，用手機看看文章，偶然發現了一個關於Vue優化seo的文章，我先是在Vue的官方文檔看了一篇關於Vue做SEO優化的文章。　　上面提到了nuxt.js這個框架，

服務端渲染實現SEO優化

　如果進行了前後端分離，那麼前端就是通過js來修改dom使得html拼接完全，然後再顯示，或者是使用SPA，這樣，seo幾乎沒有。那麼這種情況下如何做seo優化呢？　　我們可以自行提交sitemap，讓蜘蛛主動去爬取，但是遇到了sitemap中的url，達到指定頁面之後只有元js怎麼辦呢？這是

webpack 打包 node 服務端程式碼 __dirname 失效問題

具體情況配置參考官網 https://webpack.js.org/configuration/node/#node-__dirname webpack.config.server.js const serverConfig = { output: {

服務端渲染和客戶端渲染的對比

這裡結合art-template模板引擎說明。首先了解下前端頁面中如何使用art-template 1、script 標籤匯入包，當這個標籤匯入完畢後，在window全域性中就有了template 函式。 2、建立一個script標籤，內部是模板字串 <script type="te

vue服務端渲染頁面緩存和組件緩存的實例詳解

開發包本地 activit keyword adding comment 1-1 ole tput vue緩存分為頁面緩存、組建緩存、接口緩存，這裏我主要說到了頁面緩存和組建緩存頁面緩存：在server.js中設置 ? 1 2 3 4 5 6 7 8 9

node服務端渲染(完整demo)

簡介

一、 現代服務端渲染的由來

二、 專案開始

第一步 讓服務跑起來

第二步 路由的使用

第三步 加入模板

第四步 抽取公共模板

第五步 靜態資源處理

第六步 監聽編譯

第七步 資料請求

第八步 日誌列印

相關推薦

一、現代服務端渲染的由來

二、專案開始

第一步讓服務跑起來

第二步路由的使用

第三步加入模板

第四步抽取公共模板

第五步靜態資源處理

第六步監聽編譯

第七步資料請求

第八步日誌列印