Next.js: conditionally call getServerSideProps

Question

I'm trying to conditionally SSR a Next page and the lack of answers on the internet with a similar scenario as me lead me to believe my understanding of NextJS and SSR altogether is slightly incorrect, so I would love some clarification.

Here is my understanding: having the function getServerSideProps exported in our page file tells Next that we want to SSR said page and pass server-fetched data to our page. Therefore, if I want to conditionally SSR this page, I need to only call getServerSideProps sometimes. After some research, I thought that using the Dynamic Import from next/dynamic would solve this problem, as you're able to conditionally apply SSR, however, it appears that even when I wrap my page component in the dynamic function (as specified Here), getServerSideProps is still being called.

Here is my desired functionality: I want to only SSR a page if my client cache does not already contain the data required by that page. In other words, I want to first check if the client cache contains the data required by the page, and if it does, use the data to render that page, and if it does not, I would then like to perform SSR and get said data in getServerSideProps.

Is this even possible? Or is my understanding of the framework incorrect?

Any clarification or advice would be greatly appreciated!

Answer 1

getServerSideProps - to get initial data for the page, for data you needed.If you page has getServerSideProps, each time page called getServerSideProps will be triggered in any cases. (you can't block getServerSideProps)

getServerSideProps is triggered only once by server you page is called.

What you can do:

A. trigger returns based on getServerSideProps data

    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

Mention: getServerSideProps is available only for pages and not for components

B. using useSWR library (recommended).

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>
}

In the case of using useSWR, your data will be dynamic and not static, once the user fills his data, the info will be refreshed with no page refresh. (use mutate() method of useSWR).

I recommend this approach because you will not refresh the page to get current info, works very well.

P.S. What do you mean by user cache? Cookies and other stuff are not visible by getServerSideProps - it's server-side rendering.

P.S2: You don't need ISR, because ISR is caching the "page" at all, if your page contents are based on personal user info - don't use ISR. ISR is made for the "caching" non-personalized contents, example: the page of the product (for e-commerce)