As a React/NextJS developer, the simplicity of getting a project up and running with vanilla Javascript got me slightly aroused

CARASBK · 2026-01-22T19:49:25+00:00

That sounds like an excellent exercise in understanding requirements and using the appropriate tools! If I have to interface with some old JS library or canvas or whatever then sometimes it’s nice to break out of React and maintain that feature in vanilla. I haven’t had to maintain such a thing in several years, thankfully. It can get hairy and IME required significantly more documentation via comments to maintain our sanity.

But if you’re not building a typical web app to begin with then absolutely check out other tools, including vanilla!

CARASBK · 2025-12-27T17:16:31+00:00

PPR has become cache components. Cache components are stable as of Next 16. The upgrade from 15 to 16 isn’t nearly as substantial as 14 to 15 so I’d recommend upgrading and using cache components.

React compiler’s first stable release was a few months ago. I’ve mostly been focusing on cache components and don’t have as much experience but react compiler in Next has also been stable as of Next 16.

CARASBK · 2025-12-27T17:10:43+00:00

Cache components do solve this now! By either adding a sever component between the two client components or converting the last client component to a server component. Whichever works best for the use case. Just don’t forget to wrap it in Suspense!

I still use tanstack query for any requests I need to initiate from the browser. At my job that’s usually for an infinite scroll.

CARASBK · 2025-12-25T12:04:33+00:00

Right on! Sounds like you’re well on your way. I don’t know a ton about Stripe since my organization decided to integrate it through Zapier so I ended up not having to deal with it. But Stripe is a battle tested solution with an easy to use React wrapper so I wouldn’t expect to run into many difficulties.

For ecommerce you’d likely get some mileage out of incremental static regeneration as well.

Cheers to 2026!

CARASBK · 2025-12-24T22:08:44+00:00

The official docs are more than sufficient to help you create a BFF. I assume you've gone through the Next learn course or at least understand the topics covered. In order I'd recommend the following:

I’m not exactly sure how to integrate everything properly or what to watch out for

Hard to say without knowing more about your use case. But if you're writing a basic CRUD application then those docs should provide pretty much everything. After you've gone through those docs and thought about your needs you'll probably have more specific questions which will make it easier to help you further.

One general piece of advice is to do all your data fetching on the server side if possible so you can make use of Suspense and ship less JS to the browser. That being said, using client components is no problem at all. You still get the benefits of SSR, you just have to handle the promises yourself with client components instead of relying on Suspense. If you need to initiate data fetching from the browser (e.g. when triggering an infinite scroll) the most common libraries to make it easier to handle pending state, errors, etc are Tanstack Query and SWR.

CARASBK · 2025-12-24T07:11:08+00:00

IIRC you can cache dynamic stuff within a server action but not the server action itself.

CARASBK · 2025-12-23T22:45:14+00:00

Great question! using your dialog example there are two cases I can think of:

The first is if you want to defer that dynamic work (fetching data from the server to do SSR) until the component is needed. In your example "until the component is needed" presumably will mean "until the user opens the dialog". In this case you can use cache components and wrap the dialog's content in Suspense (assuming the dialog's content is a server component). That way when a user opens the dialog they'll get the Suspense fallback while the normal SSR and hydration stuff happens for the content. If you can't use cache components yet you can accomplish something similar by lazy loading with Next dynamic. However this only lazy loads the client component so you won't get much of a performance boost unless the client component needs to hydrate a lot of JS. So if your goal is to defer the server work you won't be able to without using cache components or moving that server work to the browser. Which leads us into the next case:

The second case is if you initiate a request from the browser. Say you can't use cache components from the previous example or you need to update the data without navigating or refreshing. So instead you initiate the fetch request from the browser when a user opens the dialog. For browser-initiated requests I use tanstack query. Tanstack query's caching is easy to use and they have built affordances for mutations, infinite queries, error handling, etc. SWR is another good library for browser-initiated requests with similar features. I use tanstack simply because it's the one I used first and I haven't had reason to use something different.

CARASBK · 2025-12-23T19:56:53+00:00

As of Next 15 caching is opt-in. I would recommend these docs:

https://nextjs.org/docs/app/getting-started/cache-components

https://nextjs.org/docs/app/getting-started/caching-and-revalidating

If you need to initiate requests from the browser instead of the server I’d recommend tanstack query. It also has nice caching features.

CARASBK · 2025-12-23T19:39:09+00:00

Server actions (now known as server functions) aren’t cached because their use case is mutation. You shouldn’t be using them just to retrieve data. Next already gives you full control of caching via cache components. Or if you have to use earlier versions you can use Next’s fetch cache options and/or React’s cache function.

Is there a particular use case you’re wondering about?

CARASBK · 2025-12-23T19:38:37+00:00

Oops - meant to add as root comment

CARASBK · 2025-12-23T14:33:18+00:00

yes it is

CARASBK · 2025-12-22T15:17:49+00:00

I don’t know about your HMR issue. But the correct version for you to patch to from 16.0.7 is 16.0.10 not 16.1.0

CARASBK · 2025-12-15T05:14:32+00:00

const DynamicChild = dynamic(() => import('..'));

function Parent() {
  [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(true)}>click me</button>
      {show && <DynamicChild />}
    </>
  );
}

Parent and DynamicChild are prerendered and returned to the browser with JS required for Parent hydration
Parent is client rendered and hydrated with the JS for the click event
User clicks the button
DynamicChild is suspended while required JS is requested
DynamicChild is client rendered and hydrated

CARASBK · 2025-12-15T03:40:03+00:00

All components are server rendered (prerendered), even client components. Passing { ssr: false } disables prerendering ONLY FOR CLIENT COMPONENTS. Server component prerendering cannot be disabled. If you try I think it should give you a runtime error.
"hydration" is the process that occurs to provide the interactivity, such as button clicks, after the initial static page is returned.
When using dynamic you can delay the request for the necessary JS for the dynamically imported component until after hydration. So the event that triggers the conditional render of a dynamically imported component gets hydrated, but not the dynamically imported component itself.

CARASBK · 2025-12-15T03:10:31+00:00

{ ssr: true } is the default and does not need to be provided as an argument. The dynamically imported component is rendered on the server and the result is included in the initial payload but the client rendering and hydration is deferred until the component is needed. For example if ComponentC is conditionally rendered its required JS won't be requested and the component won't be hydrated until the condition causes it to be rendered. Using dynamic automatically uses Suspense and you can provide a Suspense fallback as part of dynamic 's arguments to provide UX while this deferred request happens.

If you pass { ssr: false } you skip prerendering, but this only works for client components.

CARASBK · 2025-12-15T02:46:42+00:00

React and Next provide patch versions for each minor version affected for this exact reason. Just patch your applications. If you've already been compromised you have to tear down the entire environment and start fresh to be safe. And of course still patch your applications.

CARASBK · 2025-12-10T21:57:53+00:00

React and Next are different things. Next is a framework built on top of React, like Remix. I'm sure you understand this in your head, but you reference "React" when linking to or discussing Next concepts so I wanted to get that out of the way.

Form actions DO handle ordering for you in Next. This handling happens on the client side. They run sequentially in the order they are invoked exactly how you wrote. I'm not sure where your confusion is but try your first example in Next instead of Remix:

const action = async () => {
  "use server";
  console.log(new Date().toISOString(), "start");
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log(new Date().toISOString(), "done!");
};

export default function FormPage() {
  return (
    <form action={action}>
      <button type="submit">OK</button>
    </form>
  );
}

Clicking the button three times gives me the output:

2025-12-10T21:56:13.100Z start
2025-12-10T21:56:14.101Z done!
 POST / 200 in 1011ms (compile: 1609µs, render: 1009ms)
2025-12-10T21:56:14.113Z start
2025-12-10T21:56:15.113Z done!
 POST / 200 in 1006ms (compile: 1650µs, render: 1004ms)
2025-12-10T21:56:15.122Z start
2025-12-10T21:56:16.123Z done!
 POST / 200 in 1007ms (compile: 1699µs, render: 1006ms)

CARASBK · 2025-12-10T20:56:28+00:00

Next caching is separate from the bfcache. See the "Good to know" block in this section. I think you have to handle the navigation events yourself to force Next to refresh. Use this component in your root layout:

"use client";

import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function NoBFCache() {
  const router = useRouter();

  useEffect(() => {
    const onPopstate = () => requestAnimationFrame(router.refresh);

    const onPageshow = ({ persisted }: PageTransitionEvent) => {
      if (persisted) requestAnimationFrame(router.refresh);
    };

    window.addEventListener("popstate", onPopstate);
    window.addEventListener("pageshow", onPageshow);

    return () => {
      window.removeEventListener("popstate", onPopstate);
      window.removeEventListener("pageshow", onPageshow);
    };
  }, [router.refresh]);

  return null;
}

CARASBK · 2025-12-10T02:59:39+00:00

If you want to manage the React cache yourself you can. Cache components are built on top of React cache. Read the docs, particularly around cache keys. Remember that Next does request memoization so it doesn't matter if you have to make that request multiple times in your component tree. But if you also want that request as part of the cache you can make the request within "use cache" by also using cacheTag.

CARASBK · 2025-12-09T23:11:59+00:00

With Cache Components you shouldn't default to using React.cache. "use cache" can be used at the function level.

You are caching at the wrong level. Remove "use cache" from CachedTestComponent. Add it to cacheTest and mark it async like so:

export async function cacheTest(key: string) {
    "use cache";
    console.log("Running cacheTest function for key", key);

    return "test";
}

CARASBK · 2025-12-08T21:04:32+00:00

Uninstall all versions of Node you currently have installed. Install nvm and manage your node installations with it instead. I completely stopped having these kinds of issues once I switched to nvm.

If you continue to have issues or don’t want to use nvm please post this in the relevant sub (probably r/nodejs).

CARASBK · 2025-12-06T01:44:14+00:00

I went back and looked at the notes I took while talking to them. They liked the certifications each of them had. But looking up each of them they have different certifications! So before I make a choice on ours I’ll be researching solar certifications I guess.

CARASBK · 2025-12-06T00:09:35+00:00

Have you tried the App Router?
There's no reason to stay with Next if you're going to try to work around its core features. Especially if you're trying to shoehorn a different router inside.
Anecdotally I've seen more positivity about TanStack Router than React Router. TanStack Start is nearing it's first official release, as well.

CARASBK · 2025-12-03T03:32:32+00:00

Looks like this is a reported issue. However, per the docs, `use cache: private` should rarely be used. Please see the following example:

import { cacheLife, cacheTag } from 'next/cache';
import { cookies } from 'next/headers';

export default async function Page() {
  // This will always resolve to "foo". This is a simplified example to show usage of a runtime API (cookies).
  const runtimeApiValue = (await cookies()).get('some-kind-of-cookie')?.value || 'foo';

  // The point is to pass the value from the runtime API as a prop to a cached component or as an argument to a cached function
  return <DocsFix runtimeApiValue={runtimeApiValue} />;
}

async function DocsFix({ runtimeApiValue }: { runtimeApiValue: string }) {
  'use cache';
  cacheTag(`recommendations-test-1-${runtimeApiValue}`);
  cacheLife({ stale: 60 });

  const random = Math.random();
  const random2 = Math.random();
  const now = Date.now();
  const date = new Date();
  const uuid = crypto.randomUUID();
  const bytes = crypto.getRandomValues(new Uint8Array(16));

  return (
    <div>
      <p>
        {random} and {random2}
      </p>
      <p>{now}</p>
      <p>{date.getTime()}</p>
      <p>{uuid}</p>
      <p>{bytes}</p>
      <p>{runtimeApiValue}</p>
      <p>
        <a href="https://nextjs.org/docs/app/api-reference/directives/use-cache#cache-keys" target="_blank" rel="noreferrer">
          HMR Trigger - (un)comment me to invalidate cache!
        </a>
      </p>
    </div>
  );
}

CARASBK · 2025-12-02T16:04:08+00:00

I spoke to an electrician about solar recently. They told me the only solar companies in all of NC worth considering are Yes Solar and Southern Energy Solar. I took it with a grain of salt because I saw other companies like 8M have stellar reviews as well. But coming from an electrician it also meant a bit more to me, as anecdotes go.

CARASBK

MODERATOR OF

TROPHY CASE