js 抓取网页内容(Next.js新的通用JavaScript框架-NextTV节目)

　　js 抓取网页内容(Next.js新的通用JavaScript框架-NextTV节目)

　　Next.js 是一个新的通用 JavaScript 框架，它为 React 和基于服务器的 Web 应用程序提供了一个新的替代方案。

　　Next.js 目前是开源的，

　　现在我们知道如何创建一个相当不错的 Next.js 应用程序并获得 Next.js 路由 API 的全部好处。

　　在实践中，我们经常需要从远程数据源获取数据。Next.js 有一个标准的 API 来获取页面的数据。我们使用一个名为 getInitialProps 的异步函数来完成它。

　　通过这种方式，我们可以通过远程数据源获取给定页面的数据，并使其成为我们页面的属性。我们可以在服务器和客户端上编写 getInitialProps。因此，Next.js 可以在客户端和服务器端使用它。

　　在本课程中，我们将使用 getInitialProps 创建一个应用程序，利用公共 TVmaze 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

　　您现在可以通过导航到 :3000/ 来访问该应用程序。

　　抓住蝙蝠侠秀

　　在我们的演示应用程序中，主页上有一个博客列表文章。现在我们将展示一组蝙蝠侠的电视节目。

　　我们将从远程服务器获取这些显示，而不是对这些显示进行硬编码。

　　下面是我们使用 TVMaze API 来获取这些电视节目。

　　它是一个用于搜索电视节目信息的 API。

　　首先，我们需要安装 isomorphic-unfetch。这是我们用来获取数据的库。它是浏览器获取 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) => (

Batman TV Shows

{props.shows.map(({show}) => (

<a>{show.name}</a>

))}

)

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

}

}

　　这是一个静态异步函数，您可以将其添加到应用程序的任何页面，使用它我们可以获取数据并将它们作为页面上的属性发送。

　　如您所见，现在我们正在抓取蝙蝠侠电视节目并将它们作为“节目”属性放入我们的页面。

　　

　　Paste_Image.png

　　正如您在上面的 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)

})

　　然后重新启动应用程序以应用上述代码更改。

　　之前，我们将标题查询参数映射到页面。现在我们需要将其重命名为 id。

　　现在将 pages/post.js 替换为以下内容：

　　import Layout from '../components/MyLayout.js'

import fetch from 'isomorphic-unfetch'

const Post = (props) => (

{props.show.name}

<p>{props.show.summary.replace(//g, '')}

<img src={props.show.image.medium}/>

)

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

</p>

　　看看这个页面上的 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 }

}

　　在这种情况下，函数在上下文对象中的第一个参数。它有一个查询字段，我们可以使用它来获取信息。

　　在我们的示例中，我们从查询参数中选择节目 ID，并从 TVMaze API 获取其节目数据。

　　在这个 getInitialProps 函数中，我们添加了一个控制台。记录显示的标题。现在让我们看看它会在哪里打印。

　　打开服务器控制台和客户端控制台。

　　然后转到 Home:3000 并单击第一个蝙蝠侠表演的标题。

　　你在哪里看到上面提到的控制台。记录消息？

　　在客户端获取数据

　　在这里，我们只能在浏览器控制台中看到消息。

　　这是因为我们通过客户端导航到帖子页面。那么从客户端获取数据是最好的方法。

　　如果您只是直接访问一个帖子页面（例如 ::3000/p/975 页面），您可以在服务器上看到打印的消息，但在客户端却看不到。

　　最后

　　现在您已经了解了 Next.js 最重要的特性。使其成为一般数据获取和服务器端渲染的理想选择。

　　我们已经了解了 getInitialProps 的基础知识，它应该足以满足大多数用例。您还可以参考 Next.js 上的文档以获取更多信息。

　　本文翻译自：