app_.getInitialProps with page getServersideProps #11183

majelbstoat · 2020-03-18T19:54:42Z

majelbstoat
Mar 18, 2020

I know that _app.getServersideProps doesn't exist yet, but is there a way to get _app.getInitialProps to correctly pass props to the App if a page defines getServersideProps? Simple illustration:

// _app.tsx
const MyApp = ({ Component, pageProps }: AppProps) => {
  const { viewer } = pageProps
  console.log('viewer', pageProps)

  return (
    <UserProvider viewer={viewer}>
      <Component {...pageProps} />
    </UserProvider>
  )
}

MyApp.getInitialProps = async (appContext: AppContextType<Router>) => {
  const appProps = await App.getInitialProps(appContext)
  appProps.pageProps.viewer = { id: 'monkey' }
  return { ...appProps }
}

// index.tsx
const IndexPage: NextPage = ({viewer}: IndexPageProps) => {
  return (
    <h1>OK</h1>
  )
}

This prints viewer { id: 'monkey' } as expected. However, if I add getServersideProps to IndexPage:

// index.tsx
export const getServerSideProps: GetServerSideProps = async () => {
  return { props: {} }
}

It now prints viewer undefined

I presume the result of getServersideProps is being used as the page props, but I don't understand the order in which things execute, and/or whether something like this is possible. I don't want to use getInitialProps on the page, because getServersideProps does exactly what I want in terms of direct db access etc. (Nice capability upgrade, thank you!)

What I'm trying to achieve:

load a user from a cookie on the server side
use that user to set an initial client side value for a viewer/setViewer state on a context Provider component high up in the react tree.
add the viewer to the cache key for SWR, so that data is automatically refetched when we call setViewer and the viewer changes (on login/logout without redirect).
still have all this server side rendered.

CurtisBaldwinson · 2020-04-01T16:44:03Z

CurtisBaldwinson
Apr 1, 2020

You can observe the following results printed in your browser developer console with the following code sample:

MyApp.props {
  serverSide: true,
  pageProps: {
    somePageProp: "somePagePropContent"
  }
  ...[other prop data such as Component, err, etc.]
}

# _app.js
function MyApp(props) {
  console.log("MyApp.props", props);

  return (
    <div>
      <props.Component {...props.pageProps} />
    </div>
  );
}

MyApp.getInitialProps = async ({Component, ctx}) => {
  let pageProps = {};

  pageProps.serverSide = !!ctx.req;

  return pageProps;
};

export default MyApp;

#pages/index.js
function Index(props) {
  return (
    <div></div>
  );
}

export async function getServerSideProps(ctx) {
  console.log("Index.getServerSideProps()", !!ctx.req);

  return {props: {somePageProp: "somePagePropContent"}};
}

export default Index;

This causes me to believe that getServerSideProps simply takes the props property of it's return result, and spreads that onto pageProps in _app. What's amazing here is that MyApp.getInitialProps() does not reference the child page's [Page].getInitialProps(), somehow it just knows. Previously, we would manually call await Component.getInitialProps(ctx) inside the MyApp.getInitialProps(). I found this to be a nice surprise, as it's less code to write in _app.

0 replies

kristojorg · 2020-04-04T05:00:59Z

kristojorg
Apr 4, 2020

I am also wondering this. My _app component must compile some global data, like creating a redux store for example, which I would then like to pass to getServerSideProps of the page being rendered. Not sure how to accomplish that

8 replies

kristojorg Jun 15, 2020

I don't think any communication between getServerSideProps and getInitialProps is possible at this point. I think the best you can do is switch entirely to getServerSideProps and either load global data (repetitively) on every page, or else stick with getInitialProps for now. I've chosen to stick with getInitialProps until there is some way to load global data with getServerSideProps.

I could be wrong on this, or out of date, but this was what I decided as of beginning April

jasonwilliams Dec 21, 2020

@kristojorg did you find a solution for this?

kristojorg Dec 21, 2020

I didn't find a solution - the two cannot communicate. Instead at this point I have a getServerSideProps or getStaticProps that runs on every page to fetch the same data plus whatever custom data the page needs

kristojorg Dec 21, 2020

This is what I am currently using: #11183 (reply in thread)

Wolfleader101 Jan 30, 2021

anyone got an answer to this yet?
I am trying to use getServerSideProps in the app so I can use a passportJS session across the whole application.

goldensunliu · 2020-04-09T06:19:49Z

goldensunliu
Apr 9, 2020

@majelbstoat can u update the title to _app.getServersideProps?

0 replies

majelbstoat · 2020-04-09T10:42:32Z

majelbstoat
Apr 9, 2020
Author

The question isn't about _app.getServersideProps - support for which doesn't exist yet. There are other discussions about adding support for that. This is about the interaction between _app.getInitialProps and page.getServersideProps.

0 replies

kristojorg · 2020-05-29T09:21:58Z

kristojorg
May 29, 2020

One thing I have noticed is that when using _app.getInitialProps with a page getServerSideProps, the _app.getInitialProps then begins to get called whenever the client requests the server side props, so it ends up needing to deal with requests like /_next/data/development/yourpage.json.

Not sure if this is intended behavior or not, but it seems that _app.getInitialProps shouldn't be run for these requests

1 reply

fabb Aug 2, 2022

sounds like a bug, was this already fixed in newer next.js versions?

KyruCabading · 2020-09-25T23:30:53Z

KyruCabading
Sep 25, 2020

I'm coming across this issue too.. And have been looking all over to find a way to have a custom app that calls app.getInitialProps & a page with getServerSide props.

So to confirm, this is not possible? I have a use case that would require this.

0 replies

kristojorg · 2020-09-27T09:37:04Z

kristojorg
Sep 27, 2020

For anyone coming across this, I have make a function withAppProps(pageGetServerSideProps) which wraps the page's getServerSideProps and provides the app props. Then on a page I simply write:

const getServerSideProps = withAppProps((ctx) => { ... });

That way I can easily fetch some default props for every page. It would be better to have it live in the _app but since that isn't possible right now, this workaround works

7 replies

gremo Apr 2, 2021

I came into the same problem and this is a very smart solution, thank you! 👍 I need withAppProps for rendering social links in the site footer, and the links came from API.

The only drawback is that you need to actually remember to define export const getStaticProps for every page. Any chance to say (maybe using _app.js) "if the page doesn't define getStaticProps, use withAppProps passing an empty callback"?

DopamineDriven Apr 7, 2021

I'm not sure if that's an ideal fix since using the withAppProps might opt you out of automatic static optimization. If it doesn't then that should work. That or a HOC you append onto the export default __ might work. Does using your withAppProps function result in opting-out of static optimization?

gremo Apr 7, 2021

@DopamineDriven if you use withAppProps doesn't opt-out of static optimizations, it still generates SSG/ISR pages.

However, as I said, the main problem with this approach is that you need to actually remember to use it in every page, or the template could break. Another downside is that you can't have your layout defined in the _app.js (imagine that your server side data returns something you need to use inside a <Footer> component).

kristojorg Apr 7, 2021

@gremo is right. It's frustrating to have to use on every page, and frustrating that the layout has to be wrapped around individual pages, but it's the best solution I could find to the problem.

gremo Apr 7, 2021

I've searched a lot about this and I can confirm that no better solution exists ATM. I'm going to test with context and context providers but I fear it's not going to solve anything.

Maybe Next it's fine for a mixed static/dynamic website (I don't like much this idea), but it would be very very cool to have a full dynamic website with ISR and a relative low timeout! Otherwise, we should give up and go for a full SSR website.

kmvan · 2020-12-05T09:04:48Z

kmvan
Dec 5, 2020

Is there no easy way? I don't like hard code very much.

0 replies

DopamineDriven · 2021-03-20T11:13:53Z

DopamineDriven
Mar 20, 2021

This is what I have so far. Trying to get implicit cross-function type retention like I do on the client (pushing the provided apolloState into returned props for client inference)

_app.tsx

import '@/styles/index.css';
import '@/styles/chrome-bug.css';
import 'keen-slider/keen-slider.min.css';

import App, {
	AppContext,
	AppInitialProps,
	AppProps,
	NextWebVitalsMetric
} from 'next/app';
import { useRouter } from 'next/router';
import { ApolloProvider } from '@apollo/client';
import { useEffect, FC } from 'react';
import {
	useApollo,
	initializeApollo,
	addApolloState
} from '@/lib/apollo';
import * as gtag from '@/lib/analytics';
import { MediaContextProvider } from '@/lib/artsy-fresnel';
import { Head } from '@/components/Head';
import { GTagPageview } from '@/types/analytics';
// import { AppLayout } from '@/components/Layout';
import {
	GetInitialPropsResult,
	InferGetInitialPropsType
} from '@/types/next-abstracted';
import {
	DynamicNavQuery,
	DynamicNavQueryVariables,
	DynamicNavDocument,
	WordpressMenuNodeIdTypeEnum
} from '@/graphql/generated/graphql';

const Noop: FC = ({ children }) => <>{children}</>;

function NextApp({
	Component,
	pageProps: { ...pageProps },
}: AppProps &
	InferGetInitialPropsType<typeof NextApp.getInitialProps>) {
	const apolloClient = useApollo(pageProps);
	const LayoutNoop = (Component as any).LayoutNoop || Noop;
	const router = useRouter();
	useEffect(() => {
		document.body.classList?.remove('loading');
	}, []);
	useEffect(() => {
		const handleRouteChange = (url: GTagPageview) => {
			gtag.pageview(url);
		};
		router.events.on('routeChangeComplete', handleRouteChange);
		return () => {
			router.events.off('routeChangeComplete', handleRouteChange);
		};
	}, [router.events]);
	return (
		<>
			<Head />
			<ApolloProvider client={apolloClient}>
				<MediaContextProvider>
					<LayoutNoop pageProps={pageProps}>
						<Component {...pageProps} />
					</LayoutNoop>
				</MediaContextProvider>
			</ApolloProvider>
		</>
	);
}

NextApp.getInitialProps = async (
	appContext: AppContext
): Promise<
	GetInitialPropsResult<{
		pageProps: AppInitialProps;
		Header: DynamicNavQuery['Header'];
		Footer: DynamicNavQuery['Footer'];
	}>
> => {
	const pageProps = await App.getInitialProps(appContext);

	const graphqlClient = initializeApollo();
	const dynamicNav = await graphqlClient.query<
		DynamicNavQuery,
		DynamicNavQueryVariables
	>({
		query: DynamicNavDocument,
		variables: {
			idHead: 'Header',
			idTypeHead: WordpressMenuNodeIdTypeEnum.NAME,
			idTypeFoot: WordpressMenuNodeIdTypeEnum.NAME,
			idFoot: 'Footer'
		}
	});
	return addApolloState(graphqlClient, {
		pageProps: {
			...pageProps.pageProps,
			Header: dynamicNav.data.Header,
			Footer: dynamicNav.data.Footer
		}
	});
};

export function reportWebVitals(metric: NextWebVitalsMetric) {
	console.debug('vital: ', metric);
}

export default NextApp;

index.tsx (for comparison, this does provide 100% cross-function types on InferGetmethodPropsType)

import { Container, LandingHero } from '@/components/UI';
import { initializeApollo, addApolloState } from '@/lib/apollo';
import { ServicesTopCoalesced } from '@/components/ServicesTop';
import { AppLayout } from '@/components/Layout';
import {
	GetStaticPropsContext,
	GetStaticPropsResult,
	InferGetStaticPropsType
} from 'next';
import {
	ServicesTopQuery,
	ServicesTopQueryVariables,
	ServicesTopDocument,
	DynamicNavDocument,
	DynamicNavQueryVariables,
	DynamicNavQuery,
	WordpressMenuNodeIdTypeEnum
} from '@/graphql/generated/graphql';

export function Index({
	other,
	popular,
	Header,
	Footer
}: InferGetStaticPropsType<typeof getStaticProps>) {
	return (
		<>
			<AppLayout
				title={'✂ The Fade Room Inc. ✂'}
				Header={Header}
				Footer={Footer}
				hero={<LandingHero />}
			>
				<Container clean className='fit'>
					<ServicesTopCoalesced other={other} popular={popular} />
				</Container>
			</AppLayout>
		</>
	);
}

export async function getStaticProps(
	ctx: GetStaticPropsContext
): Promise<
	GetStaticPropsResult<{
		other: ServicesTopQuery['other'];
		popular: ServicesTopQuery['popular'];
		Header: DynamicNavQuery['Header'];
		Footer: DynamicNavQuery['Footer'];
	}>
> {
	const apolloClient = initializeApollo();
	await apolloClient.query<
		DynamicNavQuery,
		DynamicNavQueryVariables
	>({
		query: DynamicNavDocument,
		variables: {
			idHead: 'Header',
			idTypeHead: WordpressMenuNodeIdTypeEnum.NAME,
			idTypeFoot: WordpressMenuNodeIdTypeEnum.NAME,
			idFoot: 'Footer'
		}
	});

	await apolloClient.query<
		ServicesTopQuery,
		ServicesTopQueryVariables
	>({
		query: ServicesTopDocument,
		variables: {
			other: 'all',
			popular: 'popular-service'
		}
	});
	return addApolloState(apolloClient, {
		props: {},
		revalidate: 10
	});
}
export default Index;

I'd like to move AppLayout into App with 100% strongly typed props passed from NextApp.getInitialProps to the default NextApp function being exported.

Is there a way to explicitly state the Return props expected as a promise like you can with GetStaticPropsResult and GetServerSidePropsResult?

Update:

Now my Component is typed as follows:

var Component: NextComponentType<NextPageContext, any, (appContext: AppContext) => Promise<GetInitialPropsResult<{
    pageProps: AppInitialProps;
    Header: Maybe<{
        __typename?: "WordpressRootQuery" | undefined;
    } & {
        ...;
    }>;
    Footer: Maybe<...>;
}>>>

Note: I am trying to write my own GetInitialPropsResult and InferGetInitialPropsType definitions...kind of works at the moment but feedback would be greatly appreciated

types/next-abstracted.ts

import App, {
	AppInitialProps,
	AppProps,
	AppContext
} from 'next/app';
import { Component } from 'react';

export declare function getNextAppInitialProps({
	Component,
	ctx
}: AppContext): Promise<AppInitialProps>;

export type GetInitialPropsResult<P> = {
	pageProps: P | AppInitialProps;
};

export type InferGetInitialPropsType<T> = T extends App<
	infer P,
	AppInitialProps,
	any
>
	? P
	: T extends (
			context?: AppContext
	  ) => Promise<GetInitialPropsResult<infer P | AppProps<T>>>
	? P
	: Component;

0 replies

hernandemonteiro · 2022-11-07T04:18:04Z

hernandemonteiro
Nov 7, 2022

send props to _app with `getInitialProps`...

i needed run two functions and send the result to _app, after
searchs, i find this method:

MyApp.getInitialProps = ({ Component, ctx }) => {
  const dirs = readDirs("./src/pages/docs/");
  const navDir = readNavDir("./src/pages/docs");
  let pageProps = { dirs: dirs, navDir: navDir };

  return pageProps;
};

in this case MyApp is your principal function in _app file;

All _app code:

function MyApp(props) {
  const route = useRouter();
  return (
    <>
      {route.asPath.match("/docs") ? (
        <TemplateDocs
          dirs={props.navDir}
          subDirs={props.dirs}
          backgroundColorDefined="black"
          projectName={"Hernande Monteiro - Personal Blog"}
        >
          <props.Component {...props.pageProps} />
        </TemplateDocs>
      ) : (
        <props.Component {...props.pageProps} />
      )}
    </>
  );
}

MyApp.getInitialProps = ({ Component, ctx }) => {
  const dirs = readDirs("./src/pages/docs/");
  const navDir = readNavDir("./src/pages/docs");
  let pageProps = { dirs: dirs, navDir: navDir };

  return pageProps;
};

export default MyApp;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

app_.getInitialProps with page getServersideProps #11183

{{title}}

Replies: 10 comments 16 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

app_.getInitialProps with page getServersideProps #11183

Replies: 10 comments · 16 replies

majelbstoat Apr 9, 2020 Author

_app.tsx

index.tsx (for comparison, this does provide 100% cross-function types on InferGetmethodPropsType)

types/next-abstracted.ts

send props to _app with getInitialProps...

All _app code:

Replies: 10 comments 16 replies

majelbstoat
Apr 9, 2020
Author

send props to _app with `getInitialProps`...