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...