Next.js: Route to new page without invoking `getInitialProps`

[brettinternet]

Feature request

When using a next export static build, I would like the getInitialProps method to fire only during the build step and not on the client for select page components. (Related StackOverflow question)

On a static client, Next.js invokes this method before the page component is rendered in order to provide the necessary props for the component. Thus, large requests can delay the client's first paint as this is a blocking request.

I would like to selectively ignore getInitialProps for a page component, and instead use the props provided by getInitialProps during next export.

I'm unwilling to move my slow API request to componentDidMount in order to avoid the blocking request because I want to use the data returned during the build step to populate the static HTML, and this particular request doesn't need to be dynamic or updated after the build.

Shallow routing works only for same page URL changes.

- Shallow Routing

For this feature request, is it possible to implement something similar to shallow routing, but for _new_ pages?

To circumvent getInitialProps on static exports, I currently have to use a standard JSX anchor <a href="/next-page"> to avoid invoking the method. This does cause a full page refresh which is a poor solution.

[tylermcrobert]

I don't have a solution yet but perhaps these help? #8291 #5903

[dmks]

I have the same problem, @brettinternet , what's your workaround so far? Could you explain more about it?

Thanks

[dmks]

My workaround is

XXXPage.getInitialProps = async (req) => {
  if (process.browser) {
    return __NEXT_DATA__.props.pageProps;
  }
  // original logic

[tylermcrobert]

@dmks I’m excited to try this. It’s been working for you well? Where does __NEXT_DATA__ come from, the window ?

[dmks]

@dmks I’m excited to try this. It’s been working for you well? Where does __NEXT_DATA__ come from, the window ?

Yes, here is the source code:
https://github.com/zeit/next.js/blob/canary/packages/next/client/index.js#L30-L31

[tylermcrobert]

Unfortunately, turns out this doesn't seem to always grab the __NEXT_DATA__ for the current page unless i'm missing something

[brettinternet]

@dmks I'm not able to reproduce this (CodeSandbox). Could you provide an example?

[dmks]

@brettinternet , your sandbox is not using the "static export" function of nextjs, right?

Maybe we are talking about different scenarios, mine is this:

const MyPage = ({prop1, prop2}) => {
  ...
}
MyPage.getInitialProps = async (ctx) => {
  console.log("getInitialProps in MyPage");
  const {prop1, prop2, ...} = await fetchHeavyData(...);
  return {prop1, prop2};
};

When I enter the url on the navigation bar on my browser, the behavior is different for different environment.

1. In development environment (next dev), "getInitialProps in MyPage" only print at the server side, and not at the browser side. And this's good and expected.

2. In the exported static page environment (next build && next export && cd out && serve -p 8080), the message "getInitialProps in MyPage" will print when next export and in the browser console. Printing at the browser side is unexpected to me because the page is already rendered.

And my workaround is to solving the #2 issue, I don't want fetchHeavyData() to be called at the browser side.

[luukdv]

Related: https://github.com/zeit/next.js/issues/9524

[Timer]

Closing as duplicate of https://github.com/zeit/next.js/issues/9524