1dc5c066cb
We initially wrote the [React page](https://nextjs.org/docs/getting-started/react-essentials) to introduce Server Components in the App Router, but over time, some implementation details have changed, and the information has become stale. The React team is working on adding new docs, so I'd like to change the narrative on the Next.js docs from "client vs. server components" to "writing code for the server and for the client" - and link back to the React documentation when it becomes available. As React developers, we're very familiar with writing code for the client, it's nice and simple. But doing so comes at the expense of not being familiar with the server. The aim of these docs is to help developers become proficient in both the client and server environments. I'd like to take it back to the foundations, and not use abstractions like SSG and CSR, MPAs or SPAs, as those terms come with their own set of assumptions that make it harder to understand how RSC works. Instead, we'll focus on the request lifecycle, show how application code flows from the server to the client, and discuss the trade-offs of doing operations in each environment. - [x] Page: Rendering Fundamentals - [x] Environments: Client and Server - [x] Request-response lifecycle - [x] Network Boundary - [x] Page: Server Components - [x] Benefits and use cases of server rendering - [x] How to use Server Components in Next.js - [x] How Server Components are rendered - [x] Static Rendering - [x] Dynamic Rendering - [x] Streaming - [x] Page: Client Components - [x] Benefits and use cases of client rendering - [x] How to use Client Components in Next.js - [x] How Client Components are rendered - [x] Initial vs. Subsquent navigation - [x] Page: Composition Patterns - [x] When to use client and server components - [x] Server Component Patterns - [x] Client Component Patterns - [x] Interleaving Client and Server Components - [ ] ~Diagrams~ will follow up with new PR. - [x] Set up redirects: https://github.com/vercel/front/pull/24917 --------- Co-authored-by: Térence Hollander <hollanderterence@gmail.com> Co-authored-by: shawnthwei <32075290+shawnthwei@users.noreply.github.com> Co-authored-by: Michael Novotny <manovotny@gmail.com>
23 lines
1.7 KiB
Text
23 lines
1.7 KiB
Text
---
|
|
title: Resolving "app/ Static to Dynamic Error" in Next.js
|
|
description: This document explains the "app/ Static to Dynamic Error" in Next.js and provides potential solutions to resolve it.
|
|
---
|
|
|
|
## Why This Error Occurred
|
|
|
|
The "`app/` Static to Dynamic Error" happens when one of your routes in the `app/` directory is initially generated statically at build time, but during runtime it attempts to use dynamic server values (such as `cookies()` or `headers()`) either for a fallback path or while a path is being revalidated.
|
|
|
|
Currently, Next.js does not support switching between static and dynamic types during runtime, so the system throws an error.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
To resolve this issue, you have two main options:
|
|
|
|
1. Prevent the conditional use of dynamic server values that may cause the static/dynamic mode of the page to differ between build time and runtime. This ensures consistency in the rendering mode of your page.
|
|
|
|
2. Leverage the `dynamic` export to control the handling of your page. If you want to ensure your page is always handled statically, regardless of the usage of dynamic server values, you can use `export const dynamic = 'force-static'`. Conversely, if you prefer your page to always be dynamic, you can use `export const dynamic = 'force-dynamic'`, and your page won't attempt to be statically generated.
|
|
|
|
## Useful Links
|
|
|
|
- [Static and Dynamic Rendering](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies) - Learn more about the differences between static and dynamic rendering in Next.js.
|
|
- [Dynamic Functions](/docs/app/building-your-application/rendering/server-components#dynamic-functions) - Understand more about the usage of dynamic server functions in your Next.js application.
|