摘要：原文鏈接完喜歡的歡迎作者簡介葉茂，蘆葦科技前端開發(fā)工程師，代表作品口紅挑戰(zhàn)網(wǎng)紅小游戲服務(wù)端渲染官網(wǎng)微信小程序粒子系統(tǒng)。擅長網(wǎng)站建設(shè)公眾號開發(fā)微信小程序開發(fā)小游戲公眾號開發(fā)，專注于前端領(lǐng)域框架交互設(shè)計圖像繪制數(shù)據(jù)分析等研究。

title: next.js入門

服務(wù)端渲染（SSR: Server Side Rendering）,html頁面由服務(wù)器渲染好，客戶端請求的是完整的html頁面。

egg，php，jsp等都是良好的服務(wù)端渲染技術(shù)。

優(yōu)點

seo優(yōu)化。

優(yōu)化首屏加載速度：相比加載單頁應(yīng)用，只需加載當(dāng)前頁面內(nèi)容，不用加載大量的js。

缺點

線上排查bug不能用瀏覽器控制臺查看數(shù)據(jù)流動。

不是前后端分離的最佳實踐。

搜索引擎優(yōu)化（SEO：Search Engine Optimization），利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名。

為網(wǎng)站提供生態(tài)式的自我營銷解決方案，讓其在行業(yè)內(nèi)占據(jù)領(lǐng)先地位，獲得品牌收益。

SEO包含站外SEO和站內(nèi)SEO兩方面。

從網(wǎng)站結(jié)構(gòu)、內(nèi)容建設(shè)方案、用戶互動傳播、頁面等角度進行合理規(guī)劃，從搜索引擎獲得更多的免費流量。

基于react，所以需要同時安裝react和react-dom

yarn next react react-dom --save

編寫package.json中的script字段

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

默認(rèn)情況下：

每個.js文件是一個路由。

./page是服務(wù)器的渲染索引

./static中的文件映射到/static/路由

編寫一個無狀態(tài)的頁面組件

// ./page/index.js

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

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

export default () => (
  
Hello Next.js
)

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

運行以上hello world頁面可以看出，num在服務(wù)端終端和瀏覽器控制臺都輸出一次，單個js文件中的全局代碼是服務(wù)端和客戶端公用的代碼，一次在全局中處理純服務(wù)器邏輯可能會出錯，反之亦然。

點擊div可以打印出num，并且遞增，符合react組件邏輯。

服務(wù)端渲染一個常見的業(yè)務(wù)場景：獲取數(shù)據(jù)庫（或其他服務(wù)器）數(shù)據(jù)，數(shù)據(jù)返回后再將其插入頁面中，生成完整頁面返回給客戶端。

前面說過這個邏輯不能寫在全局中，因為這里的代碼服務(wù)器和客戶端都會運行，并且這是一個異步過程，肯定要在一個異步函數(shù)、或回調(diào)函數(shù)中運行的邏輯。

頁面加載時，改方法只會在服務(wù)端執(zhí)行一次。

該方法只有在路由切換時，客戶端的才會被執(zhí)行。

改方法的返回值已props注入組件，在客戶端運行時可以獲取數(shù)據(jù)

getInitialProps方法的參數(shù)的屬性包含：

pathname - URL 的 path 部分
query - URL 的 query 部分，并被解析成對象
asPath - 顯示在瀏覽器中的實際路徑（包含查詢部分），為String類型
req - HTTP 請求對象 (只有服務(wù)器端有)
res - HTTP 返回對象 (只有服務(wù)器端有)
jsonPageRes - 獲取數(shù)據(jù)響應(yīng)對象 (只有客戶端有)
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("獲取數(shù)據(jù)然后渲染")
      })
    }

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

  state = {
    num: 1
  }

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

  render () {
    return (
      

        
{this.props.response}
        
{this.state.num}
        ++
      
    )
  }
}

以上代碼運行后，getInitialProps方法在服務(wù)器執(zhí)行了，在服務(wù)端模擬了一次fetch請求，數(shù)據(jù)返回后渲染頁面。

可以在瀏覽器右鍵選擇“查看網(wǎng)頁源代碼”，查看從服務(wù)器傳到客戶端初始的html頁面的內(nèi)容。

以下是主要部分,可以看出數(shù)據(jù)是被預(yù)先渲染好的。

獲取數(shù)據(jù)然后渲染
1
++