原始文档位于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，使用TVmazeAPI构建一个显示有关蝙蝠侠电视节目信息的应用程序。现在开始！设置下载所需的示例程序：gitclonehttps://github。com/arunoda/learnnextjs-demo.gitcdlearnnextjs-demogitcheckoutclean-urls-ssr使用以下命令运行：npminstallnpmrundv然后，访问http://localhost:3000获取BatmanShows在我们的演示程序中，它显示博客列表，现在我们修改演示程序以显示蝙蝠侠电视节目列表。与之前硬编码的博客列表不同，这次我们从远程服务器获取列表数据。这里我们使用TVMazeAPI来获取电视节目信息。它是一个用于搜索电视节目信息的API。首先，我们需要遵循isomorphic-unfetch。我们使用这个库来获取数据。它是浏览器获取的简单实现，可以在客户端和服务器环境中工作。注释：这个类能够同时运行客户端和服务器应用程序，我们称之为同构应用然后，用以下代码替换pages/index.js文件：importLayoutfrom'../components/MyLayout.js'importLinkfrom'next/link'importfetchfrom'isomorphic-unfetch'props)=>(蝙蝠侠电视节目
)Index.getInitialProps=asyncfunction(){constres=awaitfetch('http://api.tvmaze.com/search/shows?q=batman')常量数据=awaitres.json()console.log(`Showdatafetched.Count:${data.length}`)return{shows:data}}exportdefaultIndex到现在为止，上面的代码一切似乎都很熟悉,除了Index.getInitialProps:Index.getInitialProps=asyncfunction(){constres=awaitfetch('http://api.tvmaze.com/search/shows?q=batman')constdata=awaitres.json()console.log(`Showdatafetched.Count:${data.length}`)return{shows:data}}这是一个静态异步，可以添加到应用程序中的任何页面。要使用它，我们可以获取数据并将其用作页面组件的属性。如您所见，现在，我们要获取蝙蝠侠电视的电视节目信息，并将获取的节目信息作为页面组件的shows属性进行访问。可以看到，上面的getInitialProps函数，将获取到的一系列数据打印到控制台。现在，查看浏览器的控制台输出和服务器的控制台。然后重新加载页面。只有服务端才是我们所期望的，客户端和服务端都可以输出相同的信息，但实际上，在这种情况下，输出的信息只是显示在服务端的控制台上。这是因为我们的页面是在服务器端呈现的。我们已经获取了客户端没有理由再次获取电视节目的数据。实现信息显示页面现在我们需要实现一个/post页面来显示电视节目的详细信息。首先打开server.js文件，修改路由/p为如下代码/:id:server.get('/p/:id',(req,res)=>{constactualPage='/post'constqueryParams={id:req.params.id}app.render(req,res,actualPage,queryParams)})然后，重启应用程序。之前我们将title查询参数映射到页面，现在改名为id。现在，用以下代码替换pages/post.js的内容：importLayoutfrom'../components/MyLayout.js'importfetchfrom'isomorphic-unfetch'constPost=(props)=>({props.show.name}
{props.show.总结.replace(/<[/]?p>/g,'')}
)Post.getInitialProps=异步函数（上下文）{const{id}=context.queryconstres=awaitfetch(`http://api.tvmaze.com/shows/${id}`)constshow=awaitres.json()console.log(`Fetchedshow:${show.name}`)return{show}}exportdefaultPost让我们再看看getInitialProps函数：Post.getInitialProps=asyncfunction(context){const{id}=context.queryconstres=awaitfetch(`http://api.tvmaze.com/shows/${id}`)constshow=awaitres.json()console.log(`Fetchedshow:${show.Title}`)return{show}}现在这个函数的第一个参数是一个上下文对象，里面包含了我们用来获取信息的查询字段。在我们的示例中，我们从查询字符串中获取电视节目ID，然后使用它从TVMazeAPI中获取数据。在getInitialProps函数中，我们添加了一个console.log调试输出来显示电视节目的标题。接下来我们来验证一下我们的程序是否可以正常运行。打开服务器和客户端控制台，访问http://localhost:3000，点击ATVshowtitle。输出显示在客户端还是服务器控制台上？从客户端获取数据在这里，我们只能在客户端的控制台上看到调试输入。这是因为我们正在通过客户端进行导航。所以从客户端获取数据是一种比较好的方式。如果直接访问帖子页面（例如：http://localhost:3000/p/975)，您将看到调试输出显示在服务器端而不是客户端。现在您终于了解了Next.js最关键的功能：通用数据获取和服务器端呈现(SRR)。我们了解了getInitialProps，这对大多数情况来说已经足够了。如果您需要有关数据获取的更多深入信息，请参阅数据获取文档。
