reactjs - react - Nextjs: ComponentWillMount vs getInitialProps

getinitialprops next js

Question

Estoy usando next.js para mi aplicación React porque tiene una representación del lado del servidor. Como verifiqué por el registro, ambos métodos, ComponentWillMount y getInitialProps ejecutan en el lado del servidor. Entonces mi pregunta es: ¿Hay alguna diferencia entre esos métodos? ¿Cuándo debo ejecutar en ComponentWillMount y cuándo debo ejecutar en getInitialProps . No veo Next.JS menciona sobre esta cosa.

Answer 1

componentWillMount es los métodos del ciclo de vida de los componentes .

Segun documentation

componentWillMount() se invoca inmediatamente antes de que se produzca el montaje. Se llama antes que render() , por lo tanto, llamar a setState() sincrónica en este método no activará una representación adicional. En general, recomendamos usar el constructor() lugar. Evite introducir efectos secundarios o suscripciones en este método. Para esos casos de uso, use componentDidMount() lugar. Este es el único gancho de ciclo de vida llamado en la representación del servidor.

Answer 2

GetInitialProps

1. GetInitialProps es generalmente una función asíncrona que es buena para
   Operaciones asíncronas en el servidor y pasa los datos a la página como props.

2. En nextJs siempre se ejecuta en el servidor, si se llama a la página utilizando Link, solo se llama al lado del cliente.

3. Solo se puede utilizar en páginas que no estén en componentes.

ComponentWillMount

1. es un gancho de ciclo de vida al que se llama justo antes de que se llame al método de renderizado. Los datos recogidos no se pueden pasar como prop.

2. Se puede llamar tanto en componente como en páginas. no es un buen lugar para realizar llamadas asíncronas, ya que no espera a que finalice la operación asíncrona. por lo tanto, si se ejecuta en el servidor y su operación asíncrona está escrita en él ... no se completará y se enviará al cliente sin obtener datos.

Answer 3

ADVERTENCIA El 50% de la respuesta aceptada es incorrecta. Por eso, permítame dividir mi respuesta en 2 secciones:

Parte 1:

1. GetInitialProps es generalmente una función asíncrona que es buena para las operaciones asíncronas en el servidor y pasa los datos a la página como accesorios.

2. En nextJs siempre se ejecuta en el servidor, si se llama a la página utilizando Link, solo se llama al lado del cliente

Incorrecto , GetInitialProps se ejecuta en AMBOS servidores y navegadores (recuerde que el objetivo de Next.js es hacer JavaScript universal), esto es lo que dice el documento:

Con eso, podemos obtener datos para una página determinada a través de un origen de datos remoto y pasarlos como accesorios a nuestra página. Podemos escribir nuestros getInitialProps para que funcionen tanto en el servidor como en el cliente. Entonces, Next.js puede usarlo tanto en el cliente como en el servidor.

Parte 2:

La segunda sección es responder la pregunta real con más precisión, está claro que el OP se confundió entre ComponentDidMount y ComponentWillMount . porque en el caso de Next.js tiene más sentido comparar GetInitialProps VS ComponentDidMount, ya que ambos pueden hacer una llamada asíncrona para obtener datos, y ambos también permiten la representación posterior (lo que no es posible en el caso de ComponentWillMount ).

En cualquier caso, utiliza una u otra, hay pocas diferencias:

GetInitialProps : es proporcionado por Next.js y NO siempre se activa, así que ten cuidado, eso sucede cuando envuelves 1 componente dentro de otro. Si el componente principal tiene GetInitialProps, GetInitialProps del niño nunca se activará, consulte este hilo para obtener más información.

ComponentDidMount : es la implementación de React y siempre se activa en el navegador.

Puede preguntar, "entonces, cuando debería usar esto o aquello", en realidad es muy confuso y al mismo tiempo muy simple, aquí hay una regla de oro:

• use GetInitialProps para obtener datos cuando su componente actúe como una página y desee proporcionar los datos como accesorios.
• use ComponentDidMount en componentes secundarios (que no sean Páginas) o cuando desee actualizar el estado en la llamada Ajax.