Styjun

Using Next.js

How do I pass some data received by a fetch in getInitialProps() of a page component (say page A) to another page component (say page B)? I do not want the fetch to happen again when the user navigates from A to the second page (page B).

Tried an approach using React Context, where data from page component is sent to context provider, which can be accessed by page B. But the problem is if user directly navigates to B, it doesn't have the data as it is fetched in getInitialProps() of A

You can setup Redux with your NextJS setup and check in the getInitialProps() function of B if the store has the respective data using store.getState() and accordingly perform a fetch. This will also help you maintain the data in case of navigation from A to B and then performing a page refresh on B.

Setting up Redux can be a little tricky but this article basically sums it up.

Adding to what Harshail Shah, you have the option of setting up Redux to allow for getInitialProps to read the data. But in addition to that, you have a lot of other options that you can try. Each of them have their advantages and disavantages, usually determined by how much data you are moving around.

1. Trying a pseudo-flash approach

In this approach, you temporarily store data in one getInitialProps using cookies and in the next page, you clear the cookie. One package you can use which automatically picks the cookie (whether client-side or server-side) is next-cookie So, your approach will be:

class Component1 extends React.Component 
 static async getInitialProps(ctx) 
 const isServer = !!ctx.req;
 // Set the cookie here. You can use next-cookie or ctx.req.cookie
 

and then in the second component, you will have:

class Component2 extends React.Component 
 static async getInitialProps(ctx) 
 const cookies = NextCookie(ctx);
 const desiredCookie = cookies['key_name'];

 // You can then delete the cookie here so that the data won't be available the next time
 

2. Encrypting the data and passing it as a query parameter to the next page

In my opinion, this is responsible for a lot of long URLs we see around. Basically the idea is on click of a button, you convert the data either into a base64 string or use a very fast browser encrypter/decrypter to append the data to the new URL as a query parameter and read it in the next page.

The best approach will usually depend on how much data you are encrypting; and how long you want the data to persist.