I built a chart as a React Server Component

Watch me make my D3 client-side chart server renderable – then use it as React Server Component.

🔗 LINKS

🕐 TIMESTAMPS
0:00 – Intro
0:39 – Version 1: useMeasure
1:30 – Version 2: non-scaling-stroke
3:23 – Version 3: multiple svgs
5:42 – React Server Component
7:09 – Outro

[PauloMenezes]

It's pretty impressive that D3 works on the server out of the box, a library created for the web that doesn't depend on web libraries.

[dsngo]

The fact that you are the only guy sounds so exciting talking about this is amazing in itself. Great content, great video. Already a happy learner on BuildUI. Keep up the good work.

[pranab]

This is amazing stuff. I really like your videos Sam. Thank you.

[itsjustchris]

That's super brilliant! You're a clever cookie. Well done.
I'm absolutely loving moving components to the server now, thanks to nextjs 13. I can totally appreciate you being pumped about making that chart work.
I've only just discovered your channel, and subscribed straight away, keep those vids coming!

[olafviking]

Your content is really great, awesome quality, very clear. Love it ❤️

[ashish_prajapati_tr]

motivated me to learn about building chart component.
Bunch of thanks.

[raymondmichael]

Super cool; I always come to your videos for inspiration and learning.
Thanks 😊

[igrb]

Amazing as always, really like how you're moving this model of using d3 for the compute alone forward. Def can see a future where I'm importing from d3/headless 👀

[AndreasStraub]

This is so impressive 🚀. Thx for sharing

[armandsalle]

Wao this is so impressive 😮 really nice explanation!

[nickolaki]

Great video, would love to see a more in depth video on container queries using tailwind!

[animaltechno]

Awesome and thanks for sharing 🙂
I would like to know one thing.
Is RSC also effective if user want to do many operations on the browser side?

[taylordawson]

How would you add interactivity to the charts while maintaining the react server component?

[drmanhattan]

This was an awesome video and I’m really glad to have found it! I’m still learning about React server components — why does using them prevent the loading flash? Does the browser cache the results instead of having to perform the same computation on refresh?

[sethmckilla]

Awesome video! Always such a satisfying feeling to be able to delete the 'use client' directive 😁
One thing I'm curious about is how you would go about adding tooltips to the graph when hovering over nodes. Is there a way you could nest a client component inside of this one that determines the node you're currently hovering over and display the tooltip? Thanks for the video!

[cedericprivat]

Could you still use Framer Motion to animate the chart on the client or would that not work, since it‘s pre-rendered on the server?

[benazir]

Hey, Sam, how do you insert empty lines without moving the cursor in vim at 1:49?

[Aaron-qyvb]

Hey Sam, what are using to measure in 2:08 ?

[baracjohn]

Awesome! Any chance you have a d3 course in the pipeline

[microspacer]

Can ssr help with rendering thousands of points?