Drizzle client side vs server side?
hi can someone help explain to me a bit about drizzle? as far as i can tell, its doing client side api calls and requires me to use NEXT_PUBLIC env variables which isnt secure right? is it possible to put my drizzle calls into server and therefore not need to expose the env variable to browser?
21 Replies
You don’t use it on the client?
ideally i would like it to be on the server, but when using the db connection with envinronment variables, it only works when using NEXT_PUBLIC in front of the env variables, thus exposing it to browser and allowing the call to go through. i have tried to run it on the server by using "use server" or placing it in the server folder but it still wont pick up the env variables.
in all the documentation it all seems like drizzle runs server side and not once does it mention needing to do next_public so im confused on where i went wrong. i already wiped my changes and tried to follow the startup guide on drizzle github again and its the same outcome. my db calls are only being called client side
No clue without seeing where you fucked up
it jsut occured to me after all this time that im using planetscale mysql which is stated as "worlds most advanced serverless mysql platform". this sounds like it may be an issue. i wasnt exactly sure if i could connect thru a different means so i will try mysql2 and see
That’s not a problem …
Just use documentation
i tried once again to use it but even just this single page contains my issue. the connection that grabs the env variables just cant see the env variables unless i make them public or hard code them.
the folder its in is currently here
i tried to even take some inspiration from other people who created example applications for this, but all seem to never run into this issue with env variables
does "getServerSideProps()" fix anything in this case?
@Turtle Are you using T3 app and trying to access env var on server side? You usually can not access env var on server side, but with T3, you can. Check out Theo's chirp video around 5:40. You need to define it in env.mjs.
i did include it in env.mjs but i tried to add in the server section but still didnt work. the environment variables can load server side/client side seperately and without problem. i just dont know if the way/place im calling this db connection that grabs the env variables is why it is unable to see the server side variables
it feels like im calling this db connection client side, but according to documentation and intent, i was trying to get it to run server side
looks like you are accessing env var by calling "process.env.DATABASE_USERNAME", but shouldn't you be calling "env.DATABASE_URL" with import from "import { env } from "~/env.mjs""?
interesting. i didnt notice that. however by trying this gives me this error
which i guess supports the idea that im calling these variables in the wrong area
as before, the schema that contains the env variables is in src/server/db/schema.ts i uploaded a pic of it earlier in this thread, am i allowed to declare the db item, schema, and export the function all in that 1 file? does it flag it as client side for any reason? i even tried to take the db connection into its own file and export that but even just this file is giving same error for trying to access the env variables. will add a pic of the whole file
I've never used "drizzle orm" before, so not sure what could be the issue, but it's possible that drizzle orm is available on node.js server, however it does not support next.js server folder.
the more i look into it, the more im realizing this is a problem with my project. im using next 13.2.1.
something im noticing is that it feels like everything is client side. using the chirp app that Theo made as an example, mine similarly does not call "use client" on any of the components, which is making me think that i should try to declare this db connection as a server component but idk how. the only thing that comes up is how next defaults to server and only views it as client when saying "use client", but this isnt my case. is it something with next 13.2.1? im not using app dir so im considering going to next 12. is that a reasonable idea?
with next 13, everything is considered to be server side component unless you add "use client". If you are using next 13, I think you could consider using next.js 13, server actions instead. I found this repo, so I think you could give it a try? Using next 12 might be a good idea, but I feel like you are getting this error because you are accessing env var using "env.DATABASE_URL" rather than "process.env.DATABASE_USERNAME", so drizzle orm is thinking the file in on client side. But then again, I never used drizzle orm before, so I can not give you a clear answer in this case... https://github.com/raymondkneipp/next-todo-app
with node.js server, you use "process.env.DATABASE_URL" with import of "require('dotenv').config()" and access env var. but I'm not sure if using next.js 13, server actions and accessing env var with "process.env.DATABASE_URL" will throw an error or not.
gave it a shot and it did not result in any changes. i enabled server actions, declared "use server" in the file and it still claimed i was trying to get server side env variables in client, which also didnt work when i switched back to process.env. when using prisma, it was for sure using server side calls, but other than that, i cant get server side to work anywhere in my project. i tried changing to 13.1 and 13.4 as well. theres gotta be something im missing btu ive been stuck on this for multiple days and i find it hard to believe im the only one with an issue like this but cant find anything else about it online
check this out. this is a demo that was created by vercel using next.js and drizzle. schema file is located under lib, but i think it can be at the top directory. i too feel weird that the schema file is located at the top dir instead of server folder. TypeORM is my favorite orm by the way.
In Theo's tut video, prisma schema is also at the top directory, so try moving the schema file outside of server folder and use "process.env" to access env var instead. first of all, try cloning their repo and run it locally to see if you can implement it there and apply it to your production build if it works.
https://vercel.com/new/templates/next.js/postgres-drizzle
https://github.com/vercel/examples/blob/main/storage/postgres-drizzle/lib/drizzle.ts
with next.js, env vars are not accessible by the client. it should be loaded into node.js environment, so no need to worry about client accessing them. if you want to expose environment variables to the client with next.js, you need to use "publicRuntimeConfig" inside next.config.js file.