Is SAFE to import server module like mongo in page folder?

[IRediTOTO]

Hi, I am trying query database in getStaticProps, it worked ok. But I wonder can connection string run on client too? :\

import mongoClent from 'mongodb'; // I wonder is this import safe ? We don't want client side get our connection string, right?

const MyPage =(props)=>{
//render page
}
export const getStaticProps = async (context) => {
//import mongoClent from 'mongodb';  // Can I put in here?
   const products = mongoClient.db.collection("product").find({}); 
   return {
      props: {
         products,
      },
   };
};

[jensmeindertsma]

Hey @warcraft14115 . The best approach would be to create an API route that fetches this data for you. This API route will then run the server-side logic, and fetch and return the data.This way you don't have to expose your connection string or send the MongoDB code to the client.

You can do this inside getStaticProps if you want, but I recommend the awesome swr library by the Vercel team. You can integrate it with getStaticProps like the example in the documentation so that the data is revalidated client-side.

If you need more help, I'd be happy to write some example code or create a pull request!

[IRediTOTO]

Yep, I tried with API but, we can't build site we use internal api, cuz api need site is running. So I must use query mongo in getStaticProps.
Use SWR will not good for SEO, we need page pre render, right ? :s

[IRediTOTO]

@timneutkens hello! I have an (almost huge) website coming out in next month, and I detected that mongodb connections are not killed, and sometimes I get 3 connections. I am using something similar to this: https://www.mongodb.com/blog/post/optimizing-aws-lambda-performance-with-mongodb-atlas-and-nodejs

Having some kind of "cached" Mongo connection. I am worried now about how this is going to be able to hold on production

Do you have any good advice?

:| I didn't know about this too. But I think connect mongodb will be killed.
So I use
if (!mongoClient.isConnected()) await mongoClient.connect(); //Reconnect to mongo
Without codes above, query will be fall.

[IRediTOTO]

Hey @warcraft14115 . The best approach would be to create an API route that fetches this data for you. This API route will then run the server-side logic, and fetch and return the data.This way you don't have to expose your connection string or send the MongoDB code to the client.

It's fine to do data fetching as explained in the initial post, mongodb will be tree shaken from the browser bundle automatically, e.g. see this demo: https://next-code-elimination.now.sh/

Thank you for this 💯 It will be SAFE, checked by https://next-code-elimination.now.sh/

[rafinskipg]

it's safe, but I am not sure yet if it's going to be able to work well on production. @warcraft14115 you don't have any of those connection issues?

[IRediTOTO]

it's safe, but I am not sure yet if it's going to be able to work well on production. @warcraft14115 you don't have any of those connection issues?

no, it work perfect :| I learned from this https://github.com/hoangvvo/nextjs-mongodb-app
Say no with custom server :D

[IRediTOTO]

#12970 (reply in thread)
Answer here.