我有下一個帶有一些離線靜態資料的 js 專案（如頁面內容）
我應該在我的專案中使用 getStaticProps 嗎？
資料存盤在陣列中以供以后使用 .map
例如
import { data } from '../data/homepage/content';
const Home: NextPage = () => {
return (
<>
<Carousel />
{data.map((data, index) => (
<TwoColumnsBlueWhite
title={data.title}
subTitle={data.subTitle}
content={data.content}
links={data.links}
imageSide={data.imageSide}
/>
))}
</>
);
};
如果我不希望將來從資料庫中獲取一些資料。我應該使用 getStaticProps 進行 SEO 嗎？或者它只是為了獲取資料庫資料。
import { data } from '../../../data/homepage/content';
import type { NextApiRequest, NextApiResponse } from 'next';
const handler = (req: NextApiRequest, res: NextApiResponse) => {
// The cookie middleware will add the `set-cookie` header
res.status(200).json(data);
};
export default handler;
export async function getStaticProps() {
const res = await fetch('http://localhost:3000/api/homepage/content');
const posts = await res.json();
return {
props: {
posts,
},
};
}
export default Home;```
uj5u.com熱心網友回復：
是的。
這將是一個絕妙的主意，因為它將在構建期間獲取一次，并且當客戶端請求頁面時，API 將永遠不會再次被命中。
此外，由于此頁面是靜態的，因此可以有效地對其進行快取。
我建議你做的是添加一個revalidate來處理主頁內容的未來更新而不重建頁面。
export async function getStaticProps() {
const res = await fetch('http://localhost:3000/api/homepage/content');
const posts = await res.json();
return {
props: {
posts,
},
revalidate: 10, // In seconds
};
}
export default Home;
或者，如果 API 的內容是動態的，我建議您getServerSideProps改用
uj5u.com熱心網友回復：
如果你有預定義的資料，getStaticProps 是最好的，因為它會讓你的應用程式更快，因為
如果您從頁面匯出名為 getStaticProps（靜態站點生成）的函式，Next.js 將在構建時使用 getStaticProps 回傳的道具預渲染此頁面
getStaticProps 始終在下一次構建期間運行
uj5u.com熱心網友回復：
是的，getStaticProps如果您的資料離線或靜態，您應該使用。js正如您提到的，您的資料在檔案中，有很多方法可以做到這一點。getData在這種情況下，我最喜歡創建一個函式來獲取該資料，例如 -
// .../src/lib/fetchData.js
import { data } from '../data/homepage/content';
export function getData() {
return data;
}
在你的主頁中這樣做 -
import { getData } from "../lib/fetchData";
// getting data as pageProps
export default function Homepage({ data }) {
return (
<>
<Carousel />
{data.map((data, index) => (
<TwoColumnsBlueWhite
title={data.title}
subTitle={data.subTitle}
content={data.content}
links={data.links}
imageSide={data.imageSide}
/>
))}
</>
);
};
export async function getStaticProps() {
const data = getData();
return {
props: {
data,
},
};
}
如果您的資料隨時間發生變化，那么使用 next.js 重新驗證它是一個很好的選擇。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/440167.html
標籤：javascript 节点.js 反应 api 下一个.js
上一篇：在python中將陣列值加一