getInitialProps doesnt work after pushing to the page?

[anagobabatunde]

Hey, I'm using next js for my own project and i use it with Material table, when I create an element and redirect to my home page which contain my table, my element didn't show in my table (next doesn't call getIinital props) , for the moment I need to refresh my page to see my new element in my table, should I get help please, just to understand why

js import Layout from "../../../components/Layout" import Link from 'next/link'; import CatTable from "../../../components/CategoryTable" import {useState, useEffect} from 'react' const index = props => { return ( <Layout> <h3> <div> <p>Category</p> <Link href="/dashboard/categories/new"> <a className="btn btn-sm btn-secondary ml-3">Créer une categorie</a> </Link> </div> </h3> <CatTable categories={props.data} /> </Layout> ) } index.getInitialProps = async context => { if (!context.req) { return { data: [] } } const res = await fetch('http://localhost:7002/api/v1/category', { method: "GET", headers: { Accept: '*/*', 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', mode: "cors", } }) const dt = await res.json() return { data: dt } }; export default index;

[anagobabatunde]

import Layout from "../../../components/Layout"
import Link from 'next/link';
import CatTable from "../../../components/CategoryTable"
import {useState, useEffect} from 'react'
const index = props => {
    return (
        <Layout>
            <h3>
                <div>
                    <p>Category</p>
                    <Link href="/dashboard/categories/new">
                        <a className="btn btn-sm btn-secondary ml-3">Créer une categorie</a>
                    </Link>
                </div>
            </h3>
            <CatTable categories={props.data} />
        </Layout>
    )
}
index.getInitialProps = async context => {
    if (!context.req) {
        return { data: [] }
    }
    const res = await fetch('http://localhost:7002/api/v1/category', { method: "GET", headers: { Accept: '*/*', 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', mode: "cors", } })
    const dt = await res.json()
    return { data: dt }
};
export default index;

[jamesmosier]

Your code works for me. getInitialProps is called both on the server and then when navigating to this page via next/link it is called again (this time logged to my browsers console).

When navigating to this page via next/link, context.req is null therefore this conditional is executed: if (!context.req) { return { data: [] } }

As a further example:

index.getInitialProps = async context => {
  if (!context.req) {
    return { data: 'logs to the browser when navigated to client side' };
  }

  // on the server, this runs and logs to your terminal
  return { data: 'logs to the terminal when on the server' };
};

[anagobabatunde]

ohhhhhh okay i understand , thank u for u help , i'll try