Implement a way to get data on Head and Page from a single database query #44595
Description
Describe the feature you'd like to request
To start, I want to thank you for the awesome work. I have been enjoying Next.js 13 a lot and all these amazing features that you bring to us.
Experimenting with the new app directory architecture, I found it very hard to get the same data in Head.jsx and Page.jsx from a single query from the database.
In the following example, I am trying to get the title of the page for the Head, and using this title as h1 as well.
Right now, this is going to result in two different database queries:
Two separate queries to the Database
// head.jsx
import { getPageInfoFromDatabase } from '../database/index';
export default async function Head() {
// Database query No. 1
const pageInfo = await getPageInfoFromDatabase();
return (
<>
<title>{pageInfo.title}</title>
<meta name="description" content={pageInfo.description} />
<link rel="icon" href="/favicon.ico" />
</>
);
}// page.jsx
import { getPageInfoFromDatabase } from '../database/index';
export default async function Home() {
// Database query No. 2
const pageInfo = await getPageInfoFromDatabase();
return (
<main>
<h1>{pageInfo.title}</h1>
<p>{pageInfo.data} </p>
</main>
);
}I also created a reproduction example that presents query data directly from the page. In the example, it can be tested how the direct call approach results in multiple function call.
https://github.com/Josehower/next-13-data-fetching-demo
Describe the solution you'd like
A possible solution would be either:
- A way to communicate between
Head,Layout, andPagecomponents so that I can perform a single query to get data on all of them without using an API. Similar to how you can pass props from_app.jsto the page components
A possible API for this communication may be this:
// layout.jsx
import { getPageInfoFromDatabase } from '../database/index';
export default async function RootLayout({ Head, Page }) {
const pageInfo = await getPageInfoFromDatabase();
return (
<html lang="en">
<Head pageInfo={pageInfo} />
<body>
<Page pageInfo={pageInfo} />
</body>
</html>
);
} - Next.js using a similar approach to fetch() Deduping for direct database/function calls
Describe alternatives you've considered
I am aware that Next.js perform a fetch deduping when Head and Page perform a fetch to the same URL (API routes for example). This theoretically would solve my issue but will add some unnecessary HTTP request overhead.