Nested SSRed components fetching dynamic data, without passing props all the way?

[pederklev]

Let's say I want to build a page such as /pages/article/[id], where the page in question will be server-side rendered based on dynamic data related to the article's id fetched from a CMS. I want data fetching to happen only on the server, so I'm probably using getServerSideProps or getStaticProps.

Let's say each article has different kinds of data related to it, such as title, author, text, references or something like that, but I don't want to fetch it all in one big lump at the page level. I want to fetch the data within each of the different components, so that I don't have to pass props around, and can keep my page component something along the lines of:

const Article = () => (
  <div>
    <Title/>
    <Author/>
    <References/>
  </div>
)

... where Title, Author and References each get the [id] from useRouter(), and fetch the needed data by themselves.

I know it's possible to do something similar with Apollo and useQuery, where data fetching somehow is hoisted up to getInitialProps. So I guess I want some of the same, but with getServerSideProps or getStaticProps instead.

Is this possible?