Next.js 初試

---

title: next.js入門

tag：next.js, react

序章

服務端渲染

• 服務端渲染（SSR: Server Side Rendering）,html頁面由服務器渲染好，客戶端請求的是完整的html頁面。
• egg，php，jsp等都是良好的服務端渲染技術。

優勢

• seo優化。
• 優化首屏加載速度：相比加載單頁應用，只需加載當前頁面內容，不用加載大量的js。

缺點

• 線上排查bug不能用瀏覽器控制檯查看數據流動。
• 不是先後端分離的最佳實踐。

SEO

• 搜索引擎優化（SEO：Search Engine Optimization），利用搜索引擎的規則提升網站在有關搜索引擎內的天然排名。
• 爲網站提供生態式的自我營銷解決方案，讓其在行業內佔據領先地位，得到品牌收益。
• SEO包含站外SEO和站內SEO兩方面。
• 從網站結構、內容建設方案、用戶互動傳播、頁面等角度進行合理規劃，從搜索引擎得到更多的免費流量。

安裝

• 基於react，因此須要同時安裝react和react-dom

yarn next react react-dom --save

• 編寫package.json中的script字段

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

目錄結構

默認狀況下：

• 每一個.js文件是一個路由。
• ./page是服務器的渲染索引
• ./static中的文件映射到/static/路由

編寫Hello World頁面

• 編寫一個無狀態的頁面組件

// ./page/index.js

var num = 1
num ++ 
console.log(num)

function click () {
  console.log(num++)
}

export default () => (
  <div onClick={click}>Hello Next.js</div>
)

開發

yarn dev 
yarn dev -p 8080 // 指定端口號

• 運行以上hello world頁面能夠看出，num在服務端終端和瀏覽器控制檯都輸出一次，單個js文件中的全局代碼是服務端和客戶端公用的代碼，一次在全局中處理純服務器邏輯可能會出錯，反之亦然。
• 點擊div能夠打印出num，而且遞增，符合react組件邏輯。

獲取數據和組件生命週期

• 服務端渲染一個常見的業務場景：獲取數據庫（或其餘服務器）數據，數據返回後再將其插入頁面中，生成完整頁面返回給客戶端。
• 前面說過這個邏輯不能寫在全局中，由於這裏的代碼服務器和客戶端都會運行，而且這是一個異步過程，確定要在一個異步函數、或回調函數中運行的邏輯。

getInitialProps

• 頁面加載時，改方法只會在服務端執行一次。
• 該方法只有在路由切換時，客戶端的纔會被執行。
• 改方法的返回值已props注入組件，在客戶端運行時能夠獲取數據
• getInitialProps方法的參數的屬性包含：

pathname - URL 的 path 部分
query - URL 的 query 部分，並被解析成對象
asPath - 顯示在瀏覽器中的實際路徑（包含查詢部分），爲String類型
req - HTTP 請求對象 (只有服務器端有)
res - HTTP 返回對象 (只有服務器端有)
jsonPageRes - 獲取數據響應對象 (只有客戶端有)
err - 渲染過程當中的任何錯誤

import {Component} from 'react'

export default class App extends Component {
  static async getInitialProps(obj) {
    console.log(obj)
    console.log('where called')
    var fetch = (url) => {
      return new Promise((res, rej) => {
        res('獲取數據而後渲染')
      })
    }

    let response = await fetch('/static/demo.json')
    console.log(response)
    return {response}
  }

  state = {
    num: 1
  }

  add = () => {
    this.setState((state) => {
      return state.num++
    })
  }

  render () {
    return (
      <div>
        <div>{this.props.response}</div>
        <div>{this.state.num}</div>
        <button onClick={this.add}>++</button>
      </div>
    )
  }
}

• 以上代碼運行後，getInitialProps方法在服務器執行了，在服務端模擬了一次fetch請求，數據返回後渲染頁面。
• 能夠在瀏覽器右鍵選擇「查看網頁源代碼」，查看從服務器傳到客戶端初始的html頁面的內容。

如下是主要部分,能夠看出數據是被預先渲染好的。

<div>獲取數據而後渲染</div><div>1</div><button>++</button></div></div>

兼容性

Next.js 支持 IE11 和全部的現代瀏覽器使用了@babel/preset-env。爲了支持 IE11，Next.js 須要全局添加Promise的 polyfill。有時你的代碼或引入的其餘 NPM 包的部分功能現代瀏覽器不支持，則須要用 polyfills 去實現。

• polyfills默認配置加入。
• 開發環境中使用es6的新api，Set等，這些新的api是形成低版本瀏覽器沒法運行的根本緣由。
• next.js能夠做爲提升react應用性能，優化react應用首屏加載速度的解決方案，時單頁應用作seo優化成爲可能。
• next.js提供的腳手架，開發環境搭建簡單，開發有‘熱更新’加持，開發極爲舒服。
• react原本就是構建複雜應用的框架，其大量使用es6特性，兼容性原本就差，next.js不是提升react應用兼容性的解決方案。

原文連接

【完】 喜歡的歡迎 star && issue

做者簡介：葉茂，蘆葦科技web前端開發工程師，表明做品：口紅挑戰網紅小遊戲、服務端渲染官網、微信小程序粒子系統。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端領域框架、交互設計、圖像繪製、數據分析等研究。 一塊兒並肩做戰： yemao@talkmoney.cn 訪問 www.talkmoney.cn 瞭解更多