Using Drizzle SQLite in a Next.js server component gives error that suggests client side execution
I attempted to do a basic implementation in a Next.js 14.1 app using Drizzle (v0.29.3) and @libsql/client (v0.4.3) based on https://orm.drizzle.team/docs/get-started-sqlite#turso and get the following error on my local machine when I start
next dev.
Drizzle ORM - next gen TypeScript ORM
Drizzle ORM is a lightweight and performant TypeScript ORM with developer experience in mind.
19 Replies
This specifically seems to happen when a client component includes a server component that makes a Drizzle call.
Sample repo: https://github.com/jschuur/drizzle-turso-test
Remove the
use client from page.tsx and it runs fine.
The error above shows up in both the browser and the terminal, which suggests that despite being made in a server component, it's running in the client?
Even if I swap out Turso's @libsql/client with better-sqlite3 I get an error about the fs module suggesting yet again something is being run on the client side.
However, if I remove any Drizzle call from the ListSurvey server component and just use a hardcoded array, I get no error and it definitely ran on the server.
I don't know under what circumstances a server component might still run code in the browser, but this looks like it might be related to Drizzle?GitHub
GitHub - jschuur/drizzle-turso-test
Contribute to jschuur/drizzle-turso-test development by creating an account on GitHub.
Eventually the results of a server component get rehydrated somehow, right? Could that be related?
Same thing when I use Drizzle && Postgres. I'm starting to wonder if Drizzle works in a server component at all. (Next.js app directory)
it works because i've used it in my project. have a look at my code -> https://github.com/deadcoder0904/next-14-lucia-v3-sqlite-drizzle-conform-zod-email-verification-otp-server-actions
GitHub
GitHub - deadcoder0904/next-14-lucia-v3-sqlite-drizzle-conform-zod-...
Next 14 + Lucia v3 + SQLite + Drizzle + Conform + Zod + Email Verification using OTP with Next.js Server Actions & Resend - deadcoder0904/next-14-lucia-v3-sqlite-drizzle-conform-zod-email-v...
used it in server actions as well
my other project used it as api routes. this one has 2 branches so one uses turso & other uses sqlite -> https://github.com/deadcoder0904/next-13-lucia-auth-drizzle-turso-sqlite-magic-link
GitHub
GitHub - deadcoder0904/next-13-lucia-auth-drizzle-turso-sqlite-magi...
Simple Demo of Lucia Auth using Drizzle ORM, Turso Tech (SQLite) & Resend (Transactional Emails) to make Magic Link Authentication work - deadcoder0904/next-13-lucia-auth-drizzle-turso-sqli...
except it uses lucia v2 which is a bit harder than lucia v3 but you probably dont wanna see lucia either. you wanna make drizzle + turso (or sqlite) work which works
Hey @joostschuur, so I think this might be more due to confusion around client and server components
When you import a “server” component into a “client” components file, you essentially cross over the threshold into “client”-land from that point on (in the import tree) and any code imported is then bundled up and also run on the client. The reason removing “use client” fixes things is because it removes the “client”-land transition and keeps your code running on the server only (which seems like what you want?)
Assuming in your actual project you might have some "client" code you're trying to run on the page, and just want to inject some "server" code somewhere, 1 approach is to use composition to put the server component inside the client component - Example: https://github.com/jschuur/drizzle-turso-test/pull/1
A second way to handle this might be to fetch data in the "page" server component and then pass it to other components via props to handle the display logic (NOTE: data can be passed to either server components OR client components so long as it’s serializable) - Example: https://github.com/jschuur/drizzle-turso-test/pull/2
GitHub
Alt approach - passing data via props by IsaiahByDayah · Pull Reque...
This approach keeps the data fetching inside the "page" server component and passes the data to <ListSurvey /> to handle displaying it. Note, in this case both the page and <List...
In either case, the reason youre running into the error and what you want to avoid/be aware of is importing what should be server-only running code into a client component. There are ways to do it (such as with server actions and
"use server", but for most situations you can avoid it by refactoring your components / data-fetching. Happy to try and explain things a bit more if you're still running into issues but I also think the next docs might be a good place to learn recommended patterns too!Rendering: Composition Patterns | Next.js
Recommended patterns for using Server and Client Components.
@Isaiah Smith This was all super useful, thanks. I thought I understood server components but I guess I didn't.
The way you explained the importing/bundling aspect helped me understand the problems and why passing the server component in as children props helps.
Thanks again for taking the time to elaborate on this. Going to do some more reading on what happens under the hood, especially in Next.js 14.
Also, thanks for pointing me to your example, @deadcoder0904!
No problem, glad I was able to help!
in video format https://www.youtube.com/watch?v=9YuHTGAAyu0&pp=ygUXbmV4dGpzIGNsaWVudCBjb21wb25lbnQ%3D
ByteGrad
YouTube
Server Components in Client Components?? (React / Next.js)
How to put server components inside client components without turning those server components into client components...
👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: https://bytegrad.com/courses/professional-css
👉 Email newsletter (React + Next.js course out soon!): https://ema...
Piyush Garg
YouTube
NextJS 14 Trick I bet you didn't Know 🤯
Hey Everyone, In this video, we'll see a cool trick of NextJS 14 to understand how Server and Client components actually work and how you can compose both of these.
Master NextJS 14 https://learn.piyushgarg.dev/learn/nextjs-14
Full Stack Twitter Clone https://learn.piyushgarg.dev/learn/twitter-clone
Master Docker https://learn.piyushgarg.dev/le...
It always fascinates me to hear Indians mix English and Hindi like this. I grew up in Germany and you'd see the parents talk to their kids in Turkish and the kids speak German back, but this is different. My Indian flatmate used to do this on the phone too.
I have the sudden urge to go down a rabbit hole and read up on how this evolved (spoiler alert: colonialism?) and the modern psychology behind it. But I have work to do!
I'm working on a site that indexes dev videos (https://beta.learnbyvideo.dev/), so I come across this a lot where the video title is English, but the video will be primarily what I presume is Hindi.
yeah its known as hinglish. but its good for videos like this. not that my english is bad but his docker video in english/hindi (mostly hindi) was easy to comprehend. plus hindi is commonly spoken so much bigger audience as india has huge population. i think we surpassed china? thanks to their 1-child policy until 2016.
that is definitely a cool idea. a feature request: ask visitors to upvote their favorite (recommended) channels like product hunt. can be stored in sqlite.
like i know a few youtubers who are rad at explaining things with analogies to the simplest levels. like this guy above or fireship or webdevcody
and it does show better results lol -> https://beta.learnbyvideo.dev/?q=system+design
bdw just found this & you might like it -> https://markus.oberlehner.net/blog/your-own-vector-search-in-5-minutes-with-sqlite-openai-embeddings-and-nodejs/
Your Own Vector Search in 5 Minutes with SQLite, OpenAI Embeddings,...
Learn how to build a powerful search experience using SQLite, OpenAI embeddings, and Node.js by understanding the concept of Vector Search and text embeddings.
Thanks! The original idea for the site was to produce community managed shared playlists of content that could help people find the right combination of videos for specific use cases.
Like '5 Videos to Really Help You Understand Server Components' 😉
I'm going to start looking at strategies for search and I also want to start using AI to build category tags. Will check that article out too. Big work project keeping me busy right now...