學習 Next.js: 獲取數據

NotFound 發布于2019-08-20 16:56 / 629人閱讀

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署為頁面獲取數據得益于路由的優點我們知道了如何創建一個具有簡介的應用程序實際上我們通常需要從遠程數

原始文檔在 https://github.com/developerw... 現在搬過來.

學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 創建動態內容
學習 Next.js: 使用路由掩碼創建干凈的URL
學習 Next.js: 干凈URL的服務器支持
學習 Next.js: 獲取數據
學習 Next.js: 部署

為頁面獲取數據

得益于 Next.js 路由API的優點, 我們知道了如何創建一個具有簡介URL的 Next.js 應用程序.

實際上, 我們通常需要從遠程數據源獲取數據. Next.js 提供了一個標準API用于為頁面獲取數據. 我們使用一個 async 函數 getInitialProps 來達到獲取數據的目的.

以此為基礎, 我們能夠給以頁面從遠程數據源獲取數據, 然后把數據穿給我們的一個頁面組件的屬性. 我們可以編寫getInitialProps函數讓他能夠同時在客戶端和服務器端運行.

在這節課中, 使用 getInitialProps, 我們將使用 TVmaze API構造一個顯示Batman TV Shows 相關信息的應用程序.

現在開始!

設置

下載需要的示例程序:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls-ssr

用下面的命令運行:

npm install
npm run dv

然后, 訪問 http://localhost:3000

獲取 Batman Shows

在我們的演示程序中, 顯示了一個博客列表, 現在我們改造演示程序以要顯示一個Batman TV shows列表.

和之前博客列表的硬編碼方式不同, 這次我們從遠程服務器獲取列表數據

這里我們使用 TVMaze API 獲取電視節目信息. 它是一個搜索電視節目信息的API.

首先, 我們需要按照 isomorphic-unfetch. 我們使用這個庫來獲取數據. 它是一個瀏覽器 fetch 的簡單實現, 并且可以同時工作在客戶端和服務器端環境中.

譯注: 這類能夠同時在客戶端和服務器運行的應用程序, 我們稱之為同構應用程序

然后, 用下面的代碼, 替換 pages/index.js 文件:

import Layout from "../components/MyLayout.js"
import Link from "next/link"
import fetch from "isomorphic-unfetch"

const Index = (props) => (
  
    Batman TV Shows
    
      {props.shows.map(({show}) => (
        
          
            {show.name}
          
        
      ))}
    
  
)

Index.getInitialProps = async function() {
  const res = await fetch("http://api.tvmaze.com/search/shows?q=batman")
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    shows: data
  }
}

export default Index

到現在, 上面的代碼一切看來都是很熟悉了, 除了 Index.getInitialProps:

Index.getInitialProps = async function() {
  const res = await fetch("http://api.tvmaze.com/search/shows?q=batman")
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    shows: data
  }
}

這是一個靜態的 async, 可以把它添加到應用程序中的任何頁面. 使用它, 我們可以獲取數據, 并且作為頁面組件的屬性使用.

如你所見, 現在, 我們要獲取 Batman TV 電視節目信息, 并且把獲取的節目信息, 作為頁面組件的 shows 屬性進行訪問.

如你所見, 上面的 getInitialProps 函數, 它打印一系列獲取到的數據到控制臺.

現在, 看一下瀏覽器的控制臺和服務器的控制臺輸出. 然后重新加載頁面.

僅服務器

本來我們預想的, 客戶端和服務器都能輸出同樣的信息, 但實際上, 在這種情況下, 輸出信息只顯示在了服務器端的控制臺上. 這是因為, 我們的頁面是在服務器端進行渲染的. 我們在服務器上已經獲取到了電視節目的數據, 沒有理由在客戶端再獲取一次.

實現信息展示頁面

現在我們要實現一個 /post 頁面來展示電視節目的詳細信息.

首先, 打開 server.js 文件, 用下面的代碼修改路由 /p/:id:

server.get("/p/:id", (req, res) => {
    const actualPage = "/post"
    const queryParams = { id: req.params.id }
    app.render(req, res, actualPage, queryParams)
})

然后, 重啟應用程序

先前, 我們映射了 title 查詢參數到頁面, 現在我們重命名為 id.

現在, 用下面的代碼替換 pages/post.js 的內容:

import Layout from "../components/MyLayout.js"
import fetch from "isomorphic-unfetch"

const Post =  (props) => (
    
       {props.show.name}
       {props.show.summary.replace(/<[/]?p>/g, "")}
       
    
)

Post.getInitialProps = async function (context) {
  const { id } = context.query
  const res = await fetch(`http://api.tvmaze.com/shows/${id}`)
  const show = await res.json()

  console.log(`Fetched show: ${show.name}`)

  return { show }
}

export default Post

我們再來看一下 getInitialProps 函數:

Post.getInitialProps = async function (context) {
  const { id } = context.query
  const res = await fetch(`http://api.tvmaze.com/shows/${id}`)
  const show = await res.json()

  console.log(`Fetched show: ${show.Title}`)

  return { show }
}

現在這個函數的第一個參數為一個 context 對象, 其中包含了我們用于獲取信息的查詢字段.

在我們這個例子中, 我們從查詢串中獲取電視節目ID, 然后通過它來從 TVMaze API 獲取數據.

在 getInitialProps函數中, 我們添加了一個 console.log 調試輸出來顯示電視節目的標題. 下面我們來驗證我們的程序是否能夠正確運行.

打開服務器和客戶端控制臺, 訪問 http://localhost:3000, 點擊第一個電視節目標題.

輸出顯示在客戶端還是服務器控制臺?

從客戶端獲取數據

這里, 我們只在客戶端的控制臺上看到了調試輸入. 這是因為我們是通過客戶端進行導航的. 因此從客戶端獲取數據是更好的方式.

如果你直接訪問Post頁面(例如: http://localhost:3000/p/975), 你將會看到調試輸出顯示在了服務器端而非客戶端.

最后

現在你學到了 Next.js 最為關鍵的特性: 通用數據獲取和服務器端渲染(SRR).

我們了解了 getInitialProps, 在大多數情況下, 就足夠了. 如果你要了解關于數據獲取的更加深入的信息, 參考data fetching 文檔.

GPU云服務器云服務器 next.js next.js 樣式 Next.js 12 正式發布、Yarn 數據獲取

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

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

學習 Next.js: 創建動態內容

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署創建動態頁面現在我們知道了如何使用多個頁面創建一個基本的應用程序為了創建頁面我們需要在磁盤上創建原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

caohaoyu 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 清潔URL的服務器支持

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署干凈的服務器支持在前面的課程中我們學習了如何為我們的應用程序創建干凈的基本上我們讓像這樣但是原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: 頁面...

Lionad-Morotar 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 使用共享組件

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署使用共享組件我們知道是和頁面相關的通過導出一個組件創建一個頁面然后把它放到目錄中基于這個文件名存原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Steve_Wang_ 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 入門

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署哪位分高的幫忙創建一個的標簽謝謝現暫時放在標簽下面了新建文章有時間限制一會全部發上來這是最近兩天原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Miracle 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 使用路由掩碼創建干凈的URL

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署使用路由掩碼創建干凈的在前面的課程中我們學到了如何使用查詢串創建動態頁面一次為基礎我們一篇博客的原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

silenceboy 2019-08-20 16:56 評論0 收藏0