Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Route to new page without invoking `getInitialProps` #8774

Closed
brettinternet opened this issue Sep 17, 2019 · 10 comments

Comments

@brettinternet
Copy link

@brettinternet brettinternet commented Sep 17, 2019

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.

@brettinternet brettinternet changed the title Route to new page without invoking `getInitialProps` (shallow routing to new page) Route to new page without invoking `getInitialProps` Sep 17, 2019
@tylermcrobert

This comment has been minimized.

Copy link

@tylermcrobert tylermcrobert commented Sep 20, 2019

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

@dmks

This comment has been minimized.

Copy link

@dmks dmks commented Oct 2, 2019

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

Thanks

@dmks

This comment has been minimized.

Copy link

@dmks dmks commented Oct 2, 2019

My workaround is

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

This comment has been minimized.

Copy link

@tylermcrobert tylermcrobert commented Oct 2, 2019

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

@dmks

This comment has been minimized.

Copy link

@dmks dmks commented Oct 2, 2019

@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

This comment has been minimized.

Copy link

@tylermcrobert tylermcrobert commented Oct 3, 2019

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

@brettinternet

This comment has been minimized.

Copy link
Author

@brettinternet brettinternet commented Oct 3, 2019

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

@dmks

This comment has been minimized.

Copy link

@dmks dmks commented Oct 15, 2019

@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

This comment has been minimized.

Copy link

@luukdv luukdv commented Nov 29, 2019

Related: #9524

@Timer

This comment has been minimized.

Copy link
Member

@Timer Timer commented Nov 29, 2019

Closing as duplicate of #9524

@Timer Timer closed this Nov 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.