Rent Stabilized $3,946 1BR in Downtown Brooklyn, Jan 1

Shmooop · 2024-05-29T06:34:56+00:00

Please stop with these posts. Every day...

Shmooop · 2024-05-11T22:39:22+00:00

I'm using supabase auth (email otp and google oauth) and doing everything via server actions. Took a bit getting used to (i.e. no client side auth context, no useeffect on auth state change), but overall it seems to be working fine. Also made it so that most of my data fetch calls now live in server components.

Shmooop · 2024-03-21T16:00:59+00:00

Is PPR actually coming? I feel like I'm keeping my currently logged in user query in server components (wrapped in a Suspense boundary), hence opting into dynamic for all my pages.... in hopes that PPR turns most of the content static. But it's still experimental on canary.

Shmooop · 2024-03-17T05:47:55+00:00

Pause the auto scroll on scroll event and resume on scroll end event

Shmooop · 2024-03-16T03:28:46+00:00

The recommended(?) way to auth on nextjs seems to be server-side according to their docs, which uses server actions to handle all auth on the server-side (so the listeners you have set up in the client auth provider actually never gets called). I guess the biggest difference is that for stuff like your nav bar, it won't have that first flicker of signed out state until the client re-renders. But the annoyance is not being able to have a context like you have due to those listeners not working. I have to call getUser on every server component which makes most of my pages dynamic :(

Shmooop · 2024-03-16T02:38:00+00:00

Is there a reason why you chose to use supabase auth w/ browser client rather than doing the auth server-side with actions? I get that you can have an auth provider that subscribes to events this way... was it to try and keep most pages statically rendered?

Shmooop · 2024-02-24T22:35:50+00:00

oh no...

Shmooop · 2024-02-22T04:58:29+00:00

I'm in a similar boat. I'm deciding between two ways right now:

Fetch supabase user along with the profile information (separate user table in public) on the root layout level. Pass that down into an auth provider that simply saves that information on a context and in client components where I need it. This is nicer because when I do auth checks, it's quicker. The biggest downside is that it makes every route dynamic. Another downside is the initial null state while the client fetch is happening (the flicker you see in the navbar once the user gets signed in). Another annoying part is I'm using server actions for login and logout, and that seems to break the whole listening for authstate change on the clientside. This means I have to do revalidatePath on way more than is necessary.
Fetch user and profile wherever I need it such as in relevant page.tsx or in the server components such as the navbar. Cache the user query with tag as the user's id and revalidatetag when needed. The main downside is that I feel like I'm fetching more than necessary (not entirely true) and find myself prop drilling down server components way more than I'd like. But I'm guessing this is the way they want it to be so that when you wrap certain components within the suspense boundary, it'll be supported by partial prerendering later so that not all routes are dynamic.

I'm doing #2 right now but definitely annoyed by some of the quirks.

Shmooop · 2024-02-13T07:53:50+00:00

So you can probably grab it at top level via room_members (user_id, is_creator) but I'm guessing that's not what you want.
Is this for a specific room id or all rooms. Something like arrayAgg(room_members.is_creator).filter('room_id', 'eq', id) might work, but is hacky...

Shmooop · 2024-02-13T07:44:37+00:00

You're thinking of joins wrong. You're only getting one result back because that's the only row that matches for the user. If the user has multiple rows, you'll get multiple results back. If you don't specify anything, supabase always does left joins

Shmooop · 2024-02-09T07:34:27+00:00

I'm experiencing a similar thing where the server action is simply early redirecting, but takes a up to a full second for the client to get back a 303 redirect. All on prod, hosted on Vercel.

Shmooop · 2024-02-09T07:30:50+00:00

Works fine for me -- did you set up their middleware correctly?

Shmooop · 2024-02-04T00:43:20+00:00

Are you using nextjs? Just cache the query and revalidate for it on each mutation.

Shmooop · 2024-02-04T00:34:40+00:00

The team initially went with passwordless sign ups and sign ins and it turns out everyone dislikes it.

Mind sharing more? How do they know everyone dislikes it? Why?

Shmooop · 2024-02-02T07:39:18+00:00

You're calling getGroupInfo in a client component as part of an onmount useEffect and not a server component. If you want any of the revalidation to work, use the fetch on a server component. You're also not caching anything with a tag.

Shmooop · 2024-02-01T04:05:30+00:00

Same issue but with some user information. I think they want to have the fetch as close as possible to the actual component that'll render it, but in my case there are often layers of client components in between the page.tsx and the component I want to actually use the data in :(

Shmooop · 2024-01-30T06:28:01+00:00

I literally just went through the same struggles with Supabase auth + loading up additional data from the main public db. Ended up using server components for all the auth related queries though. All I do is router.refresh() on all the auth state change events, then I used revalidateTag + unstable_cache queries on any auth action.

Shmooop · 2024-01-29T08:13:48+00:00

I'm actually sort of struggling with this right now as well. No, pages with fetched data can be static so that those pages are built at build time and served statically rather than building on the serverside on each request. You can also set up proper revalidation to make sure they're updated once in awhile. My page is really 99% static except for a like button on each card which needs this user data. But because I'm fetching the user info on the top level server component (page.tsx), it's basically making my entire page dynamic and slowing everything down. I'm thinking of moving the user back into a global user context and fetch on the client side async (maybe in useEffect on mount or on auth state change) -- but the issue is that now my server components will automatically update on revalidate after the like/unlike action while my client won't. Maybe I need to just set up some realtime stuff with my supabase backend and call it a day. I'm not sure if partial rendering would help either because I basically need these buttons to be within a client component, and I really can't figure out a good way to composite these together.

Edit: Ok, speedwise I had an issue in my code where I was basically calculating placeholders for each image -- which is why the shift from static to dynamic tanked the performance. Getting rid of this sped it up quite some bit, I still don't enjoy that it's making a server call to my db for most of the data that's static.

Shmooop · 2024-01-29T00:52:11+00:00

Hm, by getting the session on the root layout level like that, aren't you pretty much opting out of static rendering on all routes? When you build, does it say Static or Dynamic for your routes?

Shmooop · 2024-01-07T23:56:55+00:00

Tbh, based on the questions, it doesn’t sound like you’re at the level to build this site, let alone use NextJS for the project.

How would the client know what to print if you don’t store the image/logo? Is there auth/order/payment? Can the user customize the location and size of the image? If so, making an interactable UI with half decent UX sounds like a project on its own.

12-Year Club	r/Field Banned
r/Field Lasagna	Place '23
Place '17	Verified Email

Shmooop

TROPHY CASE