Next.js 初試

Markxu 發布于2019-08-23 18:14 / 3669人閱讀

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

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 () => (
  Hello Next.js
)

開發

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 (
      
        {this.props.response}
        {this.state.num}
        
      
    )
  }
}

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

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

以下是主要部分,可以看出數據是被預先渲染好的。

獲取數據然后渲染
1

兼容性

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 了解更多

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104896.html

【2022考研最后40天】要注意這4個時間節點和這5件事情

摘要：請考生務必妥善保管個人網報用戶名密碼及準考證居民身份證等證件，避免泄露丟失造成損失。自主劃線院校會在月陸續公布初試成績基本要求。鎖定時間到達后，如招生單位未明確受理意見，鎖定解除，考生可繼續填報其他志愿。 ...

jaysun 2021-11-18 10:02 評論0 收藏0
初試Echarts (一)

摘要：是基于圖畫，可視化數據工具。如圖更多的配置可以看官方的配置項手冊，每一項都有很詳細的說明。參考本地創建了文件用于儲存數據然后異步請求。因為使用的，所以引入了一個。使用的非常好用。 Echarts.js是基于canvas 圖畫，可視化數據工具。 Echarts官方案例官網下載Echarts 然后引入官網下載Echarts.js ECharts 入門示例--柱...

liangdas 2019-08-23 11:55 評論0 收藏0
初試小刀自我簡歷小程序

摘要：附上個人簡歷小程序圖，做得怎么樣，大家可以微信掃描體驗下，多指教下。小程序開發資源匯總小程序開發框架在里面找了找，和比較火，畢竟是騰訊官方的開源，故我選擇了。 >>>點擊獲取更多文章

netmou 2019-08-23 10:48 評論0 收藏0