←back to thread

Next.js is infuriating

(blog.meca.sh)
1033 points Bogdanp | 2 comments | 02 Sep 25 06:57 UTC | HN request time: 0.001s | source
Show context
solatic ◴[02 Sep 25 08:42 UTC] No.45100515[source]▶
Half these issues stem from a relative misunderstanding of exactly where the code is running. Next.js has layers upon layers upon layers due to the interplay between the browser, middleware, edge vs. node, SSR... It's an enormous amount of complexity and it really only fits under the following set of circumstances:

  * You sell a B2C product to a potentially global audience, so edge semantics actually help with latency issues
  * You're willing to pay Vercel a high premium for them to host
  * You have no need for background task processing (Vercel directs you to marketplace/partner services), so your architecture never pushes you to host on another provider.
Otherwise, just tread the well-trod path and stick to either a react-vite SPA or something like Rails doing ordinary SSR.
replies(10): >>45100563 #>>45100650 #>>45100757 #>>45100811 #>>45100840 #>>45100856 #>>45101364 #>>45101939 #>>45102281 #>>45102812 #
rco8786 ◴[02 Sep 25 12:33 UTC] No.45102281[source]▶
> a relative misunderstanding of exactly where the code is running.

This is the exact problem with the App Router. It makes it extremely difficult to figure out where your code is running. The Pages Router didn't have this issue.

replies(1): >>45105340 #
robertoandred ◴[02 Sep 25 16:30 UTC] No.45105340[source]▶
Does it? Just look for "use client" at the top of the file.
replies(1): >>45115418 #
1. rco8786 ◴[03 Sep 25 13:19 UTC] No.45115418[source]▶
I love this comment!

"use client" does NOT mean it only renders on the client! The initial render still happens on the server. Additionally, all imports and child components inherit the "use client" directive even when it's not explicitly added in those files. So you definitely cannot just look for "use client".

See what I mean now?

From the docs:

```

On the server, Next.js uses React's APIs to orchestrate rendering. The rendering work is split into chunks, by individual route segments (layouts and pages):

Server Components are rendered into a special data format called the React Server Component Payload (RSC Payload).

Client Components and the RSC Payload are used to prerender HTML.

```

HUH?

```

On the client (first load) Then, on the client:

HTML is used to immediately show a fast non-interactive preview of the route to the user. RSC Payload is used to reconcile the Client and Server Component trees.

```

HUH? What does it mean to reconcile the Client and Server Component trees? How does that affect how I write code or structure my app? No clue.

```

Subsequent Navigations On subsequent navigations:

The RSC Payload is prefetched and cached for instant navigation. Client Components are rendered entirely on the client, without the server-rendered HTML.

```

Ok...something something initial page load is (kind of?) rendered on the server, then some reconciliation (?) happens, then after that it's client rendered...except it's not it actually does prefetching and caching under the hood - surprise.

It's insanely hard to figure out and keep track of what is happening when, and on what machine it's actually happening on.

replies(1): >>45117498 #
2. robertoandred ◴[03 Sep 25 16:14 UTC] No.45117498[source]▶
Correct, 'use client' means it can render in the browser, not that it only renders there. Rendering only in the browser would break SSR.

If you try to use browser functionality in a component without 'use client' or to use server functionality in a client component, you'll get an error.