Welcome to the Future of React Architecture
If you’re a React developer, you know that choosing the right architecture for your application is crucial. And now, there’s a new option that’s taking the React community by storm!
Introducing the React Server/Client Architectural Option – a groundbreaking approach that allows you to create more efficient and flexible React applications than ever before.
What is the React Server/Client Architectural Option?
In traditional React applications, the entire UI is generated on the client side. This means that the server only serves static HTML, and the client then takes over to render the UI and handle user interactions. While this approach works well for many applications, it can lead to performance issues and slower load times, especially for larger and more complex applications.
The React Server/Client Architectural Option, on the other hand, takes a different approach. With this option, the server handles the initial rendering of the UI, while the client takes over for subsequent interactions. This allows for faster load times and improved performance, as well as better search engine optimization and accessibility.
How does it work?
When a user visits a React application built with the Server/Client Architectural Option, the server sends a fully rendered HTML page to the client. This allows the user to see the UI almost instantly, without having to wait for the client to fetch, parse, and render the JavaScript code. Once the initial page is loaded, the client takes over and manages the application, handling user interactions and updates dynamically.
Why should you consider using this new option?
There are several benefits to using the React Server/Client Architectural Option. First and foremost, it provides a better user experience by reducing load times and improving performance. Additionally, it can improve SEO and accessibility, as search engines and screen readers can more easily crawl and understand the fully rendered HTML page.
Furthermore, it can simplify your code and reduce the complexity of your application, as the server and client can share the same rendering logic. This can lead to easier maintenance and better overall architecture.
How can you get started?
If you’re interested in trying out the React Server/Client Architectural Option, there are several resources and libraries available to help you get started. Many popular React frameworks and libraries have built-in support for this architectural option, and the React community has a wealth of tutorials and guides to help you understand and implement it in your own projects.
So why not give it a try? The React Server/Client Architectural Option is an exciting new approach that could revolutionize the way you build React applications. Get started today and see the difference it can make for your projects!
What I'm missing is returning streams from server actions
Is that also makes possible to optionally fetch data at the server side (for example tab activation)?
Learn a bunch here and React Context clicked even more now, thanks!:)
Hey, Jack!
I really like this method to invoke whole components to client from server.
Don’t you think that when we send a bunch of data it will big i size? I’m working with a bunch of data and I liked this way to handle it, but I think it will cost a lot of mb and user time to wait this data. May I use it without streaming?
What should I do to save the "saved albums" when switching to a different page?
what font and theme are u using?
0:36 experimental_StreamingReactResponse
That is an abomination to naming conventions. Whoever chose that name should have their developer license revoked immediately.
Very interesting!!
When we are past the token limitation, I can envision a future where the AI can combine information from not only the user input, but also your codebase, and return interesting HTML
Bad, bad title, man…
Woooow. Amazing php trick
Nice video. Got me wanting to learn how their experimental streaming react response from the AI library works under the hood. The ai stuff is cool, but i feel understanding how you'd code this with server actions directly is the the real valuable nextjs/react knowledge. Might go have a dig around myself
Edit: foind the library looks like it's native web streaming API on client side, neat! Really complex though
I'm not sure if I'm dumb (maybe 😅) or I somehow cannot get it, but what are the benefits of using this "streaming" Next.js/React approach?
I still don't understand why this is such a "groundbreaking" feature.
How does this differ from regular server-side rendering?
Great 🎉
Hey Jack can you tell the your vscode theme name
I think the real point of this is to be able to have the LLM generate input parameter data from functions (ie a weather function that fetches weather data and then derives a whole bunch of information from that weather data, like a short summary, or an answer to a question should I wear a jacket today, etc, and returns it as JSON) and then stream that data to the screen in the form of a UI component instead of text.
Edit: to be clear Jack, instead of that parsing function you should use OpenAI's functions API which will return the data you require as a guaranteed JSON structure (eg, params that your component expects). With one small further disclaimer, although OpenAI says the system is much better about guaranteeing the form of the response in JSON via the functions API, you should still obviously validate it. I recommend Zod.
Streaming react? When HTMX makes a cameo? lol
Super cool! Your example of using spotify has given me some neat ideas.
One thing though.. Not sure how good the album recommendations are 😅