Next.js:有条件地调用 getServerSideProps

Question

我正在尝试有条件地 SSR 下一页，但在互联网上缺乏类似情况的答案让我相信我对 NextJS 和 SSR 的理解完全不正确，所以我希望得到一些澄清。

这是我的理解:在我们的页面文件中导出函数 getServerSideProps 告诉 Next 我们想要 SSR 所述页面并将服务器获取的数据传递到我们的页面。因此，如果我想有条件地 SSR 这个页面，我只需要调用 getServerSideProps 有时。经过一些研究，我认为使用 Dynamic Import from next/dynamic 可以解决这个问题，因为您可以有条件地应用 SSR，但是，即使我将页面组件包装在 dynamic 函数中(如指定的 Here )，getServerSideProps 仍在被调用。

这是我想要的功能:如果我的客户端缓存尚未包含该页面所需的数据，我只想对该页面进行 SSR。换句话说，我想首先检查客户端缓存是否包含页面所需的数据，如果有，则使用该数据来呈现该页面，如果没有，我想执行SSR并得到说getServerSideProps 中的数据。

这可能吗？还是我对框架的理解不正确？

如有任何澄清或建议，我们将不胜感激!

Answer 1

getServerSideProps - 获取页面的初始数据，获取您需要的数据。如果您的页面有 getServerSideProps，每次调用 getServerSideProps 的页面都会在任何情况下触发。(您不能阻止 getServerSideProps )

getServerSideProps 仅由服务器触发一次您的页面被调用。

你可以做什么:

一个。根据getServerSideProps数据触发返回

    function Page({ data }) {

    if (data){
        return <div>Data filled</div>
    }
    else{
        return <div>Need to fill data</div>
    }
    
    }

  


    export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch(`https://yourweb.com/your_data`)

    const data = await res.json()
  

    // Pass data to the page via props
    return { props: { data } }
    }
  
    export default Page

注意:getServerSideProps 只对页面可用，对组件不可用

B.使用 useSWR库(推荐)。

import useSWR from 'swr' 

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

在使用useSWR的情况下，您的数据将是动态的而不是静态的，一旦用户填写了他的数据，信息将被刷新而不刷新页面。 (使用 useSWR 的 mutate() 方法)。

我推荐这种方法，因为你不需要刷新页面来获取当前信息，效果很好。

附言用户缓存是什么意思？ getServerSideProps 看不到 Cookie 和其他内容 - 它是服务器端呈现。

P.S2:您不需要 ISR，因为 ISR 会缓存“页面”，如果您的页面内容基于个人用户信息 - 不要使用 ISR。 ISR是为“缓存”非个性化内容而做的，例如:产品页面(电子商务)