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.

Sign up for GitHub

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

Jump to bottom

async getInitialProps on Layout not working #928

Closed
rohitcelestial opened this issue Jan 30, 2017 · 11 comments
Closed

async getInitialProps on Layout not working #928

rohitcelestial opened this issue Jan 30, 2017 · 11 comments

Comments

@rohitcelestial
Copy link

Hi,
Can layout and children component both be async, I am trying out but it seems that only children component getInitialProps is getting called. Please verfiy.

./components/layout.js

export default class Layout extends React.Component {
    static async getInitialProps (props) {
        const headerResponse = await fetch(someapi)
        console.log(headerResponse)
        return {...props, headerData: "headerResponse"}
    }

    render() {
        const {headerData, children} = this.props
        return (
            <div>
                <Head>
                    <title>Next js test</title>
                    <meta charSet='utf-8' />
                    <meta name='viewport' content='initial-scale=1.0, width=device-width' />
                </Head>
                <header>
                    This is header section
                </header>

                {children}

                <footer>
                    This is the footer section
                </footer>
            </div>
        )
    }
}

./pages/index.js

export default class Home extends React.Component {
    static async getInitialProps () {
        const homeResponse = await fetch(someapi2)
        return {homeData: homeResponse}
    }

    render() {
        const {homeData} = this.props
        return (
            <Layout>
                <div>Welcome from Next.js</div>
            </Layout>
        )
    }
}
@timneutkens
Copy link
Member

layout.js is not supported. You can use _document.js as described here: https://github.com/zeit/next.js#custom-document

@rohitcelestial
Copy link
Author

rohitcelestial commented Jan 30, 2017 •
edited
Loading

Hi @timneutkens, Thanks for your quick response and resolving query. Next.js is looking good for starters as well.
Now that I am able to use async in Document and Nested component.
However I have two links using (Link component) and I don't want to reload Layout component's data once loaded. However I can see in network tab all javascript is being loaded again

image

@timneutkens
Copy link
Member

Actually, just noticed there is a new example. I Will have to try that one to make sure it works as expected.

@timneutkens timneutkens reopened this Jan 30, 2017
@timneutkens
Copy link
Member

@arunoda could you have a look at:

Hi @timneutkens, Thanks for your quick response and resolving query. Next.js is looking good for starters as well.
Now that I am able to use async in Document and Nested component.
However I have two links using (Link component) and I don't want to reload Layout component's data once loaded. However I can see in network tab all javascript is being loaded again

@arunoda
Copy link
Contributor

arunoda commented Jan 30, 2017

@timneutkens It's really hard to say anything without looking at a sample repo.
@rohitpal99 could you provide a sample repo?

@rohitcelestial
Copy link
Author

@arunoda - Here is the repo

@arunoda
Copy link
Contributor

arunoda commented Jan 30, 2017

@rohitpal99 do not put Link inside the _document.
It's only for setting up the initial HTML layout.

Check this: #885 (comment)

Do all the liking and layout stuff in you pages

@arunoda arunoda closed this as completed Jan 30, 2017
@rohitcelestial
Copy link
Author

rohitcelestial commented Jan 30, 2017 •
edited
Loading

@arunoda - I wanted to make a layout that allows getInitialProps to fetch data from remote api and content of the app should be page component which also have getInitialProps and requires separate api call. On Client only page content is supposed to change and Layout doesn't reload at all.

Api on the Layout would generate links for other pages. So Link component is required in layout
Can you please suggest a way?

@tonytangau
Copy link

Agree with @rohitpal99 , to build an "Application Shell" that requires async data (for navigation, footer, etc.), we need to fetch data for Layout in getInitialProps. And this "Application Shell" should not reload between pages, similar to PWA.

Is there any other way we can get it done besides put everything from Layout into ./pages/_document.js?

@Tuizi
Copy link

Tuizi commented Dec 16, 2017

@rohitpal99 any info to how to do that? Fetching async data in getInitialProps?

@sergiodxa
Copy link
Contributor

sergiodxa commented Dec 16, 2017 •
edited
Loading

To create a layout component to fetch generic app data like the user you can create a high order component and wrap your pages with it, the HOC should have this logic:

  • check if it's running client or server side
  • if it's client side check in an in-memory cache (or sessionStorage) if already has the data
  • if it doesn't have the data or is server side fetch it
  • call the getInitialProps (if it exists) of the wrapped page

Then you can also define some custom UI and render the page component inside it (like a navigation, etc.)

@lock lock bot locked as resolved and limited conversation to collaborators Dec 16, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@arunoda @sergiodxa @Tuizi @tonytangau @timneutkens @rohitcelestial