How To Fix NextJS 13's N+1 Problem

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with atomic and SpaceMono NF

0:00 Introduction
0:44 Project Introduction
2:05 Building The NextJS 13 Application
7:26 Testing The N+1 Performance
11:21 Trying React's New Cache
13:34 Creating The Backend For Frontend
18:36 Analyzing The Returned Page
23:59 Doing Client Components Wrong
27:03 Outroduction

[Dgiulian]

The idea, the preparation, the explanation and the editing...is so much work. I can't thank you enough for making these videos.

[ahmedjaber]

This is the first time i see someone talking about eager loading in js frameworks
Keep going!

[carlosavila]

Hi Jack, I really loved this video

I was really impressed by the way you presented the benchmark and explained the problem with such clarity and precision. Your expertise and attention to detail were evident and made a big impact on me. I would love to see more of this type of content from you in the future.

[let]

Hey Jack,

I'm having a hard time understanding what the benefits of server components are when solutions like React Query exist, and how/why fetching data on the server is so much more performant than just fetching on the client and showing a loading spinner

If you could make a video about either or both of these topics I'd appreciate it a ton. Filling out the survey now, thank you for the great content as always

[TimKindberg]

An awesome video that was well worth the watch. Thank you for exploring this tech early and explaining to the rest of us!

[ionelLupu_]

25:55 blew my mind. Really appreciate this video. Keep it up with such examples. Love the "Don't do" section. I think we need more of these

[grsevero]

Very nice, Jack. Thank you! I had the same problem using graphql one time and I've solved using a npm lib called dataloader to batch the operations. So we would have a list of IDs to be fetched instead of a list of iphone requests.

[ami]

Maybe I am missing something a core concept but.. when you make a backend for your front end, you combine the “get all ideas” and “get iPhones with ids” into a singular request that your React (front end) can can request. Yes it turns 51 requests into 1 request but 51 requests are still being made in your application to the backend server to get the data. You say it only happens once when the route is accessed. So basically it’s the same as the cached version regular n-plus-one version? When the data is cached in n-plus-one-cached you no longer make those requests to the backend after going to that page the first time. You just return the cached promises correct? So is the performance boost here that in n-plus-one-cached you still return 51 cached promises on each page load after the first one, as opposed to “backend for frontend” where it’s just a singular cached promise that is returned on each page load after the first one?

Love all your videos!

[AaronBentley]

That shell is very pretty 🤩 I’d love to see a video on your terminal/shell configs

[dimaandoniev]

Hello Jack! I want to express my sincere appreciation for your hard work and dedication in creating each video. Your generosity in sharing them for free and with such exceptional quality is deeply appreciated. Thank you so much.

[mattd]

underrated channel, never a trivial tutorial!!

[CFXTBogard]

Excellent chapter of "the more you find out on your client components, the more you F around your server payload"

[dealloc]

15:24 could have used instead here to fetch concurrently. Using await in a loop will block execution until the Promise has resolved before continuing the loop. Since there's no dependencies between each async call, there's no need to wait around.

Additionally, you should run benchmarks against a production build rather than development because dev environments skew the results on top of the already rather flawed benchmarking.

[baybay]

Very informative video! Thanks Jack, this is really helpful!

[waltervanwoudenberg]

Amazing breakdown! Great content as always!

[raymondmichael]

Now I should really take the survey 😊, you guys are doing such a good job.
🙏🏾

[kuba]

big props Jack for all the explanations !

[sobrevivendo-no-front]

Thank you, Jack! That's why I never miss any of your videos.

[adimardev]

this is by far very useful content. you're making us a great developer just like you Jack! you're awesome!

[ibrahimmohammed]

wow that's very informative, i haven't heard of that cache in react thing before !