如何使用下一個 js 加速 getServerSideProps？

Question

當我將 getServerSideProps 與下一個 js 一起使用時，頁面加載幾乎需要 5 或 6 秒。 我嘗試只使用一個 url 來獲取並且不多，但再次加載頁面需要很多時間。

export const getServerSideProps = async (ctx) => {
   let data ;
   try {
      data = axios.get("url")
   } catch(e){
      data = "error"
   }
   return {
     data: data,
   };
 };

我想知道是否有任何技巧可以加快 getServerSideProps 數據獲取速度，以便我可以更快地加載初始頁面？

Answer 1

我不知道讓您想要使用getServerSideProps的場景，但如果可能的話，您可以改用getStaticProps 。

當您使用getServerSideProps時，第一個字節 (TTFB) 的時間將比getStaticProps慢，因為服務器必須計算每個請求的結果，並且如果沒有額外的配置，CDN 無法緩存結果。

因此，如果 SEO 對您很重要，並且您希望提供更新的數據，您可以使用getStaticProps和增量 Static 重新生成功能，該功能允許您通過在流量進入時在后台重新渲染現有頁面來更新現有頁面。

或者，如果 SEO 不重要（例如在面板和 web 應用程序上），您可以在客戶端獲取數據。

Answer 2

我剛剛找到了一篇關於如何加快 getServerSideProps 的文章，它確實有效。

Answer 3

在搜索這個錯誤時得到了這個解決方案

const isServerReq = req => !req.url.startsWith('/_next');

function Post({ post }) {
  // Render post...
}

export async function getServerSideProps({ req }) {
  const initData = isServerReq(req) ? await fetch(...) : null;

  return {
    props: {
      initData,
    },
  }
}

問題： https://github.com/vercel/next.js/issues/13910