cacheComponents in Next.js (canary)

There is more to cacheComponents, of course. I will create a few more vids But it seems to fix the accidental dynamic rendering problem which is huge. Rendering strategy and caching gets much more explicit

Have you checked this out yet? The cacheComponents thing isn’t working when deploying to Vercel. Locally (build/start) it works fine though.

Nope, thanks for the link. It's still experimental and in canary, I wouldn't use it in prod rn Can't wait for the stable release. It is a huge and much-needed shift towards explicit caching and rendering.

I can’t wait either. It’s been experimental for way too long. Once this is stable it’ll make Next.js great again. Just fix it already.

is this a future successor to PPR?

Yep, it combines ppr, dynamic IO, and "use cache" into one flag

👏

im so <Awaited /> pilled at this point for some reason yet still miss nextjs😭

It feels like cacheComponents fixes the most fundamental problem of the app router. But hard to tell until the stable release

If they can figure out skipping those cached components in SSR then it could save billions of dollars in compute

This seems like PPR

I like your wallpaper. Can you share it?

It's one of the backgrounds from @screenstudio

Unfortunately my biggest reason for using server components, was to get rid of as much loading state as possible. Not worth it to introduce this caching if it means users now have to see loading states.

This new feature looks promising for improving performance and developer experience. Can't wait to see how it evolves and impacts future Next.js projects.

Im curious: Are there any specific use cases?

Demo from the video fixes this problem

Looking forward to seeing the final version of cacheComponents in Next.js.

Does this cache on the local development?

cacheComponents in Next.js canary looks like a solid performance boost for frequently accessed UI elements- definitely worth exploring for optimizing render times and reducing server load

Do I need to explicitly cache calls such as 'getUser' to cache them between multiple server components?

If you mean memoization (to avoid triggering a function multiple times during a single request), then yes. However, it works more like deduping than a persistent cache The name of this function causes a lot of confusion

Yes, I meant that cache (which is memoization) from react ;) So it looks very similar to ppr but without "ppr" flag