how to correctly fetch data in getServerSideProps

Question

Using Next.js I came across this problem:

As soon as I reach pages/users , I got this error

./node_modules/mongodb/lib/cmap/auth/gssapi.js:4:0
Module not found: Can't resolve 'dns'

Import trace for requested module:
./node_modules/mongodb/lib/index.js
./models/user/addedUserModel.js
./pages/api/users/index.js
./pages/users.js

https://nextjs.org/docs/messages/module-not-found

I'm trying to fetch all the users from getServerSideProps , inside pages/users

import { Layout, Meta, Card, Button } from "../components/ui";
import {useAxios} from "../utils/hooks/requests/useAxios";
import {useNotifications} from "../context/notifications/notifications_context";


const Users = ({users}) => {
    const {handleDeleteRequest} = useAxios("api/users");
    const {notification} = useNotifications()

    const removeUser = async (_id) => {
        await handleDeleteRequest(_id)
    }

    return (
        <>
            <Layout>
                <Meta title="Users"/>

                <Card>
                    {users.addedUsers.map(user => <div className="flex border-b items-center justify-between"
                                                       key={user._id}>
                        <div className="p-2">
                            <h2>{user.name}</h2>
                        </div>
                        <div>
                            <Button onClick={() => removeUser(user._id)} className="bg-red-500">Delete</Button>
                        </div>
                    </div>)}
                </Card>
            </Layout>
            {notification.text ? <div
                className={`${notification.isError ? 'bg-red-500 ' : 'bg-green-500 '} absolute top-0 left-0 w-full p-2 flex items-center justify-center text-white font-semibold`}>
                <p>{notification.text}</p>
            </div> : null}
        </>
    )
}

export default Users;

export async function getServerSideProps() {
   
    const res = await fetch("http://localhost:3000/api/users")
    const users = await res.json()

    return {
        props: { users }
    }
}

The folder structure of the api endpoint is as follows -> api/users/index.js

Under the pages/users folder I've got an [id].js file to delete a single user.

So the problem lives in the getServerSideProps function or there's something else I'm missing to get rid of this dns error?

Also, I want to re-fetch all the users after removing one of them, to have a fresh users list without refreshing the page. Isn't getServerSideProps useful to do this job??

Answer 1

getServerSideProps allows you to fetch data on the server-side before rendering the page. This means that when a user visits the pages/users page, the data will be fetched from the server and returned as part of the props object to the component