Reload getServerSideProps?

[jdiamond]

Is there a way to trigger reloading server side props from the client without reloading the whole page?

[rafaelalmeidatk]

What exactly are you trying to do that requires a refetch of getServerSideProps?

[scripter-co]

No OP but lets say you had a contact list page and you can add a contact in a modal - on save, the modal closed, you now want to update the contact list to show you new entry. Simple crud operations right? Well, how is the recommended way in nextjs (not using graphql, just with pages and apis).

The way I see it there are multiple ways:

1. You find a way to do what OP is saying (and load the [page].json data and re-hydrate the page
2. You update the list by pushing the data you get back from the POST /contact endpoint (which would return a contact object)
3. You refetch the contact list client side by hitting GET /api/contacts

The problem with option 2 & 3 is that you end up with a bit of overlap, as you would have a getServerSideProps function that would look like:

/pages/contacts.tsx

export const getServerSideProps: GetServerSideProps = async () => {
  const contacts = await Contact.find();

  return {
    props: {
      contacts
    }
  }
}

and also an API endpoint:
/pages/api/contacts.ts

export default async () => {
  const contacts = await Contact.find();

  return {
    contacts
  }
}

now obviously there are ways around this (the duplication of code). I think personally some guidance on the "right" way to do this in NextJS 9.x would be useful. If there's no official way then that's cool as well, and i'll just do whatever is best for whatever project i'm working on.

edit: thinking about it, if you use the router correctly and change the path when opening a modal (in this example) and remove it when going back to the original list page, the data will be refetched.

However, there are other examples where you would want to do the above.

[msurdi]

Haven't tried it myself, but I was looking into this and found this idea , hope it helps.

[joshwcomeau]

I had success by essentially forcing a client-side redirect using router:

import { useRouter } from 'next/router';

  // In your component body
  const router = useRouter()

  // call this method whenever you want to refresh server-side props
  const refreshData = () => router.replace(router.asPath);

Credit to Brandon for the idea!

[elangreza]

working well in my project thanks

[SET001]

how to do this in class-based component?

[devhammed]

how to do this in class-based component?

I don't know if there is a way to get the current router data using Next.js in class components but I have a workaround, use a function component then pass the router refresh as prop to the class component!

import React from 'react'

import useRouterRefresh from '../hooks/useRouterRefresh'

class MyComponent extends React.Component {
  // Do something here
}

export default function MyComponentWrapper(props) {
  const refresh = useRouterRefresh()

  return <MyComponent {...props} refresh={refresh} />
}

[ghost]

I combined the above answers and this article into this hook:

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/router";

export default function useRouterRefresh(props): [() => void, boolean] {
  const router = useRouter();
  const [isRefreshing, setIsRefreshing] = useState(false);
  const { asPath } = router;

  useEffect(() => {
    setIsRefreshing(false);
  }, [props]);

  const cb = useCallback(() => {
    router.replace(asPath);
    setIsRefreshing(true);
  }, [router, asPath]);

  return [cb, isRefreshing];
}

[vpaflah]

I tried the router redirecting method and it working perfect in localhost, but when i host it into vercel it is not working, the data is fetched at server side but not populating into UI.

[jayu]

This approach is now causing bugs like this one

So use this with caution :)