Code example for the article: "Why I got rid of getInitialProps on my work Next.js project"

profile.js

async function fetchUser(params) {
  const res = await fetch('https://example.com/api/user', params);
  const data = await res.json();

  return data;
}

async function fetchUserFromServer(ctx) {
  const { token } = ctx.req.cookies;
  const user = await fetchUser({ headers: { Authorization: `Bearer ${token}` } });

  return user;
}

// with server side rendering
export async function getServerSideProps(ctx) {
  const user = await fetchUserFromServer(ctx);

  return {
    props: { user },
  };
}

function Profile({ user }) {
  return <div>{user.name}</div>;
}


// with static rendering
function Profile() {
  const [user, setUser] = useState();

  useEffect(() => {
    fetchUser().then((u) => setUser(u));
  }, []);

  if (user === undefined) {
    // we may create skeleton with react-content-loader here
    return <div>Loading...</div>;
  }

  return <div>{user.name}</div>;
}

Thank you for your reply.

I may have to think about it, I haven't found a best practice solution yet. Thank you.