Error when using useState on SSR

Answered

Reddish carpenter ant posted this in #help-forum

Reddish carpenter antOP

2023-12-09T08:52:54.000Z

Hi there!

So I'm using drizzle/prisma for my app, and I have queries written to communicate with the database.

It all works great, but I was about to add a a useState, useEffect and I got a 'net' issue, and once I installed that I got this issue..

./node_modules/postgres/src/connection.js:2:0
Module not found: Can't resolve 'tls'

And now the question is, am I using NextJS13 wrong?

How am I supposed to SSR the data, and then use things on client side?

My code isn't anything complicated:

async function PagesIndex() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalPage, setModalPage] = useState({})

  const pagesList = await getPagesList()
  console.log("hi", pagesList)
  return (

And getPagesList is drizzle ORM query to postgree.

export async function getPagesList(pageCategory  = 1, medium = "desktop", theme = "dark") {
  const query = db
    .select().from(pages)

Answered by Ray

make it client component and import it to the modal

View full answer

195 Replies

American black bear

2023-12-09T08:55:21.000Z

@Reddish carpenter ant Is the PagesIndex client page or server page?

If it is client page, you can't query data directly inside the client from db.

@American black bear If it is client page, you can't query data directly inside the client from db.

Reddish carpenter antOP

2023-12-09T08:57:26.000Z

I had to make it client side because of useState, but then that is a bit counter to SSR, isn't it?

I though you can do SSR, and then use client side functions like useState etc?

otherwise, am I meant to create an API route for all of my queries? That seems bit weird

How would you SSR first results, and the other ones client side?

Maybe I'm misunderstanding some concepts here

American black bear

2023-12-09T08:59:36.000Z

No, you can't do both, for client-side functionality, you need mark component as client component by adding use client at the top.

What you can do is, fetch data in the server component (all components are server components by default). Pass those data to it's child components where, and in those if client side functionality is needed, you can mark those child components as client component.

Reddish carpenter antOP

2023-12-09T09:02:17.000Z

So just basic API route and it will pre-fetch the first batch on the server? Or all is on client when we use use client, nothing happens on the server at all?

I might be thinking about this the wrong way xd

if you work on dynamic ish webapps, where does SSR comes into play? versus API calls to get data?

Im creating something lke dribbble basically

@Reddish carpenter ant So just basic API route and it will pre-fetch the first batch on the server? Or all is on client when we use `use client`, nothing happens on the server at all?

American black bear

2023-12-09T09:03:30.000Z

IIRC, Fetching data directly is different from calling API Routes. You call api routes from client component. But in server components, you are already in server, you directly fetch data from DB. Like a node server.

Reddish carpenter antOP

2023-12-09T09:03:31.000Z

which means a lot of 'use client'

American black bear

2023-12-09T09:03:51.000Z

Leme share an example, it may help to understand clearly.

Reddish carpenter antOP

2023-12-09T09:03:57.000Z

Hmmm I think I get the idea with this

but exaple woul dbe appriciated ðŸ˜„

@American black bear IIRC, Fetching data directly is different from calling API Routes. You call api routes from client component. But in server components, you are already in server, you directly fetch data from DB. Like a node server.

Reddish carpenter antOP

2023-12-09T09:04:38.000Z

So instead of doing an extra API call, and take an extra step, for the first fetch it fetches things right before sending stuff to the client so its faster right

@Reddish carpenter ant So instead of doing an extra API call, and take an extra step, for the first fetch it fetches things right before sending stuff to the client so its faster right

American black bear

2023-12-09T09:04:51.000Z

Exactly

Reddish carpenter antOP

2023-12-09T09:05:32.000Z

So need to fetch directly to the server component(to optimize first load), and later use an API to have say a 'load more' button right?

American black bear

2023-12-09T09:06:14.000Z

For example, Let's take the product page.

-> ProductDetails.tsx (Server component) <- fetch the data, and render content that is not functional like product description, price, text stuff.

Now, if you have a button, which adds the product to the cart, or adds a review. What you need to do is make it a different component.

-> AddToCart.tsx (Client component). You pass the data to this, like product ID.

Now you mark this component as a client component, now you can do useState, useEffect, onClick, etc. In this, you can do client stuff.

Hope you understood, there are other ways to implement this functionality, using server actions, but I suppose it's a different thing.

Hope this helps

@American black bear For example, Let's take the product page. -> ProductDetails.tsx (Server component) <- fetch the data, and render content that is not functional like product description, price, text stuff. Now, if you have a button, which adds the product to the cart, or adds a review. What you need to do is make it a different component. -> AddToCart.tsx (Client component). You pass the data to this, like product ID. Now you mark this component as a client component, now you can do useState, useEffect, onClick, etc. In this, you can do client stuff. Hope you understood, there are other ways to implement this functionality, using server actions, but I suppose it's a different thing. Hope this helps

Reddish carpenter antOP

2023-12-09T09:07:44.000Z

What if you have a product list, and when you click, it opens a modal, to where you can do things on the modal? and also filter the product list

but I think I might know what to do for my component, that requries a bit different structure than pure react I think? so need to work a bit different in nextjs13+? I suppose it can get tricky at times?

@Reddish carpenter ant but I think I might know what to do for my component, that requries a bit different structure than pure react I think? so need to work a bit different in nextjs13+? I suppose it can get tricky at times?

American black bear

2023-12-09T09:09:07.000Z

I agree, Next.js 13 is tricky.

@Reddish carpenter ant What if you have a product list, and when you click, it opens a modal, to where you can do things on the modal? and also filter the product list

American black bear

2023-12-09T09:10:38.000Z

You fetch the product list in the server component. map through the data, and pass the data to the Product component (client). In that client component, you can show a modal.

About Filtering, I might have a video that might help, lemme search it real quick.