#Data Fetching for a Dynamic NavBar

9 messages · Page 1 of 1 (latest)

warped copper
#

Hey, I'm trying to dynamically fetch data for my NavBar, I'm facing certain design challenges that needs to be solved and unable to figure it out using the Next App Router

  1. Navigation is Dynamic (Data through Sanity and changes across Layouts) common across all site
  2. Currently I am fetching data for the navigation in Layout.tsx (The Root Layout), If I fetch in a page.tsx, then I've to repeat again and again across multiple pages. If the data is fetched in another layout page, it is hydrating the root layout first and once it changes, it leads to a hydration error
  3. What should be the optimal method of doing this?

Layout.tsx

import { JetBrains_Mono } from "next/font/google";
import { GeistSans } from "geist/font/sans";
import "./globals.css";
import Ribbon from "@/components/navigation/Ribbon";
import Navigation from "@/components/navigation/Navigation";
import { Toaster } from "@/components/ui/toaster";
import { client } from "../sanity/lib/client";
import FooterBar from "@/components/navigation/footer";


async function getNavigation() {
  const query = `
  *[_groq query]{
 `;
  const data = await client.fetch(query);
  return data;
}

async function getFooter() {
const query = `
  *[_groq query]{
 `;

  const data = await client.fetch(query);
  return data;
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const navigationData = await getNavigation();
  const footerData = await getFooter();

  return (
    <html
      lang="en"
      className={`${GeistSans.variable} ${jetbrainsMono.variable}`}
    >
      <body>
        <Ribbon />
        <Navigation navigation={navigationData} />
        <main>{children}</main>
        <Toaster />
        <FooterBar footer={footerData} />
      </body>
    </html>
  );
}
image.png
worldly lodgeBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

latent vessel
#

ok

warped copper
#

Thanks, appreciate it. If needed I can throw in github link for reference

latent vessel
#

im actually not well versed in nextjs

#

sorry

#

but i can try

warped copper
#

ok

viscid fern
#

hm