Hacker News Reader

Comment by bastawhiz | Hacker News Reader

This article doesn't mention "event handlers" a single time. Even if you get past the client and server getting out of sync and addressing each component by a unique id that's stable between deploys (unless it's been updated), this article doesn't show how you might make any of these components interactive. You can't add an onClick on the server. The best I can figure, you pass these in with a context?

Ultimately this really just smooshed around the interface without solving the problem it sets out to solve: it moves the formatting of the mail markup to the server, but you can't move all of it unless your content is entirely static (and if you're getting it from the server, SOMETHING has to be interactive).

View on HN

you put interactivity in client components, that seemed pretty clear to me

And you just never have any handlers on the server components? The problem is that if a component is populated with data from the server, it's sending the data down as JSX. Which means that component can't react to interactivity of client components within it. Unless, of course, you draw the line further up and make more stuff client components.

Consider making a list of posts from some sort of feed. If each item in the list is a server component, you can't have the component representing the item be a server component if you need to handle any events in that item. So now you're limited to just making the list component itself a server component. Well what good is that?

The whole point of this is to move stuff off of the client. But it's not even clear that you're saving any bytes at all in this scenario, because if there's any props duplicated across items in the list, you've got to duplicate the data in the JSON: the shallower the returned JSX, the more raw data you send instead of JSX data. Which completely defats the point of going through all this trouble in the first place.

You can...

...have a client component inside the post. For example, for each post, have a server component, that contains a <ClientDeleteButton postId={...} />.

...have a wrapper client component that takes a server components as a child. Eg. if you want to show a hover-card for each post:

    <ClientHoverCard preview={<Preview />}>
        <ServerPost />
    </ClientHoverCard>

https://nextjs.org/docs/app/building-your-application/render...

> props duplicated across items in the list, you've got to duplicate the data in the JSON

I'm pretty sure gzip would just compress that.

It's not really the scope of the article, but what about adding a client directive [0] and dropping in your event handler? Just like that, you're back in a familiar CSR React world, like in the "old" days.

[0] https://react.dev/reference/rsc/use-client

Reply on news.ycombinator.com