七、Next.js，网络获取页面的数据
Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。
Next.js目前已经开源，https://zeit.co/blog/next
现在我们知道如何创造一个相当不错的Next.js应用程序，并获得了Next.js路由API的充分优势。
在实践中，我们通常需要从远程数据源获取数据。Next.js有一个标准的API来为页面获取数据。我们使用一个名为getInitialProps的async函数来完成它。
通过这种方式，我们可以通过远程数据源获取给定页面的数据，并将其作为我们页面的属性。我们可以在服务器和客户端上编写getInitialProps。所以,Next.js可以在客户端和服务器端都可使用它。
在这个课程中，使用getInitialProps, 我们将制作一个应用程序，它可以显示关于 Batman TV节目的信息，利用公共的 TVmaze API http://www.tvmaze.com/api。
Paste_Image.png
让我们开始吧。
安装
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls-ssr
你可以执行以下命令：
npm install
npm run dev
现在，您可以通过导航到http://localhost:3000/来访问该应用程序。
抓取Batman节目
在我们的演示应用程序中，我们在主页上有一个博客文章列表。现在我们将展示一组Batman的电视节目。
我们将从远程服务器获取这些显示，而不是硬编码这些显示。
下面是我们使用 TVMaze API来获取这些电视节目。
它是一个搜索电视节目信息的API。
首先，我们需要安装 isomorphic-unfetch。这是我们用来获取数据的库。它是一个简单的浏览器 fetch API的实现，但是在客户端和服务器环境中都可以实现。
npm install --save isomorphic-unfetch
然后替换我们的 pages/index.js 用以下内容:
import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'
const Index = (props) => (
<Layout>
<h1>Batman TV Shows</h1>
<ul>
{props.shows.map(({show}) => (
<li key={show.id}>
<Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
<a>{show.name}</a>
</Link>
</li>
))}
</ul>
</Layout>
)
Index.getInitialProps = async function() {
const res = await fetch('https://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('https://api.tvmaze.com/search/shows?q=batman')
const data = await res.json()
console.log(`Show data fetched. Count: ${data.length}`)
return {
shows: data
}
}
这是一个静态的异步函数，你可以把它添加到你的应用程序的任何一个页面，使用它，我们可以获取数据并将它们作为我们页面的属性来发送。
正如你所看到的，现在我们正在抓取Batman电视节目，并将它们作为“shows”属性进入我们的页面。
Paste_Image.png
正如您在上面的getInitialProps函数中所看到的，它将数据的数量输出到控制台中。
现在，看一下浏览器控制台和服务器控制台。
然后重新加载页面。
在重新加载页面之后，您在哪里看到了上面的消息?
只在服务器上
在这种情况下，消息只在服务器上打印。
这是因为我们在服务器上渲染页面。
所以，我们已经有了数据，我们没有理由在客户端再次取回数据。
实现 Post 页面
现在，让我们尝试实现“/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)
})
然后重新启动应用程序，以应用上述代码更改。
早些时候，我们将标题查询param映射到页面。现在我们需要将它重命名为id。
现在更换 pages/post.js,内容如下:
import Layout from '../components/MyLayout.js'
import fetch from 'isomorphic-unfetch'
const Post = (props) => (
<Layout>
<h1>{props.show.name}</h1>
<p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>
<img src={props.show.image.medium}/>
</Layout>
)
Post.getInitialProps = async function (context) {
const { id } = context.query
const res = await fetch(`https://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(`https://api.tvmaze.com/shows/${id}`)
const show = await res.json()
console.log(`Fetched show: ${show.name}`)
return { show }
}
在这个条件下，这个函数在上下文对象中的第一个参数。它有一个query字段，我们可以用它来获取信息。
在我们的示例中，我们从查询params中选择show ID，并从TVMaze API获取它的节目数据。
在这个 getInitialProps 函数中，我们添加了一个控制台。记录显示的标题。现在我们来看看它将在哪里打印。
打开服务器控制台和客户端控制台。
然后访问主页 http://localhost:3000，并点击第一个Batman 节目 的标题。
在哪些地方你看到了上面提到的控制台。日志消息吗?
在客户端获取数据
在这里，我们只能在浏览器控制台中看到消息。
这是因为我们通过客户端导航到post页面。然后从客户端获取数据是最好的方法。
如果你只是访问一个帖子页面直接(如:http://localhost:3000/p/975页)你可以看到服务器上的消息打印而不是在客户端。
最后
现在你已经学到了Next.js最重要的特征。使它成为通用数据获取和服务器端渲染的理想选择。
我们已经了解了getInitialProps 的基本知识，这对于大多数用例来说已经足够了。你也可以参考Next.js关于data fetching 的文档，以获取更多的信息。
本文翻译自：https://learnnextjs.com/basics/fetching-data-for-pages
