I&#39;m looking for solutions for better data fetching in a Next.js app. In this question I&#39;m not just looking for _a_ solution, I&#39;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 &lt;Layout /&gt; component that displays som static content and a &lt;Footer /&gt; 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&#39;m looking for

I&#39;m not just looking to solve this one problem, I&#39;m looking for an overview to learn some new practice for future projects as well. I like writing &quot;obvious&quot; 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&#39;s not that important to reduce network usage/API calls.

# What I have thought so far

This is the possible solutions I&#39;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 &amp; client side) on all /pages
3. Do a fetch in _app.js with a HOC and hooking into it&#39;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 &quot;work&quot;, 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. &#128077; Simple! Fetch code is only in one place, it&#39;s located where it&#39;s used. &#128078; Data is fetched after page is loaded, so the content &quot;jumps&quot; in to view. Data is refetched all the time.
2. &#128077; Simple! Data is fetched on the server, so content is available before the page is rendered. &#128078; Data is refetched for each page. We have to remember to fetch the same footer data for each page in their `getInitialProps()`.
3. &#128077; 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&#39; props. &#128078; Might be a bit more complex for some to easily understand what&#39;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&#39;s even slower. 
4. &#128077; 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. &#128078; The `rel=&quot;preload&quot;` prefetching technique won&#39;t work with all types of fetching (for instance Sanity&#39;s client using groq). To not have &quot;jumpy&quot; 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. &#128077; We can load data once(?) and have it available throughout the application. Fast and less/no refetching. &#128078; Adds external dependency. More complex as you&#39;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) =&gt; {
      return (
        &lt;Layout data={props.footer}&gt;
           &lt;Home data={props.page} /&gt;
        &lt;/Layout&gt;
      )
    }
    
    // Not actual query, just sample
    const query = `{
      &quot;page&quot;: *[_type == &quot;page&quot;][0], 
      &quot;footer&quot;: *[_type == &quot;footer&quot;][0]
    }`
    
    HomePage.getInitialProps = async () =&gt; {
      const data = await client.fetch(query)
      
      return {
        page: data.page
        footer: data.footer
      }
    }

    export default HomePage


----------


Would love some more insight into this. I&#39;m a missing something obvious?



All Sanity Solutions on Gang of Coders

Total of 1 Sanity Solutions

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