4 ms·

Does anyone know if CSS-in-JS and Context support is planned for RSC, or is there a technical limitation which means they’ll never be possible?

sesm 3y ago
For Context support, I think the reason it's not supported is because Server and Client components have different lifetime. In theory they could add something like Server Context, that's accessible only to Server components. For CSS-in-JS, those are all 3rd party libraries, so they need to adapt on their side. For example, `styled-components` uses Context heavily, so they need to re-think their approach. For `css-modules` adapting to Server components looks doable, but requires substantial amount of work.
- satvikpendem 3y ago
  PandaCSS and Vanilla Extract are subsuming styled-components, precisely because that is runtime CSS while the former two are compile time based and so work for the server.
willdr 3y ago
A better name for context is Client Context. On the server can you not just use a pojo?
- djmashko2 3y ago
  If you’re rendering multiple pages concurrently on the server, it’s nice to be able to know, for example, the current user without having to pass it down as a prop through the whole tree. Context is a really nice way to do this.
btown 3y ago
For Context support, https://github.com/vercel/next.js/discussions/42301 https://github.com/vercel/next.js/discussions/42301 isn't promising, and https://twitter.com/sebmarkbage/status/1587615484870098945 https://twitter.com/sebmarkbage/status/1587615484870098945 explicitly suggests you might need prop drilling. I'm really sad that tree-specific context for server components seems to be an afterthought. As the Twitter thread suggests, if you have something that can be used across all the server components for an entire request, you can use the cache functionality or rely on Next's URL parameters. But if you've relied on Context as a way to let deeply nested components access some kind of business logic that's specific to only a part of a rendered page, and if you want/need those components to be server components, you'll need to switch to explicitly drilling the props through.
satvikpendem 3y ago
For CSS-in-JS/TypeScript, PandaCSS and Vanilla Extract are both good options.

sesm 3y ago

For Context support, I think the reason it's not supported is because Server and Client components have different lifetime. In theory they could add something like Server Context, that's accessible only to Server components. For CSS-in-JS, those are all 3rd party libraries, so they need to adapt on their side. For example, `styled-components` uses Context heavily, so they need to re-think their approach. For `css-modules` adapting to Server components looks doable, but requires substantial amount of work.

satvikpendem 3y ago
PandaCSS and Vanilla Extract are subsuming styled-components, precisely because that is runtime CSS while the former two are compile time based and so work for the server.

willdr 3y ago

A better name for context is Client Context. On the server can you not just use a pojo?

djmashko2 3y ago
If you’re rendering multiple pages concurrently on the server, it’s nice to be able to know, for example, the current user without having to pass it down as a prop through the whole tree. Context is a really nice way to do this.

btown 3y ago

For Context support, https://github.com/vercel/next.js/discussions/42301 https://github.com/vercel/next.js/discussions/42301 isn't promising, and https://twitter.com/sebmarkbage/status/1587615484870098945 https://twitter.com/sebmarkbage/status/1587615484870098945 explicitly suggests you might need prop drilling. I'm really sad that tree-specific context for server components seems to be an afterthought. As the Twitter thread suggests, if you have something that can be used across all the server components for an entire request, you can use the cache functionality or rely on Next's URL parameters. But if you've relied on Context as a way to let deeply nested components access some kind of business logic that's specific to only a part of a rendered page, and if you want/need those components to be server components, you'll need to switch to explicitly drilling the props through.

satvikpendem 3y ago

For CSS-in-JS/TypeScript, PandaCSS and Vanilla Extract are both good options.