https://github.com/patrick91/next-use-client
https://github.com/patrick91/next-use-client
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/patrick91/next-use-client
- Owner: patrick91
- Created: 2023-02-02T12:22:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-02T12:37:34.000Z (over 3 years ago)
- Last Synced: 2025-03-01T02:22:07.236Z (over 1 year ago)
- Language: CSS
- Homepage: https://next-use-client.vercel.app
- Size: 45.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js "use client" inside app directory
This is a small demo of "use client". My understanding was that every component
marked with "use client" would be only loaded on the client side. But this is
doesn't seem to be the case.
If you run this demo, you will see that the "use client" component is also
loaded on the server side, since you can access it by doing an http request:
```
http get https://next-use-client.vercel.app/ | npx prettier --parser html
```
Trimmed output:
```html
Count:
0
Increment
```
The "use client" directive is defined in
[RFC 0227](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#use-client-directive)
and states the following:
> When a Component with a "use client" directive (similar to "use strict") is
> imported in a "React Server" environment its exports gets replaced with a
> special "Reference" object. This object can't be accessed directly in that
> file but it can be passed into React as if it was a plain component.
>
> React, together with the bundler, knows how to send this reference to the
> client. On the client it's rendered as a Client component. The real file never
> actually gets imported on the server.