摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署為頁面獲取數(shù)據(jù)得益于路由的優(yōu)點我們知道了如何創(chuàng)建一個具有簡介的應(yīng)用程序?qū)嶋H上我們通常需要從遠程數(shù)
為頁面獲取數(shù)據(jù)原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.
學(xué)習(xí) Next.js: 入門
學(xué)習(xí) Next.js: 頁面之間的導(dǎo)航
學(xué)習(xí) Next.js: 使用共享組件
學(xué)習(xí) Next.js: 創(chuàng)建動態(tài)內(nèi)容
學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學(xué)習(xí) Next.js: 干凈URL的服務(wù)器支持
學(xué)習(xí) Next.js: 獲取數(shù)據(jù)
學(xué)習(xí) Next.js: 部署
得益于 Next.js 路由API的優(yōu)點, 我們知道了如何創(chuàng)建一個具有簡介URL的 Next.js 應(yīng)用程序.
實際上, 我們通常需要從遠程數(shù)據(jù)源獲取數(shù)據(jù). Next.js 提供了一個標準API用于為頁面獲取數(shù)據(jù). 我們使用一個 async 函數(shù) getInitialProps 來達到獲取數(shù)據(jù)的目的.
以此為基礎(chǔ), 我們能夠給以頁面從遠程數(shù)據(jù)源獲取數(shù)據(jù), 然后把數(shù)據(jù)穿給我們的一個頁面組件的屬性. 我們可以編寫getInitialProps函數(shù)讓他能夠同時在客戶端和服務(wù)器端運行.
在這節(jié)課中, 使用 getInitialProps, 我們將使用 TVmaze API構(gòu)造一個顯示Batman TV Shows 相關(guān)信息的應(yīng)用程序.
現(xiàn)在開始!
設(shè)置下載需要的示例程序:
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在我們的演示程序中, 顯示了一個博客列表, 現(xiàn)在我們改造演示程序以要顯示一個Batman TV shows列表.
和之前博客列表的硬編碼方式不同, 這次我們從遠程服務(wù)器獲取列表數(shù)據(jù)
這里我們使用 TVMaze API 獲取電視節(jié)目信息. 它是一個搜索電視節(jié)目信息的API.
首先, 我們需要按照 isomorphic-unfetch. 我們使用這個庫來獲取數(shù)據(jù). 它是一個瀏覽器 fetch 的簡單實現(xiàn), 并且可以同時工作在客戶端和服務(wù)器端環(huán)境中.
譯注: 這類能夠同時在客戶端和服務(wù)器運行的應(yīng)用程序, 我們稱之為同構(gòu)應(yīng)用程序
然后, 用下面的代碼, 替換 pages/index.js 文件:
import Layout from "../components/MyLayout.js" import Link from "next/link" import fetch from "isomorphic-unfetch" const Index = (props) => () 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 Batman TV Shows
{props.shows.map(({show}) => (
- {show.name}
))}
到現(xiàn)在, 上面的代碼一切看來都是很熟悉了, 除了 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 } }
這是一個靜態(tài)的 async, 可以把它添加到應(yīng)用程序中的任何頁面. 使用它, 我們可以獲取數(shù)據(jù), 并且作為頁面組件的屬性使用.
如你所見, 現(xiàn)在, 我們要獲取 Batman TV 電視節(jié)目信息, 并且把獲取的節(jié)目信息, 作為頁面組件的 shows 屬性進行訪問.
如你所見, 上面的 getInitialProps 函數(shù), 它打印一系列獲取到的數(shù)據(jù)到控制臺.
現(xiàn)在, 看一下瀏覽器的控制臺和服務(wù)器的控制臺輸出. 然后重新加載頁面.
僅服務(wù)器本來我們預(yù)想的, 客戶端和服務(wù)器都能輸出同樣的信息, 但實際上, 在這種情況下, 輸出信息只顯示在了服務(wù)器端的控制臺上. 這是因為, 我們的頁面是在服務(wù)器端進行渲染的. 我們在服務(wù)器上已經(jīng)獲取到了電視節(jié)目的數(shù)據(jù), 沒有理由在客戶端再獲取一次.
實現(xiàn)信息展示頁面現(xiàn)在我們要實現(xiàn)一個 /post 頁面來展示電視節(jié)目的詳細信息.
首先, 打開 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) })
然后, 重啟應(yīng)用程序
先前, 我們映射了 title 查詢參數(shù)到頁面, 現(xiàn)在我們重命名為 id.
現(xiàn)在, 用下面的代碼替換 pages/post.js 的內(nèi)容:
import Layout from "../components/MyLayout.js" import fetch from "isomorphic-unfetch" const Post = (props) => () 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 {props.show.name}
{props.show.summary.replace(/<[/]?p>/g, "")}
我們再來看一下 getInitialProps 函數(shù):
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 } }
現(xiàn)在這個函數(shù)的第一個參數(shù)為一個 context 對象, 其中包含了我們用于獲取信息的查詢字段.
在我們這個例子中, 我們從查詢串中獲取電視節(jié)目ID, 然后通過它來從 TVMaze API 獲取數(shù)據(jù).
在 getInitialProps函數(shù)中, 我們添加了一個 console.log 調(diào)試輸出來顯示電視節(jié)目的標題. 下面我們來驗證我們的程序是否能夠正確運行.
打開服務(wù)器和客戶端控制臺, 訪問 http://localhost:3000, 點擊第一個電視節(jié)目標題.
輸出顯示在客戶端還是服務(wù)器控制臺?
從客戶端獲取數(shù)據(jù)這里, 我們只在客戶端的控制臺上看到了調(diào)試輸入. 這是因為我們是通過客戶端進行導(dǎo)航的. 因此從客戶端獲取數(shù)據(jù)是更好的方式.
如果你直接訪問Post頁面(例如: http://localhost:3000/p/975), 你將會看到調(diào)試輸出顯示在了服務(wù)器端而非客戶端.
最后現(xiàn)在你學(xué)到了 Next.js 最為關(guān)鍵的特性: 通用數(shù)據(jù)獲取和服務(wù)器端渲染(SRR).
我們了解了 getInitialProps, 在大多數(shù)情況下, 就足夠了. 如果你要了解關(guān)于數(shù)據(jù)獲取的更加深入的信息, 參考data fetching 文檔.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83269.html
摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署創(chuàng)建動態(tài)頁面現(xiàn)在我們知道了如何使用多個頁面創(chuàng)建一個基本的應(yīng)用程序為了創(chuàng)建頁面我們需要在磁盤上創(chuàng)建 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...
摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署干凈的服務(wù)器支持在前面的課程中我們學(xué)習(xí)了如何為我們的應(yīng)用程序創(chuàng)建干凈的基本上我們讓像這樣但是 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: 頁面...
摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署使用共享組件我們知道是和頁面相關(guān)的通過導(dǎo)出一個組件創(chuàng)建一個頁面然后把它放到目錄中基于這個文件名存 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...
摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署哪位分高的幫忙創(chuàng)建一個的標簽謝謝現(xiàn)暫時放在標簽下面了新建文章有時間限制一會全部發(fā)上來這是最近兩天 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...
摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署使用路由掩碼創(chuàng)建干凈的在前面的課程中我們學(xué)到了如何使用查詢串創(chuàng)建動態(tài)頁面一次為基礎(chǔ)我們一篇博客的 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...
閱讀 3500·2021-11-18 10:07
閱讀 1595·2021-11-04 16:08
閱讀 1522·2021-11-02 14:43
閱讀 1098·2021-10-09 09:59
閱讀 852·2021-09-08 10:43
閱讀 1087·2021-09-07 09:59
閱讀 975·2019-12-27 11:56
閱讀 1027·2019-08-30 15:56