Accessing MongoDB during server side rendering page in redux-wrapped Nextjs

Question

I was exploring the nextjs example with-redux-wrapper where they show how to create a nextjs react app with redux-wrapper and server side rendering.

I want to load some data from a MongoDB collection at request time. This can be easily done using client-side data fetching (e.g. with fetch/swr). However, if the requirement needs data to be loaded with the page itself, then it makes sense to use of server side rendering features of NextJS.

Note that NextJS docs (two notes at the bottom of the section) advise against making local api calls to fetch data with REST inside of getServerSideProps() and suggests using the same backend api code inside there.

Now, if I use a simple nextjs app and wrap mongodb connection/queries in getServerSideProps(), it works as expected. However, when the with-redux-wrapper example is used, the mongodb libraries end up forcing client side to look for libraries meant for server side, causing the following error:

error - ./node_modules/mongodb/lib/core/auth/gssapi.js:2:0
Module not found: Can't resolve 'dns'
null

My confusion is:

1. Dead code elimination should remove code intended for server-side rendering from client side (source). In that case, shouldn't mongo db client work as expected when call initiates from getServerSideProps()? I am even wrapping with a typeof window === 'undefined' check to ensure it only executes in the server.
2. The whole experience works when redux is not used. Why does it break when redux(-wrapper) is used? How can it be fixed?

P.S. I know we can use webpack config to inject empty libraries for the missing ones but that seems more like a hack and not a solution. I wonder how secure/concrete this method is.