How to implement useEffect in the server in Next.JS 14?

Question

What is the proper way to implement the "useEffect" front-end functionality in Next.JS server components?

Tried to use useEffect in the server side but it does not work. Do the usage of any other hooks work in the server side? If not, how can I implement a function that watches for changes on a variable, and performs an action when this change happened?

Hyacinthe

Answer 1

You're probably asking this because you want to use the default SSR in NextJS and it doesn't work with useEffect code.

Think of useEffect as a hacky way of awaiting for async functions. NextJS SSR components can be async, so, there's no reason to use useEffect. Some example

Client component

This code would error because Home is not async

export function Home() {
  const foo = await someAsyncFunction();
  return <h1>{foo}</h1>
}

Then you'd fix it with

export function Home() {
  const [foo, setFoo] = useState<string>("");
  const fetchFoo = async () => {
    const foo = await someAsyncFunction();
    setFoo(foo);
  }
  useEffect(() => {fetchFoo});
  return <h1>{foo}</h1>
}

SSR component

In server rendered components, you don't need all the hacky stuff. Just make the component async.

export async function Home() {
  const foo = await someAsyncFunction();
  return <h1>{foo}</h1>
}

Halie

Answer 2

UseEffect is actually a client side hook. You cannot use it on the server. You have to make that component a client component to use hooks like useEffect, useState, any click events, any form events etc.

You can make a component client by writing "use client" on top of your code ie, first line.

Be aware - using a use client directive will make all child components client components and will be rendered on user side, affecting some performance, so it is advised to keep your client components at the leaves of your tree.

Kelcey

Yes but my question is, how to implement a similar functionality from the server side? I know I can use "use client", and I also know hooks can't be used in the server. But I am asking if anyone has a done a custom implementation for something similar in the server side. – Hyacinthe

@Hyacinthe please elaborate what you want to implement like calling a function when page loads or something else? – Kelcey

Answer 3

Here is a small code I made :

I'm using App Router, there are 2 types of routers & folder structure & file conventions are different for both.

• Pages Router : https://nextjs.org/docs/pages
• App Router : https://nextjs.org/docs/app

page.js in projectName\src\app\somepage\page.js :

import SomeComponent from "../comp/SomeComponent"

const page = () => {
    return (
        <div>
            <h1>A Page </h1>
            <SomeComponent />

            <p>Rest of the page is server-side rendered !</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis totam vero, laudantium nihil quae, distinctio officia quaerat neque maxime voluptatem ipsam. Quia unde quo deleniti.</p>
        </div>
    )
}

export default page

SomeComponent.js is a component in (components folder) projectName\src\app\comp\SomeComponent.js :

'use client'
import React, { useEffect, useMemo, useState } from 'react'

const SomeComponent = () => {

    const [Counter, SetCounter] = useState(0)

    const Double = useMemo(() => Counter * Counter, [Counter])
    // RETURNS DOUBLE OF COUNTER

    useEffect(() => {
        console.log("Page Rendered !!");
    }, [])
    // RUNS ONE TIME

    return (
        <div>
            Counter : {Counter}
            <div>
                Double : {Double}
            </div>
            <div>
                <button onClick={() => SetCounter(Counter + 1)}>+</button>
                <button onClick={() => SetCounter(Counter - 1)}>-</button>
            </div>
        </div>
    )
}

export default SomeComponent

Please Read :

• Rendering : https://nextjs.org/docs/app/building-your-application/rendering
• Benefits of Server Rendering : https://nextjs.org/docs/app/building-your-application/rendering/server-components#benefits-of-server-rendering
• Server Components : https://nextjs.org/docs/app/building-your-application/rendering/server-components
• Client Components : https://nextjs.org/docs/app/building-your-application/rendering/client-components
• Benefits of Client Rendering : https://nextjs.org/docs/app/building-your-application/rendering/client-components#benefits-of-client-rendering
• Server and Client Composition Patterns : https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
• 'use client' : https://react.dev/reference/react/use-client

If you still have any doubts, leave a comment.

Walleyed