{"id":15569598,"url":"https://github.com/patrick91/next-use-client","last_synced_at":"2025-10-10T03:09:02.975Z","repository":{"id":141354715,"uuid":"596544146","full_name":"patrick91/next-use-client","owner":"patrick91","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-02T12:37:34.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-01T02:22:07.236Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://next-use-client.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrick91.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-02T12:22:09.000Z","updated_at":"2023-03-08T22:04:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"99b29ee1-0d7a-449b-8ded-ad150892487f","html_url":"https://github.com/patrick91/next-use-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/patrick91/next-use-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick91%2Fnext-use-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick91%2Fnext-use-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick91%2Fnext-use-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick91%2Fnext-use-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrick91","download_url":"https://codeload.github.com/patrick91/next-use-client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick91%2Fnext-use-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002550,"owners_count":26083417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T17:33:38.641Z","updated_at":"2025-10-10T03:09:02.958Z","avatar_url":"https://github.com/patrick91.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js \"use client\" inside app directory\n\nThis is a small demo of \"use client\". My understanding was that every component\nmarked with \"use client\" would be only loaded on the client side. But this is\ndoesn't seem to be the case.\n\nIf you run this demo, you will see that the \"use client\" component is also\nloaded on the server side, since you can access it by doing an http request:\n\n```\nhttp get https://next-use-client.vercel.app/ | npx prettier --parser html\n```\n\nTrimmed output:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmain class=\"page_main__WunS6\"\u003e\n      \u003c!-- 👇👇👇👇👇👇👇👇👇👇 --\u003e\n      \u003cdiv\u003e\n        \u003ch1\u003e\n          Count:\n          \u003c!-- --\u003e0\n        \u003c/h1\u003e\n        \u003cbutton\u003eIncrement\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/main\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe \"use client\" directive is defined in\n[RFC 0227](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#use-client-directive)\nand states the following:\n\n\u003e When a Component with a \"use client\" directive (similar to \"use strict\") is\n\u003e imported in a \"React Server\" environment its exports gets replaced with a\n\u003e special \"Reference\" object. This object can't be accessed directly in that\n\u003e file but it can be passed into React as if it was a plain component.\n\u003e\n\u003e React, together with the bundler, knows how to send this reference to the\n\u003e client. On the client it's rendered as a Client component. The real file never\n\u003e actually gets imported on the server.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrick91%2Fnext-use-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrick91%2Fnext-use-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrick91%2Fnext-use-client/lists"}