在 next.js 的自定义 _app 组件中使用 `getInitialProps` 会禁用客户端渲染吗？答案

【问题标题】：Does using `getInitialProps ` in custom _app component in next.js disable client-side rendering?在 next.js 的自定义 _app 组件中使用 `getInitialProps` 会禁用客户端渲染吗？
【发布时间】：2020-03-26 13:22:43
【问题描述】：

据next.js官方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

据我了解，如果我在_app.js 文件中使用getInitialProps，这将导致我的页面在服务器端呈现。但这是否意味着客户端渲染将不起作用（导航等）？如果不是，那到底是什么意思

使您的应用中的每个页面都在服务器端呈现。

【问题讨论】：

标签： reactjs server-side client-side next.js server-side-rendering

【解决方案1】：

你没有正确理解它，只有Automatic Static Optimization 将被禁用，因为如果你使用getInitailProps 这意味着页面不是静态的（需要来自服务器的额外数据才能呈现），所以 Next 可以' t 为它生成一个静态 html 文件。

【讨论】：

自动静态优化的链接现在可用here。