Javascript 如何从`getStaticProps'向API路由发出请求`

我想在网站上显示YouTube频道的最新视频。该频道每天最多上载一次，因此我将API路由的响应缓存一天（86400秒）在我的：

{
“标题”：[
{
“来源”：“/（.*）”，
“标题”：[
{
“密钥”：“访问控制允许来源”，
“值”：“*”
},
{
“密钥”：“缓存控制”，
“值”：“s-maxage=86400”
}
]
}
]
}

我想使用，这样我的API路由每天最多只发送一次请求，但我不确定如何将请求写入我的API路由

委员会：

注意：您不应该在getStaticProps中使用fetch（）调用API路由。相反，直接导入API路由中使用的逻辑。对于这种方法，您可能需要稍微重构代码

从外部API获取是可以的

这是什么意思？我目前写请求的方法是否错误

// /pages/index.js

import Header from '../components/header/header'
import MainContent from '../components/main-content/main-content'
import Footer from '../components/footer/footer'

export default function Index({ videoTitle, videoURL, videoThumbnailData }) {
    return (
        <>
            <Header />

            <MainContent
                videoTitle={videoTitle}
                videoURL={videoURL}
                videoThumbnailData={videoThumbnailData}
            />

            <Footer />
        </>
    )
}

// Called at build time, and response revalidated after 1 day (86400 seconds)
// since internal API response is cached on Vercel Edge network for 1 day (see /pages/api/get-latest-video.js)
export async function getStaticProps() {
    // Fetch YouTube videos from internal API route /pages/api/get-latest-video.js
    const res = await fetch(`${process.env.API_ROUTES_URL}/api/get-latest-video`)
    const data = await res.json()

    // Returned as props to page
    return {
        props: {
            videoTitle: data.videoTitle,
            videoURL: data.videoURL,
            videoThumbnailData: data.videoThumbnailData
        },
        revalidate: 86400
    }
}

///pages/index.js
从“../components/Header/Header”导入标题
从“../components/main content/main content”导入MainContent
从“../components/Footer/Footer”导入页脚
导出默认函数索引（{videoTitle、videoURL、videoThumbnailData}）{
返回(
)
}
//在构建时调用，响应在1天后重新验证（86400秒）
//由于内部API响应在Vercel Edge网络上缓存了1天（请参阅/pages/API/get latest video.js）
导出异步函数getStaticProps（）{
//从内部API路径/pages/API/get-latest-video.js获取YouTube视频
const res=wait fetch（`${process.env.API\u ROUTES\u URL}/API/get latest video`）
const data=await res.json（）
//作为道具返回到页面
返回{
道具：{
videoTitle:data.videoTitle，
videoURL:data.videoURL，
videoThumbnailData:data.videoThumbnailData
},
重新验证日期：86400
}
}

///components/main-content/main-content.js
从“./节”导入节
从“下一个/图像”导入图像
导出默认函数MainContent（{videoTitle，videoURL，videoThumbnailData}）{
返回(
)
}

这意味着您只需将api函数导入getStaticProps，而不必使用Fetch

// /pages/index.js

import Header from "../components/header/header";
import MainContent from "../components/main-content/main-content";
import Footer from "../components/footer/footer";

export default function Index({ videoTitle, videoURL, videoThumbnailData }) {
  return (
    <>
      <Header />

      <MainContent
        videoTitle={videoTitle}
        videoURL={videoURL}
        videoThumbnailData={videoThumbnailData}
      />

      <Footer />
    </>
  );
}

// Called at build time, and response revalidated after 1 day (86400 seconds)
// since internal API response is cached on Vercel Edge network for 1 day (see /pages/api/get-latest-video.js)
export async function getStaticProps() {
  // Fetch YouTube videos from internal API route /pages/api/get-latest-video.js
  const res = await getApiData(); // import your api function here
  const data = await res.json();

  // Returned as props to page
  return {
    props: {
      videoTitle: data.videoTitle,
      videoURL: data.videoURL,
      videoThumbnailData: data.videoThumbnailData,
    },
    revalidate: 86400,
  };
}

///pages/index.js
从“./组件/标题/标题”导入标题；
从“./组件/主要内容/主要内容”导入主要内容；
从“./components/Footer/Footer”导入页脚；
导出默认函数索引（{videoTitle、videoURL、videoThumbnailData}）{
返回(
);
}
//在构建时调用，响应在1天后重新验证（86400秒）
//由于内部API响应在Vercel Edge网络上缓存了1天（请参阅/pages/API/get latest video.js）
导出异步函数getStaticProps（）{
//从内部API路径/pages/API/get-latest-video.js获取YouTube视频
const res=await getApiData（）；//在此处导入api函数
const data=wait res.json（）；
//作为道具返回到页面
返回{
道具：{
videoTitle:data.videoTitle，
videoURL:data.videoURL，
videoThumbnailData:data.videoThumbnailData，
},
重新验证日期：86400，
};
}

您的请求

/api/get latest video

应该从浏览器发送到服务器，然后服务器可能有某种路由处理程序，如：

routeMatches('/api/get-latest-video', ( req, res )=>{
    requestDB('latestVideos').then( latestVideos => {
        respondWithLatestVideos( req, res, latestVideos );
    })
});

现在，

getStaticProps

在服务器端运行。因此，您可以直接在

getStaticProps

中请求数据库，而不是向请求数据库的服务器发送请求

export async function getStaticProps() {
    // Fetch YouTube videos from internal API route /pages/api/get-latest-video.js
    // const res = await fetch(`${process.env.API_ROUTES_URL}/api/get-latest-video`)
    // const data = await res.json()
    const data = await requestDB('latestVideos')
    ...
}

在同一个NextJs文档页面的下方，有一个略为详细的注释“”：

请注意，

getStaticProps

仅在服务器端运行。它永远不会在客户端运行。它甚至不会包含在浏览器的JS包中。这意味着您可以编写诸如直接数据库查询之类的代码，而无需将它们发送到浏览器。您不应该从

getStaticProps

获取API路由——相反，您可以直接在

getStaticProps

中编写服务器端代码

---

这意味着，与其调用内部API路由，不如直接将逻辑导入

getStaticProps

函数。检查这个答案，它提到了

getServerSideProps

，但原理是一样的。

export async function getStaticProps() {
    // Fetch YouTube videos from internal API route /pages/api/get-latest-video.js
    // const res = await fetch(`${process.env.API_ROUTES_URL}/api/get-latest-video`)
    // const data = await res.json()
    const data = await requestDB('latestVideos')
    ...
}