CODEWITHSUNDEEP
reactjsserver-sideclient-sidenext.jsserver-side-rendering
hitchhiker
hitchhiker

Reputation: 1319

Does using `getInitialProps ` in custom _app component in next.js disable client-side rendering?

According to next.js official documentation:

import React from 'react'
import App from 'next/app'

class MyApp extends App {
  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // static async getInitialProps(appContext) {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

As far as I understand if I use getInitialProps in my _app.js file this will cause my pages to be server-side rendered. But does this mean that client-side rendering will not work (navigation etc.)? If not what exactly is meant by

causing every page in your app to be server-side rendered.

?

Upvotes: 3

Views: 3335

Answers (1)

felixmosh
felixmosh

Reputation: 35503

You are not got it correctly, only Automatic Static Optimization will be disabled, cause if you are using getInitailProps that means the page is not static (requires additional data from the server in order to render), so Next can't generate a static html file for it.

Upvotes: 5

Related Questions