Next.js – useEffect doesn't execute even once – Next.js

by
Ali Hasan
next.js react-context react-hooks reactjs

Quick Fix: useEffect doesn’t run on server side but only in client side of an application with NextJS. So when you hit the API route with a fetch, your console doesn’t show the changes.

The Solutions:

Solution 1:

NextJS controls whether code runs on the browser (CSR) or server (SSR). By default, it uses a hybrid approach (CSR and SSR), rendering React components beforehand on the server, excluding lifecycle methods like useEffect.

useEffect runs on the client-side after the browser receives the rendered HTML and CSS. To execute code on the server, use the API folder. Alternatively, NextJS provides control over rendering modes. For more details, refer to these resources:

Q&A

Does NextJS support only one time execution of useEffect?

useEffect runs on both client and server sides by default. On the server side, it doesn’t execute lifecycle methods.

Video Explanation:

The following video, titled "useEffect and useState in NextJS - React Hooks - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

Play video

React hooks quick-start tutorial. Learn how to use react hooks in your react, next.js, gatsby, or other related framework.