NextJS13 force-dynamic

[left laurel]

I have a specific page I want to make sure always gets rendered on the server (doesn't get cached).

By reading the docs I believe that export const dynamic = 'force-dynamic should do the trick.

So here is my page.tsx

"use client";
import { useAuth } from "@/app/providers/AuthProvider";
import { Button } from "@/components/Button";

export const dynamic = "force-dynamic";
export default function Home() {
  const { logout, user } = useAuth();
  return (
    <div className="min-h-screen">
      <h1>
       Hello, <span>{user?.nickname}</span>
      </h1>
      <br />
      <Button className="bg-purple-400" onClick={logout}>
        Logout
      </Button>
    </div>
  );
}

When I run npm run build though it says that my route will still be statically generated:

Route (app)                                Size     First Load JS
┌ ○ /                                      3.16 kB        81.5 kB

The reason I want to avoid this btw is because this route requires auth and I want middleware to run to check for the user's permissions. The reason why middleware doesn't get to run is because AWS Cloudfront (CDN) has this cached as static content for the user so it just sends it before the middleware even runs

[edgy karma]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[terse hound]

your page is a client component, there's nothing to be run on the server, so it can be static as usual

your page has to be a server component for the server to have something to run

on then can we talk about whether it's run during build time (static rendering) or runtime (dynamic rendering)

[left laurel]

Yeah, you're right with the naming there, that's what I meant to say

[hard owl]

if you want it to be rendered on the server at any cost then why do you explicitly declare it as a client component?

[left laurel]

I want it to be dynamically rendered (runtime). The reason it's not a server component is because Im using useAuth which is my auth provider for my application (client component because it keeps user state etc)

I hope my explanation is clear.

I would like for this page (/) to not be rendered during build time. Rather at runtime, for each user request.

Based on the docs I would expect export const dynamic = 'force-dynamic' to do the trick but it doesn't

[terse hound]

the problem is that there is nothing to run during runtime

you are using a client component

so the server has nothing to run

you have to use a server component for dynamic rendering to even make sense

since it's a client component, all the rendering takes place on the browser

the server only needs to prerender a skeleton empty state

so dynamic rendering doesn't make sense

you have to retrieve the auth state on the server using a server component with cookies for example

then dynamic rendering will work as expected (even without "force-dynamic")

[left laurel]

Okay I think I get what you're saying and it would be a good practice to follow for my code.

What I don't understand is the following:

NextJS offers SSR, right ? That's not related to client or server components.

It's just being able to render the JS on the server and produce the necessary HTML/CSS files it will send to the client as a "first paint" so the user has something to see, right ?

Correct so far ?

[terse hound]

yes, and your route is being SSR'd normally

[left laurel]

Okay so then comes the question, when does NextJS render those routes on the server?

From my understanding there are a few options:

1. The default is that it pre-renders them during build. This is what's happening in my case where when the client goes to / it gets the page without the middleware being executed (because it just gets it from the CDN).

2. No pre-rendering. So there is no page being rendered during build time. SSR only happens when the user requests the page. So the client doesn't receive anything pre-rendered. It still receives an SSR'd first paint, but its calculated during the client's request

Still good or did I miss something ?

[terse hound]

ok this is where it deviates from what normally happens.

This is what's happening in my case where when the client goes to / it gets the page without the middleware being executed
are you hosting somewhere other than vercel? because middleware should always be executed when you navigate to /, CDN or not (unless you send a cache-header telling your browser to cache the page for too long - in that case you need to remove the header)

[left laurel]

yes I'm hosting on AWS-Amplify

[left laurel]

I'm looking for a way to tell NextJS that it shouldn't statically generate the page on build. Because if it doesn't statically generate it then there will be nothing to store on the CDN

[terse hound]

hmm looks like it's a bug in your hosting provider...

[terse hound]

but if you want to do this, i guess you should move your existing page to a separate component

keep the page component a server component

(so without the use client)

then force-dynamic on it

[left laurel]

Damn...

[left laurel]

So that's the only way ? I can only use SSR on server components ?

[terse hound]

it's functionally the same as your existing page

// page.tsx
import PageClient from "./page-client";

export const dynamic = "force-dynamic";

export default function Page() {
  return <PageClient />;
}

// page-client.tsx
"use client";

// your actual page logic here

afaik many segment config exports only work in server components

runtime and metadata are examples

i didn't know dynamic is one of them as well but that is possible

[left laurel]

Interesting, I do remember being able to opt out of static rendering (build time rendering) in NextJS12 (where client components where not a thing).

Do you remember this as well ?

Perhaps it's something that could be added back in ?

[terse hound]

that's done by adding getServerSideProps/getInitialProps, which is equivalent to adding a wrapping server component (my example above)

[left laurel]

Aaaaalright, I see

That makes sense

Thank you very much!