nico.fyi
Published on

Must remember when using Next.js App Router

Authors
  • avatar
    Name
    Nico Prananta
    Twitter
    @2co_p

Here's one thing you must always remember when making website with Next.js with App Router. By default, every page component undergoes static rendering, which means HTML files are generated at build time. Take a look at this example to grasp the importance of this detail.

// app/support/page.tsx
export default async function SupportPage() {
    const now = new Date()
    return (
        <div>
            <form action="/api/support" method="POST">
                <input type="text" name="comment" >
                <input type="hidden" name="date" value={now} />
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

This code might seem fine, but there's a hidden issue. Did you spot it? The SupportPage component, lacking any dynamic functions or a dynamic constant set to force-dynamic as per Next.js documentation, gets rendered at build time. As a result, the now variable remains static, leading to outdated date values on the /support page, potentially causing data inconsistency in your database.

To address this, you should enable dynamic rendering. This can be achieved by exporting a dynamic constant set to force-dynamic:

// app/support/page.tsx

export const dynamic = 'force-dynamic'

export default async function SupportPage() {
    const now = new Date()
    return (
        <div>
            <form action="/api/support" method="POST">
                <input type="text" name="comment" >
                <input type="hidden" name="date" value={now} />
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

By the way, I'm making a book about Pull Requests Best Practices. Check it out!