5 ms·

The RFC, which explains what these are without a video: https://github.com/reactjs/rfcs/blob/bf51f8755ddb38d92e23ad415fc4e3c02b95b331/text/0000-server-component

The RFC, which explains what these are without a video: https://github.com/reactjs/rfcs/blob/bf51f8755ddb38d92e23ad415fc4e3c02b95b331/text/0000-server-components.md https://github.com/reactjs/rfcs/blob/bf51f8755ddb38d92e23ad4...

tolmasky 6y ago
Thank you, I clicked around everywhere trying to find something with a written explanation.
- simonw 6y ago
  Same here - I will invest a great deal of effort in not having to watch a video, which increasingly makes me feel at odds with a large swathe of the engineer community. Principal Skinner: Am I so out of touch? No, it's the children who are wrong.
  - brundolf 6y ago
    I don't mind watching a video for a deep-dive, but I don't want to scan through a 60 minute video looking for a tl;dr
  - visarga 6y ago
    On the plus side it's a pleasure to watch Dan Abramov's videos. I always feel I got a bit smarter afterwards.
    - danabramov 6y ago
      Thank you for kind words! I felt very self-conscious about this one because there was no audience and recording at home was a lot harder than I thought. So it's nice to hear that you liked it.
      - smhmd 6y ago
        I thought you did a fantastic job, too.
      - thiht 6y ago
        Agree with the others, you're great at this. I don't like the video format, but yours are always very enjoyable.
intricatedetail 6y ago
I had a quick look and that seems very convoluted. How do you decide which jsx goes to server and which to the client? Do you need to maintain jsx in both files? How to avoid duplication of code?
- brundolf 6y ago
  I haven't worked with server-side React, but my understanding is that you can parameterize a component to go one way or the other in a given context. The main value proposition (vs traditional server-side templating) is code-sharing
  - intricatedetail 6y ago
    Thank you, I need to read more about that. Sounds promising.
    - brundolf 6y ago
      Also worth noting: versions of this kind of thing have been around for years (see Next.js for a prominent example). It's unclear to me precisely how this announcement improves on the existing status-quo
      - danabramov 6y ago
        I really recommend watching the talk and the demo for those who didn't. It's hard to convey the nuance without seeing it. If you want to skip the talk itself, just focus on the demo (timestamp 11:56). Server Components are very different from what Next.js does today (traditional SSR). Here's a few differences: * Server Components code is never sent to the client. By comparison, with traditional SSR all of the component code gets sent to the client anyway in the JS bundle. * Server Components let you access the backend directly from anywhere in the tree. In Next.js, you can access the backend inside getServerProps(), but that only works at the top level page level, which means componentization is very limited. E.g. random npm component can't do that. * Server Components can be refetched without losing the Client state inside of their tree. Because the primary transport is richer than HTML, we can refetch a server-rendered part (e.g. a search result list) without blowing away the state inside (e.g. the search input text, focus and selection). That said, it's not a dig at Next.js -- the whole goal is to enable Next.js and similar frameworks to be much better. Happy to answer specific questions!
tomduncalf 6y ago
Thank you! I have very little patience for information delivered by video, it feels so inefficient compared to text in a lot of cases
- danabramov 6y ago
  Overall I agree with you (I'm the same) but some things are very hard to convey without seeing them in practice. Like I replied in the other comment, for those who don't want to watch the whole video, you'd still get a lot out of watching the demo (starting at 11:56).
  - tomduncalf 6y ago
    Thanks Dan, sorry I missed your reply. Will check out the demo - sounds like a great new feature which I’m sure took a huge effort, so congratulations on the unveiling! Look forward to being able to use it :)
swyx 6y ago
in case it helps anyone I went thru and timestamped the talk video and extracted some bits i figured worth emphasizing: https://twitter.com/swyx/status/1341124408060985345?s=20 https://twitter.com/swyx/status/1341124408060985345?s=20

tolmasky 6y ago

Thank you, I clicked around everywhere trying to find something with a written explanation.

simonw 6y ago
Same here - I will invest a great deal of effort in not having to watch a video, which increasingly makes me feel at odds with a large swathe of the engineer community. Principal Skinner: Am I so out of touch? No, it's the children who are wrong.
- brundolf 6y ago
  I don't mind watching a video for a deep-dive, but I don't want to scan through a 60 minute video looking for a tl;dr
- visarga 6y ago
  On the plus side it's a pleasure to watch Dan Abramov's videos. I always feel I got a bit smarter afterwards.
  - danabramov 6y ago
    Thank you for kind words! I felt very self-conscious about this one because there was no audience and recording at home was a lot harder than I thought. So it's nice to hear that you liked it.
    - smhmd 6y ago
      I thought you did a fantastic job, too.
    - thiht 6y ago
      Agree with the others, you're great at this. I don't like the video format, but yours are always very enjoyable.

intricatedetail 6y ago

I had a quick look and that seems very convoluted. How do you decide which jsx goes to server and which to the client? Do you need to maintain jsx in both files? How to avoid duplication of code?

brundolf 6y ago
I haven't worked with server-side React, but my understanding is that you can parameterize a component to go one way or the other in a given context. The main value proposition (vs traditional server-side templating) is code-sharing
- intricatedetail 6y ago
  Thank you, I need to read more about that. Sounds promising.
  - brundolf 6y ago
    Also worth noting: versions of this kind of thing have been around for years (see Next.js for a prominent example). It's unclear to me precisely how this announcement improves on the existing status-quo
    - danabramov 6y ago
      I really recommend watching the talk and the demo for those who didn't. It's hard to convey the nuance without seeing it. If you want to skip the talk itself, just focus on the demo (timestamp 11:56). Server Components are very different from what Next.js does today (traditional SSR). Here's a few differences: * Server Components code is never sent to the client. By comparison, with traditional SSR all of the component code gets sent to the client anyway in the JS bundle. * Server Components let you access the backend directly from anywhere in the tree. In Next.js, you can access the backend inside getServerProps(), but that only works at the top level page level, which means componentization is very limited. E.g. random npm component can't do that. * Server Components can be refetched without losing the Client state inside of their tree. Because the primary transport is richer than HTML, we can refetch a server-rendered part (e.g. a search result list) without blowing away the state inside (e.g. the search input text, focus and selection). That said, it's not a dig at Next.js -- the whole goal is to enable Next.js and similar frameworks to be much better. Happy to answer specific questions!

tomduncalf 6y ago

Thank you! I have very little patience for information delivered by video, it feels so inefficient compared to text in a lot of cases

danabramov 6y ago
Overall I agree with you (I'm the same) but some things are very hard to convey without seeing them in practice. Like I replied in the other comment, for those who don't want to watch the whole video, you'd still get a lot out of watching the demo (starting at 11:56).
- tomduncalf 6y ago
  Thanks Dan, sorry I missed your reply. Will check out the demo - sounds like a great new feature which I’m sure took a huge effort, so congratulations on the unveiling! Look forward to being able to use it :)

swyx 6y ago

in case it helps anyone I went thru and timestamped the talk video and extracted some bits i figured worth emphasizing: https://twitter.com/swyx/status/1341124408060985345?s=20 https://twitter.com/swyx/status/1341124408060985345?s=20