Please let us return data from generateMetadata to the component as props just like we used to return data from getServerSideProps

[p32929]

Goals

1. to be able to use axios or any other packages
2. to be able to return data from generateMetadata to the components

Non-Goals

1. not introducing any breaking changes

Background

Honestly I loved the idea of being able to separate client side code and server side code in the app router. but we use nextjs mainly for the SEO and the generateMetadata is really not good enough. It only memoizes the API if you are calling it by fetch, not by axios or anything else. we cannot just pass data from the generateMetadata to the props of the component like we could do in getServerSideProps.

Proposal

here's a sample code of what I'm looking forward to:

import Image from "next/image";

export default async function Home(props: Props) {
  return (
    <div>
      {/* @ts-ignore */}
      {JSON.stringify(props.data)}
    </div>
  );
}

import type { Metadata, ResolvingMetadata } from 'next'
import axios from "axios";

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  let config = {
    method: 'get',
    maxBodyLength: Infinity,
    url: 'http://localhost:3000/users/test',
    headers: {}
  };

  const res = await axios.request(config)
  const title = res.data.name

  return {
    title: title,
    // @ts-ignore
    data: res.data,
  }
}

now we cannot really pass data from generateMetadata to the component. it would've been amazing if we could just return some extra data as props.