Comments (7)
Client components still run on the server.
https://nextjs.org/docs/app/building-your-application/rendering/client-components
Client Components allow you to write interactive UI that is prerendered on the server and can use client JavaScript to run in the browser.
The term "client component" means that it also runs on the client, not that it just runs on the client exclusively.
Please read the documentation before opening issues like this to make maintainer's life a bit easier π
from next.js.
As the above comment says, client components are still SSR'd, they are just the components you have used up till now, the new thing are server components, which only render server side, and never share their JS with the client.
* [Why do Client Components get SSR'd to HTML? reactwg/server-components#4](https://github.com/reactwg/server-components/discussions/4)
I can understand the confusion, as the name itself has some weight to it, but also, tech-influencers have spread this misinterpretation.
Your reply donβt solve my problem
This is a bug/issue report area, people here focus on narrowing down reports into a reproducible demo, or a non-issue result. For other matters, we should use the discussions tab.
from next.js.
Here you go: https://stackblitz.com/edit/github-zvszab?file=app%2Fpage.tsx
from next.js.
As the above comment says, client components are still SSR'd, they are just the components you have used up till now, the new thing are server components, which only render server side, and never share their JS with the client.
I can understand the confusion, as the name itself has some weight to it, but also, tech-influencers have spread this misinterpretation.
from next.js.
Hi,
The thing is that, your component render pass should be pure, that's like the main React "rule".
Reading from the window object like that, is not pure, the width might change between renders, so to speak.
So what you can do is:
- Defer to client side rendering
- See Item 6 and 7 here, https://demystifying-rsc.vercel.app/
- Show fallback UI and then synchronize in the client with
useEffect
oruseLayoutEffect
- Try to use pure CSS, in your case you can use CSS custom properties, CSS Vars, and 100vw to achieve the same, I think
Also, reading from the window.innerWidth
property, causes reflow, https://gist.github.com/paulirish/5d52fb081b3570c81e3a#getting-window-dimensions, which under certain conditions, can be a performance bottleneck.
from next.js.
Here you go: https://stackblitz.com/edit/github-zvszab?file=app%2Fpage.tsx
Thanks bro and sorry for opening an issue and bothering you all because of my carelessness.
from next.js.
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
from next.js.
Related Issues (20)
- It hasn't been resolved for several months. accesstoken reissue issue
- Error and reload during HMR with MUI HOT 1
- Error and reload during HMR with MUI
- Incomplete data from Link prefetch HOT 1
- Server action called from client component is invoked but return data is always undefined (even though network response has data in it) HOT 12
- Failed to build standalone using instrumentationHook HOT 1
- Next incorrectly infers static builds when using `Promise.prototype.catch` on the dynamic action in a `Page`
- Docs: how to configure lightningcss
- React and Node.js it's time to to declare a final response to these issues once and for all related TypeError's there has been enough issue posts about it already
- Your Team encountered an unknown problem. Please reach out to our support team for details. Learn More HOT 2
- generateStaticParams globalThis (global) singleton problem
- New page is called when intercepting routes are terminated before the server action is completed
- Hot-reloading doesn't work for a newly created directory / files. HOT 1
- middleware request.cookies.has() fails when route is hit via Link HOT 2
- Cannot name a folder "index" inside the app directory.
- Using `revalidateTag()` inside dynamic route handler is unstable HOT 1
- Using `revalidateTag()` inside dynamic route handler is unstable HOT 2
- Cannot use import alias if route path starts with period
- Dynamic `import()` function usage behaves strangely, prevents server-only code HOT 1
- Client error with development message on PRODUCTION. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.