I’m using Next.js 14 and encountering an issue where my requests are being duplicated when using parallel routes and intercepting routes. Here’s a simplified version of my RootLayout component:
<code>import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "./components/Header";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
async function fakeRequest() {
try {
console.log("fakeRequest");
const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await resp.json();
return data;
} catch (error) {
console.log("error", error);
return null;
}
}
export default async function RootLayout({ children, authModal }) {
const data = await fakeRequest();
return (
<html lang="en">
<body className={inter.className}>
<Header />
{JSON.stringify(data)}
{children}
{authModal}
</body>
</html>
);
}
</code>
<code>import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "./components/Header";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
async function fakeRequest() {
try {
console.log("fakeRequest");
const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await resp.json();
return data;
} catch (error) {
console.log("error", error);
return null;
}
}
export default async function RootLayout({ children, authModal }) {
const data = await fakeRequest();
return (
<html lang="en">
<body className={inter.className}>
<Header />
{JSON.stringify(data)}
{children}
{authModal}
</body>
</html>
);
}
</code>
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "./components/Header";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
async function fakeRequest() {
try {
console.log("fakeRequest");
const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await resp.json();
return data;
} catch (error) {
console.log("error", error);
return null;
}
}
export default async function RootLayout({ children, authModal }) {
const data = await fakeRequest();
return (
<html lang="en">
<body className={inter.className}>
<Header />
{JSON.stringify(data)}
{children}
{authModal}
</body>
</html>
);
}
I’m not using useEffect and the RootLayout component is only supposed to render once. However, the fakeRequest is being made twice. What could be causing these duplicate requests and how can I prevent them?.
Here is the full code You can open the link and try reloading the page to see the issue.
Any insights or solutions would be greatly appreciated!