Next.js Discord

Discord Forum

Sharing Data Between Pages

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
Hi 👋 , I'm working with Next.js and was wondeing if someone could give me some suggestions as to how I would share data between pages.

I have a 'dashboard', which when a user loads, I make a request to my backend to fetch the data. I then have several sub-pages, making use of dynamic routing etc, which a user can navigate through using buttons on the dashboard, and by physically navigating to that link in the url - see attached image for file structure.

Right now, I am re-making the API request to my backend every time a user moves page - e.g from viewing one 'group' to another 'group'. However, users are likely to move around a lot, and this feels like an excessive number of API calls, that would create a really bad user experience given the loading on each page load.

How could I only make the API call once, and then all of these pages have access to that data?

27 Replies

James4u
@Giant panda it depends
what do you have in your pages?
and are you hitting your backend from your client? - meaning aren't your pages server components?
@James4u and are you hitting your backend from your client? - meaning aren't your pages server components?
Giant pandaOP
Right now I'm making use of useEffect hooks, and my pages are client components:

export default function Organisation({ params }: { params: Promise<{ org: string }> }) {
  const [data, setData] = useState<any>(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    async function fetch() {
      axios
        .get(`http://localhost:3000/api/orgs/${(await params).org}`, { withCredentials: true })
        .then((res) => res.data)
        .then((data) => {
          if (!data) redirect('http://localhost:3001/dashboard');
          setData(data);
          setLoading(false);
        });
    }
    fetch();
  }, []);
James4u
if you can show me the rest of the codebase
is your next.js running on 3000 or 3001?
@James4u why not server components btw?
Giant pandaOP
To be honest - I'm not sure! Would they probably be a better option, given the fact it's a sort of dashboard app, with lots of dynamic pages (routes look like http://localhost:3001/dashboard/7265315503164362752/groups/53542315432?
@James4u is your next.js running on 3000 or 3001?
Giant pandaOP
Next is running on 3001, 3000 is my standalone backend API.
@James4u it's okay - just make it a server component
Giant pandaOP
Alright - how would you recommend dealing with my data fetching issue then? As I of course then couldn't use hooks.
James4u
yeah, just make your page a server component and do data-fetching inside your page, right?
and then pass data down to the client component where you need user interfactions/states ...
@James4u yeah, just make your page a server component and do data-fetching inside your page, right?
Giant pandaOP
Alright, but all of my dashboard pages have a high level of interactivity and conditional rendering?

Also this still doesn't adress how I pass data to these client components?
@Giant panda Alright, but all of my dashboard pages have a high level of interactivity and conditional rendering? Also this still doesn't adress how I pass data to these client components?
James4u
it's okay - right after you pass the fetched data down to your client component, everything will be the same as before
@James4u it's okay - right after you pass the fetched data down to your client component, everything will be the same as before
Giant pandaOP
Alright, I'll give that a go. Mind giving me some suggestions as to how I should share data between all of my server components though?
James4u
what kind of data do you share across the pages btw?
@James4u what kind of data do you share across the pages btw?
Giant pandaOP
If you look at my image at the top, you can see that my kind of first 'layer' is the 'org', basically the org page.tsx fetches all of the organisation data for that specific id (it's a dynamic route).

This organisation data is essentialy just a big object, which all of the child pages, e.g org/:id/games and org/:id/groups need.
@James4u for the different org id, you should get the different data
Giant pandaOP
Yes, I'm aware - but then how do I get this big org object / data into my 'groups' and 'games' server components/pages.
@Giant panda Yes, I'm aware - but then how do I get this big org object / data into my 'groups' and 'games' server components/pages.
James4u
just fetch again and again in your server components - those fetches will be batched
@James4u just fetch again and again in your server components - those fetches will be batched
Giant pandaOP
Ahh ok - mind elaborating on this? So I don't need to do anything different? Next will just detect it's the same URL and request?
Giant pandaOP
Alright - thank you so much for your help, I really appreciate it.
James4u
give it a try and let me know
Original message was deleted
James4u
@Giant panda close the thread if you don't have any questions