Why is Next.js so slow??

A lot of server component apps have been rough, but I don't think that's NextJS' fault. There's a lot to talk about with how this new model actually works...

SOURCES

S/O Ph4se0n3 for the awesome edit 🙏

[voidmind]

Dude went from looking like an eighties porn star to an eighties rock star.

[maximilianm]

There were two April fools jokes on Reddit. A blog post on why spa is the best with an infinite loading spinner another one why ssr always wins with a page that wouldn't finish loading. Truly great

[fullstackjedi]

One of the few Theo videos that I feel is actually worth the runtime.

[SAsquirtle]

SPAs are still king when you consider the balance between complexity/maintainability and perceived performance

[madimakes]

Here for this one. Jumped into NextJS after first taking a look, about 3 weeks ago, and went to google this same question after becoming quickly frustrating. one of the first results the person who asked was getting *skewered*; partially having me thinking *i'm* the crazy one.

Happy to see this title. let's go

[pkop]

"spa doesn't require a server call" I wish it was emphasized only that you mean an html navigation server call, because of course these pages are requesting json data from a server each time. This is important because alternatives like HTMX, or setups that can load partials of html like Blazor Static Server Rendering can achieve the same feeling, with less data parsing complexity on the client and more power on the backend.

[paca]

I use next.js only as landing page because of SEO. The rest behind auth wall is written in React. Imo this is good approach and thanks for it I avoid a lot of pain with next.js

[vezquex]

Webpack was a mistake, and Vite has made it obsolete.

[devnoble]

You know I had gotten off theo's videos, because i felt sometimes he'd put way too much emotion in the videos, so much so that it made me cringe at times and lose focus on what I came to learn, maybe that's a personal thing, but today i said "oh what the I did not regret it, this is now in the goldy locks zone for me. This way of delivering content is absolutely marvelous, well done. He explained everything well and in particular this was a video that related to me a lot, thanks theo.

[jasonrooney]

The React community amazes me. Early on you lamented other frameworks like Angular and Vue because there was "too much magic". I.e. a v-if or ng-if directive on an html was just too much magic for your brain to handle.

And now you're sitting here defending one of the most unintuitive and "magic" abstractions ever conceived. You need such an in-depth knowledge of both the framework and your architecture just to determine if something will run on the server or not. And you have inflated your server costs 100 fold, and typically provide a slower UX. All of this to avoid pre-bundling static pages with your SPA? Nah this ain't it.

Like, sure, if you're running an e-commerce website where every page needs to be SEO optimized and backed by a CMS, you might need SSR. But for the love of god, just hydrate the page and treat it as an SPA after that point.

[eduardofernandez]

Damn even Michael Jackson complained 😮

[faraonch]

Man, this was super clear and on point again. Love how you really get the topic and explain it without any fluff—really good!

[mariolim]

We need a book with all this best practices

[columkelly]

Server components are useful when you want to offload a heavy component and its deps from the client, or when a fast initial load is the priority. News sites, e-commerce, etc. In most other cases an SPA is preferable. Why sacrifice navigation speed for FCP when your content sits behind a login?

[artfactory]

So basically everything that is static content just send it and use a first loading state if is needed, and everything that requires IO events just use loading states in between for good UX

[ruaidhrilumsden]

I feel like SSR and pre-fetching was missing to give full context here. Patterns like parallel data loaders on Remix/React Router can help immensely; not necessarily saying better or worse than all the solutions presented here in all situations, but would have been useful to get a mention and visualise where they fit, the benefits and the drawbacks.

[alfieqashwa]

One of the -- probably, the most -- best explanation about web development I've ever watched so far. Thank you Sir Theo, I am really appreciate it.

[AureusApps]

React router and Tanstack start has freedom to choose either server components or client components, and the migration is pretty much seamless. That's what we need.

[O_Eduardo]

This feeling of performance happens in any MPA application. For those not using React, it’s super simple—just add a default behavior for the navigation links on your page that shows a spinner on some place. Using event delegation helps a lot in this case.

For links that change their style to indicate the current page, update this behavior at the moment of the click, because that link will already be selected on the next built page.

I also usually set up an entry animation for pages to further enhance the sense of fluidity.

It’s just a matter of perceived performance—just add an immediate behavior to give the impression of greater speed. I saw a talk by a developer here in São Paulom Brazil about this topic, ten years ago.

[simonhartley]

Rather than "htmx can't do this", it's actually a recommendation for its loading-states extension.