Next.js: Reduce data fetching and share data between pages

Question

I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so we can look at the pros and cons.

The problem I have

Right now I have a few pages that all include a component that displays som static content and a that have some dynamic content that is fetched from an API. Each page do a fetch() in their getInitialProps() to get their own page data, but also the footer data, which is the same for all pages.

This of course works, but there is a lot of duplicated data fetching. The footer data will always be displayed for all pages and always be the same. It will also rarely be changed in the API, so no need for revalidate the data.

The answers I'm looking for

I'm not just looking to solve this one problem, I'm looking for an overview to learn some new practice for future projects as well. I like writing "obvious" code, so not looking for too hacky solutions, like writing to the window object etc. Simple solutions with less dependancies are preferred. The goal is a fast site. It's not that important to reduce network usage/API calls.

What I have thought so far

This is the possible solutions I've come up with, somewhat sorted from simple/obvious to more complex.

1. Do a fetch inside the Footer component (client side)
2. Do a fetch in getInitialProps (server side & client side) on all /pages
3. Do a fetch in _app.js with a HOC and hooking into it's getInitialProps() and add it to props, so data is available for all pages
4. Use zeit/swr and data prefetching to cache data
5. Use redux to store a global state

All of these "work", but most of them will refetch the data unnecessarily, and/or adds a bit more complexity. Here are the pros/cons as I see it (numbers are the same as above):

1. 👍 Simple! Fetch code is only in one place, it's located where it's used. 👎 Data is fetched after page is loaded, so the content "jumps" in to view. Data is refetched all the time.
2. 👍 Simple! Data is fetched on the server, so content is available before the page is rendered. 👎 Data is refetched for each page. We have to remember to fetch the same footer data for each page in their getInitialProps().
3. 👍 We can do the fetch in one place and add it to all the pages props, so footer data is automatically available for all pages' props. 👎 Might be a bit more complex for some to easily understand what's going on, as it requires a bit more understanding of how Next.js/React works. Still refetches the data for all pages. We now do two fetch() calls after each other (first in _app.js to load footer content, then in each page to get custom content), so it's even slower.
4. 👍 Somewhat simple. We can use the prefetching to load data to cache even before the JS is loaded. After first page load, we will have fast data fetching. Can have fetch code directly in footer component. 👎 The rel="preload" prefetching technique won't work with all types of fetching (for instance Sanity's client using groq). To not have "jumpy" content where the data is loaded after initial page load, we should provide useSWR() with initialData which still will require us to fetch data in getInitialProps(), but it would be enough to just do this on the server side. Could use the new getServerSideProps().
5. 👍 We can load data once(?) and have it available throughout the application. Fast and less/no refetching. 👎 Adds external dependency. More complex as you'll have to learn redux, even to just load one shared data object.

Current solution, using the solution described in bullet point number 2.

const HomePage = (props) => {
  return (
    <Layout data={props.footer}>
       <Home data={props.page} />
    </Layout>
  )
}

// Not actual query, just sample
const query = `{
  "page": *[_type == "page"][0], 
  "footer": *[_type == "footer"][0]
}`

HomePage.getInitialProps = async () => {
  const data = await client.fetch(query)

  return {
    page: data.page
    footer: data.footer
  }
}

export default HomePage

---

Would love some more insight into this. I'm a missing something obvious?

Answer 1

O'right! I found this thread while I was looking for something else. But since I had to work on similar issues, I can give you some directions, and I will do my best to make it clear for you.

So there are some data which you want to have it share, across your app (pages/components).

1. Next.js uses the App component to initialize pages. You can override it and control the page initialization. to achieve that simply create _app.js file in root of pages directory. For more information follow this link: https://nextjs.org/docs/advanced-features/custom-app
2. Just like the way you can use getInitialProps in your pages to fetch data from your API, you can also use the same method in _app.js. So, I would fetch those data which I need to share them across my app and eliminate my API calls.

Well, Now I can think of two ways to share the data across my app

1. Using of createContext hooks.

1.1. Create a DataContext using createContext hooks. and wrap <Component {...pageProps} /> with your <DataContext.Provider>. Here is a code snippet to give you a better clue:

<DataContext.Provider value={{ userData, footerData, etc... }}>
  <Component {...pageProps} />
</DataContext.Provider>

1.2. Now in other pages/components you can access to your DataContext like following:

const { footerData } = useContext(DataContext); 

And then you are able to do the manipulation in your front-end

2. populates props using getInitialProps

2.1. getInitialProps is used to asynchronously fetch some data, which then populates props. that would be the same case in _app.js.

The code in your _app.js would be something like this:

function MyApp({ Component, pageProps, footerData }) {
  //do other stuffs
  return (
   <Component {...pageProps} footerData={footerData} />
  ;
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const footerRes = await fetch('http://API_URL');
  const footerData = await footerRes.json(); 
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }
  return { pageProps, footerData };
};

2.2. Now in your pages (not in your components) you can access to props including those you have shared from _app.js and you can start to do you manipulation.

Hope I could give you a clue and direction. Have fun exploring.

Answer 2

I was looking for same few weeks ago. If you have some component which wraps all the pages,or have a component which is displayed in all pages, then here is a video which describes the same.

Here is an example, from my own project.

_app.ts

import "../styles/global.css";
import "@fontsource/rubik";

import type { AppProps } from "next/app";
import { ThemeProvider } from "next-themes";

type ComponentWithPageLayout = AppProps & {
  Component: AppProps["Component"] & {
    PageLayout?: React.ComponentType<any>;
  };
};

const MyApp = ({ Component, pageProps }: ComponentWithPageLayout) => {
  return (
    <>
      <ThemeProvider attribute="class">
        {Component.PageLayout ? (
          <Component.PageLayout>
            <Component {...pageProps} />
          </Component.PageLayout>
        ) : (
          <Component {...pageProps} />
        )}
      </ThemeProvider>
    </>
  );
};

export default MyApp;

LayoutWithoutSidebar

import Navbar from "src/components/Navbar";

const LayoutWithoutSidebar = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <header className="sticky top-0 z-50 ">
        <Navbar />
      </header>
      <main className="max-w-7xl m-auto">{children}</main>
    </>
  );
};

export default LayoutWithoutSidebar;

index.ts

import { GetStaticProps, GetStaticPropsContext, PreviewData } from "next/types";
import { ParsedUrlQuery } from "querystring";

import ApiService_ from "src/services/ApiService";

import PageHead from "src/components/PageHead";
import { Article, Project } from "src/@types/schema";

import LayoutWithoutSidebar from "src/layouts/LayoutWithoutSidebar";
import SectionSeperator from "src/components/SectionSeperator";

import IntroSection from "src/components/section/IntroSection";
import LatestSection from "src/components/section/LatestSection";


const Home = ({ latest, projects }: { latest: Article[]; projects: Project[] }) => {
  return (
    <div className="flex flex-col">
      <PageHead title="NextJS Blog" desc="Generated by create next app" />
      <IntroSection />
      <SectionSeperator />
      <LatestSection latest={latest} />
    </div>
  );
};

Home.PageLayout = LayoutWithoutSidebar; 

export default Home;

export const getStaticProps: GetStaticProps = async (
  context: GetStaticPropsContext<ParsedUrlQuery, PreviewData>
) => {
  const _service = new ApiService_();

  const latest: Article[] = await _service.getPost({
    maximum: 3,
    type: "Update",
  });

  const projects: Project[] = await _service.getProjects({});

  return {
    props: {
      latest,
      projects,
    },
  };
};

** Make a layout for example layout with Navbar,{children} (this is page content),Footer **

Home.PageLayout = LayoutWithoutSidebar; 

here is the video from where i learned. checkout for more learn detailed explanation How to Add Nested/Persistent Layouts in Next.js