iT邦幫忙

0

Nextjs build專案 有快取問題

  • 分享至 

  • xImage

使用的nextjs 版本為14.0.1
我在api設計有設定no-store

import { OauthHeader } from "@/tools/auth";
import { NextResponse } from "next/server";

export const GET = async () => {
  const url = `${process.env.URL}`;
  const method = "GET";
  try {
    const headers = await OauthHeader(url, method);
    const res = await fetch(url, {
      method,
      headers: {
        ...headers,
      },
      cache: "no-store",
    });
    const { responseMsgs } = await res.json();
    return NextResponse.json(responseMsgs);

  } catch (e) {
    return NextResponse.json(e);
  }
};

我在ServerComponent有設定no-store

import InvList from "@/app/components/InvList";

const InvoicePage = async () => {
  let data = null;
  try {
    const url = `${process.env.NEXT_PUBLIC_LOCALBACKENDAPIURL}`;
    const res = await fetch(url, { cache: "no-store" });
    data = await res.json();
  } catch (e) {
    console.log(e.message);
  }
  return <>{data && <InvList invoices={data} />}</>;
};

export default InvoicePage;

想請問我在dev階段,進入畫面時都有loading出現
但是在build完start專案後,畫面都是一下就出現,感覺都沒有重新讀取api,想請問為什麼都還會有快取

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
janlin002
iT邦好手 1 級 ‧ 2024-02-18 23:15:12

next.config.js 加上這段

module.exports = {
  headers: () => [
    {
      source: '/:path*',
      headers: [
        {
          key: 'Cache-Control',
          value: 'no-store',
        },
      ],
    },
  ],
}

然後確定取到 cache 的原因是因為感覺很快,所以認定為 cache
還是用其他方式確定到取到的是 cache

謝謝您!我試試看
我使用情境是,會對資料進行開立發票,開立完的發票就不會在出現在清單上,但是我開立發票過發票的資料仍有出現在清單中
重新build專案後就沒有出現了

janlin002 iT邦好手 1 級 ‧ 2024-02-19 10:18:24 檢舉

怎麼感覺比較像是 state 沒有更新畫面?
不清楚具體的情境,但可以先試試看上面的寫法,不確定能不能幫到你

我要發表回答

立即登入回答