3

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!

Shadee Merhi
  • 194
  • 2
  • 13

3 Answers3

2

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)

illia chill
  • 1,652
  • 7
  • 11
0

What you looking for is Incremental Static Regeneration from NextJs. It works with a property called revalidate. If you set revalidate: 60. Your website will refresh its cache after 60 minutes. You can adjust the time according to your requirement.

But if you want to revalidate the cache if there is any change in the data and you want your cache to be refreshed instantly then you need On-Demand Revalidation. It's a very new feature and still in beta, but works fine.

This is the solution to your problem. If you need further explanation, feel free to ask. Cheers.

Simran Singh
  • 2,323
  • 12
  • 21
  • Thank you for the answer! I will look into ISR more. – Shadee Merhi Mar 23 '22 at 21:23
  • If you set a revalidate time of 60, all visitors will see the same generated version of your site for `one minute`. The problem with this approach is every minute your db will be dumped with page request – illia chill Mar 24 '22 at 14:30
  • db dumped? What are you saying? NextJs cannot alter, harm, or dump your db. NextJS works on the cache. It creates a cached image of all pages and data on the server. So what revalidates is basically doing? It is updating cache every 60secs (or whatever time you set) on the server. And it updates cache only if there is any change in your data or db. And it updates cache for only pages where data is changed. You can setrevalidate time to 1hr or 24hr or any time interval you like. – Simran Singh Mar 24 '22 at 23:14
0

This how I revalidate the cached data:

import { useRouter } from 'next/router';

function SomePage(props) {

  const router = useRouter();

  // Call this function whenever you want to
  // refresh props!
  const refreshData = () => {
    router.replace(router.asPath);
  }
  useEffect(() => {
      if(formSubmittedSuccess){
          refreshData()
      }
  },[formSubmittedSuccess])

}
Tomerikoo
  • 18,379
  • 16
  • 47
  • 61
Danny Coder
  • 33
  • 6