NextJS 14: You Missed The Best Part!

Рет қаралды 27,114

Күн бұрын

Can we turn React components into self-contained Lego blocks that talk to backend services? Let's find out!
0:00 Introduction
2:13 RSC Lego Component
6:42 Moving To A Library
8:11 Client Lego Component
12:34 Pages Router Comparision
14:38 Outro
Code: github.com/jherr/nextjs-14-le...
Talk link: • How Next.js is deliver...

Пікірлер: 125

@Dev-Siri 7 ай бұрын

react is really just lego. you can build the web apps of your dreams or scream in pain when you step on the useEffect infinite loop

@rawallon 7 ай бұрын

Text content does not match server-rendered HTML

@filipkovac767 7 ай бұрын

useEffect infinite loop: It happened to me twice in 3years+ working with useEffect and somewhat was pretty sure what's the issue. I don't see the point people are even mentioning it.

@MrEnsiferum77 7 ай бұрын

U move your useEffects calls into routes as actions

@MayhemPhone 7 ай бұрын

This was also my favorite part of the con. When I shared the concept with my team, a sr dev just dumped all over me, as another coworker put it “it got really cringe”. I love the idea of a fully contained component that handles its own business so it can be dropped in anywhere.

@StingSting844 7 ай бұрын

The issue is that it's not gonna be constant. The requirements will change and you'll end up looking for a solution to manage versions of components rather than APIs. So the same problems that we have with APIs will just be in react land.

@jherr 7 ай бұрын

I look at it more in the light of a specific type of component for App Router apps that speeds integration for that environment. It wouldn’t be the only way to integrate, it would be one of many options.

@oscarljimenez5717 7 ай бұрын

@@StingSting844then don't use SQL in your component, just call an API.

@m___pryor 7 ай бұрын

Thank you for this excellent breakdown!

@chris.dillon 7 ай бұрын

`select * from blogs` in the Lego block is SQL. The database has a shape. The server component at least depends on the database shape. The database shape is not communicated or shipped. If you shipped it, it would likely have data dependencies. Trying to delegate schema migrations as Lego is non-trivial. I'm sure you could do it but you'd have to have a stable interface, a better boundary would be the network which they should know by now because they have already done it.

@carlosricardoziegler2650 7 ай бұрын

Great video , that is a power of composition :)

@carlosricardoziegler2650 7 ай бұрын

The pain point is to configure the UI library like Shadcn to works fine in Monorepo or ? Need to share some config file, and path aliases on root project.

@roberkules 7 ай бұрын

somehow makes me feel nostalgic thinking back on my ember.js days... iirc an ember plugin could even add routes (we can argue how useful that is, but there might be use cases). loved its convention over configuration approach, probably that's why I'm so interested in next.js now :)))

@ClarkMitchell2012 7 ай бұрын

"We can't update the component library for this button until we run these database migrations. "

@ToriaDev 7 ай бұрын

I think it is cool that we can delegate all requests to the server and just focus on what is really supposed to be client-side, perfectly balance app should hide all the backend logic from the client component as much as possible I thing

@thisweekinreact 7 ай бұрын

Nice aspect of RSC for sure. Not super fan of using client side state to update rows. I haven't tried but couldn't revalidateTag be an interesting alternative?

@enigmanovelist-kq6dt 7 ай бұрын

Love your content Jack, can you make a video on error handling - forms, backend errors etc

@bartek... 7 ай бұрын

It is always fun to do integration and unit test's for components that's have hidden any networking inside them.... NOT

@egolege 7 ай бұрын

great jack!

@kaa4ever2 7 ай бұрын

Great video and love your content. I'm a little unsure why you would want to ship your components tho. I like the whole idea of self-contained components, I definitely dig that, but I feel like most companies will probably not want to ship their components anywhere anyways, which kinda invalidates the whole brick (Lego) argumentation. You could probably argue that you'll still get the brick benefits without having to ship them, but really, practically, when you app is running, how often do you need to move things around, and what benefit do you really get? I'm unsure, maybe I'm just not the right receiver of this message :)

@MrZiyak99 7 ай бұрын

is updating on the client via data sent from a server action a recommended pattern? i wrap these things in a suspense and just revalidate my path. with new hooks like useOptimistic in the pipeline I'm not so sure about the pattern you showed. also in this case why is input state stored in hook and not part of the formData api?

@devsami 7 ай бұрын

So , isn't this some what similar micro-frontend, although we can now have data and component both abstracted?

@BobHanson-jv6du 6 ай бұрын

I just had a flashback to the first time I watched a Ryan Bates Railscasts

@jacob5403 7 ай бұрын

Feel likely goings back to old days with php, which is actually quite nice

@arvindiyer4813 7 ай бұрын

Hey Jack and the rest of the community !! I watched your video on KZfaq about the Lego Blocks Architecture of Next.js with Turbo I've been trying to conceptualize the same Blogs application with Turborepo where the package can have other routes nested within it Like for example, I would want to keep the form for creating the Blogs in a new route `/blogs/create`, the display all Blogs in the `/blogs` route and view a single blog in the `/blogs/[slug]` route. I haven't been very successful with it. How can we implement such a Lego Brick Architecture for Blogs ?

@2penry2 7 ай бұрын

Looks super neat, is there any tooling that exists for RSC's yet like storybook?

@MayhemPhone 7 ай бұрын

Storybook does not support RSCs yet, but they are working on it. Im currently having to do some silly work arounds right now, can’t wait for them to release an update to support them.

@blizzy78 7 ай бұрын

Wouldn't it be better to use revalidateTag instead of revalidatePath? That way the component would be able to revalidate its own fetches upon mutation, without users of the component (the page) having to do anything at all.

@JoshuaMelville 7 ай бұрын

My thought exactly. You can wrap any data in the next cache API and use it to set a tag that you can later revalidate.

@MonisKhanIM 7 ай бұрын

Why can’t we use react query and next js API routes? Feels easy to me Idk

@puchesjr07 7 ай бұрын

Now do this with Qwik using Loader, Action, and Server$ :)

@RemotHuman 7 ай бұрын

Are there any other ways to do this (import server and client code in one component / in one input) in react or in another framework. For instance can you do this with TRPC somehow? Also Is there a way to do this in vue for example?

@jherr 7 ай бұрын

Possibly Qwik. Nothing else that I’m aware of.

@realderek 7 ай бұрын

Since all of the list functionality is hidden within a library, how would you do something like updating a blog post count from a component not nested without the list loader?

@jherr 7 ай бұрын

You have to have an RSC to handle the server action. Either that or expose an API endpoint, which you can’t do directly from a component.

@Dylan_thebrand_slayer_Mulveiny 7 ай бұрын

Robert');DROP TABLE *;-- has entered the chat

@lambgoat2421 7 ай бұрын

wow great I have always hated separation of concerns /s

@hellome3046 7 ай бұрын

whats the difference between RTK Query and createAsyncThunk i,am highly confused

@MrEnsiferum77 7 ай бұрын

@Jack how I can migrate outlets from react-router-dom to app router in nextjs14? How is possible to execute rootLayout, one nested layout and then one more level deep render the page and the url from './' to shown /path1/path2? next.config.js redirects not helping at all... i'm getting 404 not found...

@jherr 7 ай бұрын

That's a little too complicated for a KZfaq comment. You should join the Blue Collar Coder Discord server and ask you question there in the #react channel. But please, read and follow the #rules first, you are going to have to give a lot more information if you are going to get a reasonable answer.

@arvindsuriya6342 6 ай бұрын

Hi Jack, Can you please put up a video discussing about app router and next 14 support with module federation?

@jherr 6 ай бұрын

There is no official support that I know of.

@fullstack_journey 7 ай бұрын

hope your arm is fine now!

@pdesmay 7 ай бұрын

Love actions and genuinely like the direction we are heading and these new Lego blocks, but I ran into some snags recently that I'm hoping get ironed out. 1. Client fired actions are queued so there is no way to run actions in parallel. 2. Next is discarding promises in flight when a user navigates to a new page without resolving or rejecting the promise. This is a major flaw when wrapping actions in external async management tools like react query. React Query ends up in an endless fetching state when the action is discarded because it's looking for it to either resolve or be rejected. I was trying to move everything away from API routes and handlers but ran into these issues which made me pause and rethink my strategy a little. Maybe the next team isn't considering actions for data fetches as a use case, but I'd love to be able to skip an API layer when the only client is my frontend. 😅 Have you tried fetching data with an action instead of just RSCs?

@jherr 7 ай бұрын

I built a search page using server actions and it worked just fine. So you can definitely just make data requests.

@pdesmay 7 ай бұрын

Yea it definitely works but I ran into issues with parallel fetches and promises being diecarded. Example: I was showing the most recent action on a bunch of user cards fetched with an action. All the last actions data for each card were supposed to fetch in parallel with useQueries. Unfortunately they are queued so they still execute one at a time. If a user was impatient because user 3 had resolved but user 12s last action was still in flight or was in the queue when they clicked to navigate to the user prolife page the action got discarded. So when you navigate back to all users that query is in an endless fetching state unless I manually cancel the query. Found the issue in Nexts repo though and am writing up a quick PR that would ensure that actions are at least rejected on navigation and not just discarded.

@jherr 7 ай бұрын

@@pdesmay Good on you for doing the PR! Well done! Any thoughts on my SAa are queued?

@pdesmay 7 ай бұрын

@@jherr If i had to guess probably to maintain consistent application state and discarding to improve performance. Since they are feeding the state of the promise back to the client with startTransition it probably introduces some complexity and performance concerns for tracking the state of parallel promises. Seems like they can either create a saved state on navigation with all the pending actions in the queue and restore and try again after the navigation event or just reject the promises that are pending. I'd be fine with a rejected promise so at least external state management tools could pick it up and refetch when needed if there are performance concerns with the first option.

@pdesmay 7 ай бұрын

Changing the action queue or removing it to process actions in parallel would be a fundamental shift in how actions are processed in Next. Probably won't get those for a little while but I am keeping my fingers crossed.

@akcaburak 7 ай бұрын

Can we use that feature with module federation ?

@jherr 7 ай бұрын

NextJS has always had issues with Module Federation, so my guess is no.

@robjjohnsen 7 ай бұрын

Did Turso create the 'packages' folder? Could someone explain why the component was dropped inside that 'ui' folder for him to use? Is this almost a microfrontend approach?

@jherr 7 ай бұрын

It was Turborepo that made the packages directory. Turso is _just_ the database. And yep, it's a build-time micro-fe since it is a self contained piece of UI that communicates with it's own service layer (in this case the DB).

@robjjohnsen 7 ай бұрын

@@jherr, Thats really interesting. May I ask why you used Turborepo for this? I was under the impression it was a nextjs project or does this approach allow for this architecture whereas Next is the monorepo style?

@jherr 7 ай бұрын

@@robjjohnsen The app is a NextJS project within a Turborepo. I chose Turborepo because it makes it really easy to do TypeScript type sharing between projects so it made for an easy demo. You don't need to do it monorepo style, you could do it with multiple repos and a public or private package repository. The value in putting it in a library (monorepo or not) is that it can be reused between applications.

@robjjohnsen 7 ай бұрын

@@jherr Ok, I really like this approach. Turborepo would be the package repository in this instance? I need to do more reading on this (or if you have a video from your library that you could point me to) . Thanks Jack

@jherr 7 ай бұрын

@@robjjohnsen npmjs.com, where you download the modules from when you do npm install [a module name], is a package repository. You can also self-host your own package repository for private packages. Package repositories contain built and versioned packages. Repos and mono-repos contain the source code for apps or packages. Those apps can be deployed once built, and those packages can be uploaded to a package repository once built.

@StingSting844 7 ай бұрын

This is going to backfire for sure in less than a year. Now everyone will quickly realize that this leads to waterfalls unless you follow some steps, so we need a compiler like Relay to aggregate and fire requests together to prevent waterfalls. This is spectacular for MVPs and throwaway apps. But for anything even mildly important this is not going to scale.

@bythealphabet 7 ай бұрын

Wow, Thank you Jack. very good explained. and .......Yeaaaaaah Lets GO, lets put SQL in the component. 😂

@adfasdfasdf643 7 ай бұрын

these lego blocks only work if you rewrite your app using legos

@someonefromsomewhere6528 7 ай бұрын

Great video! I would be careful with the term Lego though. The "friendly" danish company is very stringent with its trademark 😅

@jherr 7 ай бұрын

Vercel is a bigger target than me

@k303k 7 ай бұрын

Hello sir.Will you make Nextjs14 series for us pls?

@WilliamShrek 7 ай бұрын

Time to fire our backend developers.🤣

@Streamoverlaypro 7 ай бұрын

This is WAY cleaner than the NextJs 14 presentation. Single responsibility is better rather than mixing wrong things in the right scope. I can celebrate the SSR thing but make it in a way that is not a rape on the eyes of everyone.

@PeerReynders 7 ай бұрын

Sorry, Lego was fun at the time but it's hard to go back after fischertechnik.

@gabriellee1787 7 ай бұрын

It's interesting to see the industry move towards FE driven design. It makes a lot of sense as manipulating these points of action is far easier on the FE than it is to create a new endpoint with a new set of queries and parameters. By having the component encapsulate both the FE and BE logic for each feature you bridge that gap all in one easy to see location. I'm really liking where NextJS is going with this.

@feldinho 7 ай бұрын

for the rest of us, what is FE again?

@SomeDude-gs7om 7 ай бұрын

@@feldinhoFront End? Or do you mean the line between FE and BE is blurring?

@feldinho 7 ай бұрын

@SomeDude-gs7om Nope. I just didn't know what they meant for "FE driven design", and googling it verbatim didn't help.

@hamzakhiar3636 7 ай бұрын

I guess I'm done with react and other stuff ❤

@obohp 7 ай бұрын

Isn't this PHP all over again

@shadowfaxenator 7 ай бұрын

Embedding action in a form breaks progressive enhancement, to make it work you need to store action in a separate file and this breaks the concept of self containing components.

@giorgos6576 7 ай бұрын

I learned react last year. I liked it a lot. Now I don't like the direction of react plus these wild nextjs features. Maybe for small hobbyist projects where you are responsible for the frontend, backend and the database it's fine but for massive projects where lots of people are involved it doesn't sound good.

@golden_smiles 5 ай бұрын

Imagine, you don't even need components. Just html elements themselves magically call your DB server, or any server, just give them all of your credentials. Wow! You don't need to worry about anything! I mean, why the egg-headed people invented layers of abstraction and separation of concerns, if it just complicates things, and we just put our sql right in the attributes of the html div? We don't even need typescript or anyscript anymore. Awesome!

@WikiPeoples 6 ай бұрын

I recently looked into a frontend application written entirely in vanilla JS and XHR calls. I could not believe how much simpler and easier to understand that code is than 90% of the overly abstracted shit being produced today in react / angular / svelt / etc... We've really gone too far into "making things easier".

@jherr 6 ай бұрын

You should check out HTMX.

@dendysaptoadi9652 7 ай бұрын

wow

@JohnPywtorak 7 ай бұрын

A whole bunch of react nextjs programming hides and obfuscates any Lego aspect. So, I looked at some Lego's in front of me and it is whole lot simpler, 1 brick plus another brick connected done. The bricks are opaque, this session was anything but opaque. I had to know a whole bunch of things and perform a whole bunch of things. Same amount of effort, but in a different way. I'm not feeling it as the best part.

@aleksd286 7 ай бұрын

“use php”

@jherr 7 ай бұрын

That is an actual thing

@mostafakheder7721 7 ай бұрын

Endless React >>> Endless Next , i am tired.

@Resistance_is_futile1337 7 ай бұрын

Again top notch Video. But too fast and too less explanation, eg what does revalidatepath do. No word about it

@johnkucharsky6927 7 ай бұрын

You won't ever use this stupid form twice, what's the point of creating this package

@alisherwhite4616 7 ай бұрын

i have a sense like next 12 was the best so far

@coherentpanda7115 7 ай бұрын

I have yet to see anyone convince me switching from Pages to the App router is a good idea. Jack tried to make some good points, but nothing he mentioned is simpler or more powerful than doing it the original NextJS way. Vercel really screwed the pooch going all in on RSC, and I feel like this is going to hurt them in the long run.

@alisherwhite4616 7 ай бұрын

@@coherentpanda7115 totally agree

@vitorguidorizzzi7538 7 ай бұрын

I hate react so much its unreal

@aytee5862 7 ай бұрын

I think we are going back to the stone age when it comes to web. For all their faults, when SPAs were king we had some cool looking websites with slick animations and interactivity and they felt like an application. They were maybe a little slower, but it didn't feel like it for the most part. Now, with this huge SSR push and focus on server component that can't even have interactivity, it feels like we're back to the stone age browsing actual documents on the web. 😴😴😴

@haveyouseenitthough 7 ай бұрын

You can still have interactivity. Server components let you opt in to client components when you need them

@aytee5862 7 ай бұрын

Client components are client components, server components are server components. You are confused about terminology.

@walkingin6375 7 ай бұрын

I agree, that's why I use Solid instead. Interactivity, better dx, Typescript by default, and super fast and lightweight, much more than React. Plus it's super easy to use compared to React

@joseandkris 7 ай бұрын

Client components aren't even fully client. Try using local storage without use effect or some other browser api

@jitx2797 7 ай бұрын

We still have interactivity through client components.