This is my attempt at a Venn diagram in text.

Both

Both use Atlas to set up DB and get connection string. Going external either way when it comes to the database.

Express/Heroku API

Need to set up a separate project and install express and nodemon. No “MongoClient” used onthe front-end as there is a clear delineation between front and back.

Update via API call with “useEffect.”

Separate question I would like to find an answer too: Do you always make HTTP requests in a “useEffect?”

Initial Load okay via GSSP but need “useRouter” trick if you want to refresh without losing state.

Next.js Internal API

Don’t need to set up a a separate project and install dependencies like express and nodemon, etc.

“MongoClient” on the front-end, (Any import will not make it to the client).

Slow on dev server.

Use Mongo Methods in GSSP or GSP so any update is not in a “useEffect” but with the useRouter trick.

import {useRouter} from "next/router"


//in the component function

const router = useRouter()

// where needed
router.replace(router.asPath)