How to reload an SSR page

When using SSR, you might need to update the data that has been served because a user has done something, such as updating a database or subscribing to your product.

This poses a problem, Next.js doesn't have a feature refetchprops but if the team over at Vercel wants to implement it... I am all for it. One solution would be just to hard refresh the page, but that feels almost like an anti-pattern.

So how do we tackle this without using a hard refresh? First, we should talk about the usual SSR flow that we think of when talking about it.

The usual SSR flow

When we think of Server Side Rendering, we have two flows in mind, and it usually goes something like this:

  • A user clicks a link that sends them to your website.
  • Next.js calls the getServerSideProps method and generates the HTML with the data from your api(s)
  • The user receives that HTML file, and React rehydrates on the client.

Or

  • The User is already on your site, and they click a Next Link to navigate to the server-rendered page.
  • Next.js calls your getServerSideProps method on the server but instead of generating an HTML file as in scenario one. It sends the data as JSON instead.
  • React uses that data as the props when rendering the new page in-browser. This is what I love about Next.js , two different scenarios handled slightly differently to increase performance, and the user is none the wiser.

Discord

The solution

So the solution is to use built-in functionality of Next.js router . Using this, we can ask Next.js to retrieve the latest from SSR without a hard refresh. If you are in a rush, here is the solution:

import { useRouter } from 'next/router';

export default function YourPage(props) {

 const router = useRouter();
 const dataToUpdate = //some object;

// API that updates your DB
  const update = fetch('api/update',{
    method: 'PUT',
    body: JSON.stringify(dataToUpdate),
  });
  if(update.status == 200) {
    // ask next router to replace the current path with the current path.
   router.replace(router.asPath);
   }
}
jsx

How does this work?

When describing SSR, the second path, we talked about how Next.js returns a JSON when you use Next Link through a client-side transition. This is exactly what we are doing by using router.replace we are telling Next.js to *perform a client-side transition. *

If you are wondering what router.replace does, it does the exact same thing as route.push except it doesn't add history to the stack. This means if the user hits the back button it will perform as expected

This means that when this client-side transition happens, getServerSideProps fires, and the JSON returns with the latest information from your database or API.