This is probably one of the best explanations of "use server" and "use client".

@sergeysmyshlyaev9716

Жыл бұрын

Thank you for providing some information regarding what this video is about, because video title and description provide 0 information.

00:00 :00 - Introduction 00:01 :10 - Sliders 00:02 :11 - Parallel World with JavaScript 00:04 :16 - Personal Homepage 00:06 :24 - Song Lyrics Website 00:07 :20 - Conclusion 0:07 :27 - Loading Data into the UI 0:10 :35 - Navigation in the UI 0:13 :15 - Adding Interactivity with Comments Widget 0:14 :45 - Weird URL and React 0:15 :17 - Exposing Functions as Callable 0:16 :19 - Opting into Server Actions 0:18 :00 - Updating Data with Server Actions 0:18 :29 - Expressing Slow Load States 0:20 :45 - Showing Suspense Load in Fallback 0:22 :17 - Annoying Page Reloads 0:23 :14 - Fluid Transitions Between Pages 0:24 :00 - Adding Client-Side Code 0:25 :10 - Making Apps Fully Interactive Instantly 0:25 :55 - Passing Information into the Tree 00:29 :43 - Switching to Real React 00:33 :08 - Integrating Server and Client in React 0:37 :18 - Tracking Actions and Providing Loading Indication 0:38 :40 - Tying Everything Together 0:40 :21 - Making a New Paradigm Work Powered by KZread Chapters youtubechapters.app/?v=zMf_xeGPn6s

There’s a reason why people used to think Dan created React, his understanding of React and his demos are always top notch😄

@apidas

Жыл бұрын

I mean he made redux! obviously we'd think he made react also 😂

@geraldodev

Жыл бұрын

kzread.info/dash/bejne/Z5p7wc6yftircdo.html The one and only Jordan Walke (react creator)

@kikevanegazz325

Жыл бұрын

I’ve got my opinion about the man. The fact that the React doc recommends using a framework feels as a give up, and now he’s taking a more vocal role which I think is what he really wanted, and also the reason why people think he made React, and other people that he made Redux. (It was a whole team and not even his idea)

@varma8669

Жыл бұрын

I literally thought he was the creator until recently and I've been using React for 3+ years. 🤣

@adityatripathi1904

Жыл бұрын

@@kikevanegazz325 No. It means it wants to stay what it was intended to be. Just a library for making usable components.

Amazing job, I still remember html tables and php and I love how much web development have changed, love from Colombia❤

Amazing demo, works flawlessly. Can't imagine the complexity behind to make all of this work

Excellent!!!

The joy I felt when you finally did the server action..... This is coming from a long-time Laravel developer. but still, we can't do that in Laravel with that level of control in a few lines of code. Can't wait to see how it will mature overtime.

When useTransition first came out, I thought it was an animation hook. I was super excited React providing animation hooks :D

@dejibimbola

4 ай бұрын

And I still thought it is until seeing this comment

Oh my god did I have a flashback to my childhood when two minutes in Dan is talking about Sliders. That darn squeaky fence.

I like that this was rough around the edges, but still achieved in showing the power of moving the boundary of server and client.

It looks like “React on Rails” for me. Presentation with windows XP, IE and this old-school site with running stings is awesome 😎 Thanx Dan❤

DAN is awesome. He made it really nice.

Turns out learning PHP early on wasn't a bad deal for so many web developers going forward, in the next five or so years.

@AttilaKerekesMe

Жыл бұрын

this

@dugger8439

Жыл бұрын

I think it is hilarious how we go in circles when it comes to web technologies. We went from php to mvc apps to api + client apps to microservices and then back to monolithic apps with newer frameworks like next js, and now going back to php with a shiny new wrapper lol

@tamal

11 ай бұрын

Yeah, classic PHP and ASP are making a roaring comeback. We are back to the 90s.

WIndows XP really throws me back to the past memories

This talk should be named "Dan trying to convince Remix OSS maintainers to integrate RSC"

The Windows XP desktop was just awesome !!! haha

It looks cool, could the page updater shim that was added to make internet explorer update the page asynchronously be added to the tor browser safely? Tor and i2p are both serving data to browsers with client side Javascript disabled.

Hey Dan! Thanks for the demo! Don't let the negativity of some people in the comments ruin your day. The demo was cool, and it clarified some things for those of us who care.

So many haters. Awesome presentation. Dan did a great job explaining how React and Remix solve fundamental issues with the browser, server, and internet.

Thanks for this talk, Dan. It cleared out lot of confusions I had with server components. One question though, I'm wondering what's stopping automating the process of injecting server code into client code and wise-versa instead of having to explicitly mention 'use-client' or 'use-server. I would like to hear your thoughts on this. I hope future versions of React automate this and lessens the developer errors.

@mariossimou2635

Жыл бұрын

That's something that the bundler needs. Unfortunately, the existing bundlers are not that smart, so we need to explicitly set those annotations and tell them on which side each component/code is running

cool demo

He had me the moment he referenced Sliders 😅

Anyone has the link to the repo?

Hey Dan The comment section mostly ugly, but the ideas and solutions that you presented here makes much sense to me. How I saw it: the idea behind this paradime - to empower the usage of web primitives and server-rendering in parts of web app where it's sufficient, while keeping full power of all the unique React features such as Suspense/Concurrency for dynamic parts. And what's most important to have unified runtime(framework / mental model) for both client and server sides of the app. What we saw on demo is fully interactive server-rendered app with absolute minimum of javascript, but with powerful primitives for handling loading states, suspending parts of UI, async server actions and seamless binding data between server & client out of the box, without writing single line of server-framework code. Isn't it impressive? I'm sorry if my language wasn't entirely clear, but I hope you get the point.

Interesting talk... But to make a client/server boundary like that, wouldn't you need a custom router/bundler anyway? Also, any links to the code? :D

@lutfiikbalmajid

Жыл бұрын

but, framework handle all that.

Nice Talk Dan. As a regular app developer, initially I thought SC is going to be a huge mess. Now the idea of server components started making sense to me. Keep innovating, keep discovering new layers of React. As usual, *Let everyone 'React' first and 'Adopt' later.* Honeypot - prepare notes for part 2 🤗

Where can we get source code of this demo?

thanks

Let's hope that Remix will decide to also adopt React Server Components after this talk.

@mdmathewdc

Жыл бұрын

Of course, they will not - The creators of Remix are egomaniacs!

@coldestbeer

Жыл бұрын

@@mdmathewdc what framework have you created?

@mdmathewdc

Жыл бұрын

@@coldestbeer Remix

@coldestbeer

Жыл бұрын

@@mdmathewdc i would like to apologize

I don't quite understand what he changed for 6th question, I only saw the change from 'server-react' to 'fake-react' in a json file, what's that?

I don't understand why the background theme changed on the layout. The page uses a db.await to get the theme on the server. The client component calls a server action to update the data on the db. Is the page aware of the db update hence the refresh? Is there something I'm missing?

@denniscual4618

Жыл бұрын

The page is not aware on the db update. Although you need to tell the RSC to reload the page. This is abstracted inside the db object.

@itakpeemmanuel5863

Жыл бұрын

@@denniscual4618 thanks. Like a full reload with router?

@denniscual4618

Жыл бұрын

@@itakpeemmanuel5863 yes. Its like refetching an html document. But with RSC it returns a json-like format, jsx tree, to still persist the DOM state. In RSC, the routing is server-centric. Server is aware about the routing. This is the reason why you can send jsx tree. Unlike with typical React app, e.g create-react-app, which is more on client-centric.

Common Dan, everybody in React world knows you! You do not need to be so shy in front of us :)

My passion is to create User Interfaces!

what code editor is used here?

@fun2rideadventure

Жыл бұрын

it looks like sublime text editor .... but webstorm is better ...

yea looks great for certain scenarios the people wondering about the point probably never had the problem rsc tries to solve

What text editor is he using?

@BenjiFriedman

Жыл бұрын

looks like SublimeText

I just noticed that he is using sublime text haha

@justanotherdumbnigga-vd6rd

Жыл бұрын

i feel like their live preview for html and css is superior to others

I don't understand why do we need server actions? Not every app will connect frontend server directly to database.

@srenhyer3895

Жыл бұрын

Good question. In the past we went from monolithic apps to microservices and bffs, so why do they keep highlighting this feature? Perhaps the super pragmatic devs who doesn't care about proper architecture see server actions as an opportunity to take a shortcut and use it with direct database access. However, I think it's a lot more viable if you see server actions as a replacement for the BFF pattern that has snuck in lately, to help offload business logic and remove complexity from the browser and frontend code. So to my understanding server actions is an alternative to BFFs - not microservice API's with direct db access.

That Sliders reference! I loved that show, but sadly it got worse and worse over its seasons 😢

Доклад зачётный, спасибо. Представляю сколько магии там с бандлингом и сплитингом :)

Please centralize this div for me kkkkk 😢😢😢

Always bet on React

@Sammi84

Жыл бұрын

There was a time people would have said that about jquery. Times change.

@sergeydiachenko1429

9 ай бұрын

If React could do something good, it wouldn't need Remix

@cold_ultra

9 ай бұрын

remix does uses react though?

Uh... why does the video's description section say "Backstreet's back" but nothing else? Actually its a little creepy tbh.

@t4ngen7

Жыл бұрын

server side rendering reference?

react went a little too far... react is trying to solve... not listening and helping... from class to hooks good... but next is just a awful. a good company, selling a good product.

I have extracted for you the key points of the speech, do not thank: am, hm, you know, ya, ah, aah, so, you just, you know, haaa, like, aam, aa, ya, oh, ya, I'm I'm I'm, like, ya, you know, aaar

oh no! I had just uninstalled sublime..

oh man.. not another hype.

This type of thing is what is making React much more of a chore. Dan may be great with it, but the React concept overall is just meh. Fortunately new options are emerging.

@flapstones

Жыл бұрын

why's it making it a chore?...if anything its making everything easier, thats the point

@kevin00898

Жыл бұрын

I wish you were right, but other options suck so much more :(

@theLowestPointInMyLife

Жыл бұрын

Solid has great potential but is stuck as part time volunteer thing while low IQ masses plow on with lame duck react

@kevin00898

Жыл бұрын

@@theLowestPointInMyLife Solid is fine, but not nearly as convenient and clear as React is. When the app starts to grow, those signals don't seem so convenient anymore. I'm really glad React team is pushing against the signals hype bs.

@theLowestPointInMyLife

Жыл бұрын

@@kevin00898 almost everyone agrees it's far clearer than react, and fine grained reactivity with signals is the way to go, reacts rerendering is an absurdity in the modern world

He has overreacted, I'm 100% sure

Nothing personal by I never felt comfortable listening to Dan. Which is the exact opposite feeling I have for folks like Rich or Evan. I naturally dispise any hero-ification of developers. I think having a 'following' is an immediate sign for something going very wrong with tech/the framework/whatever. It purely means this guy can come up with whatever and his followers are going to blindly think its a good idea.

@DauntingGecko

Жыл бұрын

Couldn’t agree more. It’s cringy and amateurish

@rewazilol

Жыл бұрын

why would having a following be a sign of something wrong?.. I think you're implying group think, when in reality he just has a good track record and a blog that's helped a lot of people

@Sammi84

Жыл бұрын

@@rewazilol His track record includes Redux and the useEffect dependency array... These have since widely been regarded as a bad idea.

@rewazilol

Жыл бұрын

@@Sammi84 "You either die a hero..." When you build enough things, some of them will be bad. But I'll follow the guy who built redux over the guy who didn't.

@rewazilol

Жыл бұрын

​@@Sammi84 on a less dramatic note... i think part of the reason people follow Dan is because he doesn't oversell himself and he acknowledges his mistakes. He himself says most people shouldn't use redux, and he wrote a full blog article about all the stuff he doesn't know. If you had to pick one person to follow in the community to learn and know what's goin on, he's a good pick. I'm half joking with the batman quote because the OP mentioned "hero-ification" but also it's also kinda true no? The guy makes multiple frameworks and changes that are core to the react ecosystem, writes an amazing blog, and then people give him flak. If you get too popular and do too much, people end up attacking you.

What was the point of this talk? 😅

@Edw9n

Жыл бұрын

he's giving an intro to the new server components thing?

@Sacos0

Жыл бұрын

have you learned english recently ?

@mdmathewdc

Жыл бұрын

@@Sacos0 I'm gonna learn it tomorrow

Когда вы будете в следующий раз называть русских - плохими, помните, что Дэн Абрамов из России)

@kevin00898

Жыл бұрын

В России все - русские? Живёт ли Дэн в России сейчас? Вот именно.

@user-qx7bc9dz5p

11 ай бұрын

@dan_abramov. my view on r*ssia is that i left it, don't consider it my home, and am lucky enough to not need to go ...

@sergeydiachenko1429

9 ай бұрын

А что в нем хорошего? Продвигал Redux, а теперь продвигает это, Redux уже плохо использовать видите ли. Через пару лет и Remix станет плохим. Абрамов - это консистенция всех плохих решений в React сообществе, и он распостраняет методологии на весь мир, а разработчикам приходится использовать эту кашу из решений. Вспомните как React начинал. Легковесная библиотека, которая умеет отрисовывать компоненты. Виртуал DOM и тд. И напару с Flux состояниями она решает все нужды фронтэнда. А сейчас? На главной же странице с установкой React, идет совет сразу его использовать с 1 из 3 фреймворков, один из которых Remix. Все плюсы Реакта на его старте, давно уже не имеют смысла, он оброс кучей дополнительных идеологий, фрэймворков, которые идут в комплекте. При этом нет вразумительной структуры у проектов и стека, который не устареет через пару лет. React это просто распиаренная в свое времялиба, которая постоянно меняет свои подходы и топчится на месте, едет по накатанной, и Remix это еще один временный костыль на React.

А lot of useless words at the beginning...

Svelte is more elegant. But.... Rust, is even better. 🍌💦

@mrgerbeck

Жыл бұрын

Nah... HTML is the best programming language

@invinciblemode

Жыл бұрын

Svelte is not js

@Jaood_xD

Жыл бұрын

Crablang is way better than your pathetic iron oxide 🦀

@__jan

Жыл бұрын

@@invinciblemode react is also not js, but at least svelte doesn't pretend to be, because its special syntax is only used in .svelte files.

@invinciblemode

Жыл бұрын

@@__jan uh what are you on about. jsx compiles to createElement function calls. It’s still JS. Behaviour is predictable if you know JS. While svelte is a totally different language. Given a svelte codebase it’s not clear exactly what the compiled JS will look like.

Only the most diehard React fanbois can sit through this. What a mess.

@DanAbramov8

Жыл бұрын

i think it’s fair this talk was pretty raw. i usually practice for a few weeks but in this case i was a bit overwhelmed - but still really wanted to do this talk - that i finished the demo a couple of hours before the talk and finished the sequencing half an hour before the talk. although i am ashamed of my poor time management skills and overly optimistic estimation for how long it would take to get virtual DOM diffing working in internet explorer six, i think the overall structure of the talk makes sense, and it is not a bad talk. i will try to work it into a blog post at some point or record a cleaner version so that you can enjoy it too.

@zf0666

Жыл бұрын

@@DanAbramov8 The talk was really great and understandable. Thanks!

@justanotherdumbnigga-vd6rd

Жыл бұрын

@Edw9n

Жыл бұрын

@@DanAbramov8 u did great im not even a big react head and I managed to sit through it with flying colors. that guy's prolly a hater

@BSimone95

Жыл бұрын

@@DanAbramov8 For someone like me that wasn't up to date with server react it was still interesting, I'll still have to read docs to learn to use it but it gave me an idea of what's possible. Sure the delivery wasn't great but you tried doing something different with xp / ie and if anything it makes it more relatable to when you're writing your own code and weird stuff goes wrong!

Sad attempt to sell ugly solution to keep outdated framework in business.

@DanAbramov8

Жыл бұрын

what do you find ugly about it? it’s not like there is even an API…

@snnsnn

Жыл бұрын

​@@DanAbramov8 I don't think people understand the problems you are trying to solve. That is why React innovates, others copy. I don't use React but I like the solutions you offer to. Thank you.

@hamzakyamanywa9792

Жыл бұрын

@vnshngpnt You just angry because you did not take the time to understand the talk.

@kevin00898

Жыл бұрын

Outdated usually means there's a better modern solution. What is it then?

@snnsnn

Жыл бұрын

@@kevin00898 TBH the soluion he showed is not outdated, on the contrary a new and a better way to run isomorhic apps better than alternative solutions which open doors to using languages other than js on the server side.

How you can take serious the guy who's using win xp on mac ?

This demo may be cute, but it represents a step in the wrong direction. Human time holds greater value than computer time, making these optimizations unnecessary. The amount of damage you've done to this community by these "oh look does your shit run on windows 98" is immense..

@MattSitton

4 ай бұрын

I don't think you understood the purpose of this talk lmao

yoo who the hell using windows xp to do js framework demo?

React sucks 🎉😮 for sure.

@surajjha5623

Жыл бұрын

Any Alternative suggestion??

@SR-ti6jj

Жыл бұрын

Nah fam. Get ratioed you hater

@abduelrah3676

Жыл бұрын

@@surajjha5623 svelte

@ShadoFXPerino

Жыл бұрын

@@surajjha5623 pure HTML5

@jww0007

Жыл бұрын

@@ShadoFXPerino would recommend

Why don't you learn how to make tech presentations and demo sessions from Google? Every rank-and-file engineer there making a demo is coming across as a master-mind, while Dan is nothing short of a school-boy, who is daydreaming while talking about stuff in a non-challant manner of his. Not good. Leaves empty space in the aftetaste.

@Sacos0

Жыл бұрын

bad hater, just bad

@kevin00898

Жыл бұрын

That would explain how Google suck at engineering so much. But hey, at least their demos are alright!

@Sammi84

Жыл бұрын

This comment is just pure hate. No content.

@srenhyer3895

Жыл бұрын

Dan did a really cool presentation - what is your problem?

@no_way_to_exist

Жыл бұрын

@@kevin00898 > _That would explain how Google suck at engineering so much._ do you have any proofs? )

kya kar raha hai re dan?