Can I not compose a page using other pages?

[ekkis]

suppose I have an index.js the looks like this:

import Page1 from './page1'
export default () => (
  <Page1 someProp="Yes" />
)

and given that page1.js is in the pages/ directory, it can take advantage of the getServerSideProps mechanism. how do I get access to the properties set by that function call when they get overridden by the call on the index page?

or am I not supposed to compose one page with others but with components (in which case the responsibility of fetching data from some remote source cannot be delegated to the component)?

Appendix I

I guess by way of explanation, my index page creates a tab container and each of the tabs should display a page, ergo the need to create a page of pages

[ekkis]

here's the code

-- page1.js --

export async function getServerSideProps() {
  return { props: {data: 'test'}}
}
export default ({data}) => (
  <p>{data}</p>
)

-- index.js --

import Page1 from './page1'
export default () => (
  <Page1 someProp="Yes" />
)

[zomars]

If you want to re-use a page and it's methods you should do this on your index.js:

// index.js
export { default, getServerSideProps } from './page1'