diff --git a/docs/01-app/01-getting-started/08-updating-data.mdx b/docs/01-app/01-getting-started/08-updating-data.mdx index e21ad528dabe5..693283d8fca8a 100644 --- a/docs/01-app/01-getting-started/08-updating-data.mdx +++ b/docs/01-app/01-getting-started/08-updating-data.mdx @@ -172,6 +172,8 @@ There are two main ways you can invoke a Server Function: 1. [Forms](#forms) in Server and Client Components 2. [Event Handlers](#event-handlers) and [useEffect](#useeffect) in Client Components +> **Good to know:** Server Functions are designed for server-side mutations. The client currently dispatches and awaits them one at a time. This is an implementation detail and may change. If you need parallel data fetching, use [data fetching](/docs/app/getting-started/fetching-data#server-components) in Server Components, or perform parallel work inside a single Server Function or [Route Handler](/docs/app/guides/backend-for-frontend#manipulating-data). + ### Forms React extends the HTML [`
`](https://react.dev/reference/react-dom/components/form) element to allow Server Function to be invoked with the HTML `action` prop. @@ -355,17 +357,19 @@ export async function createPost(formData) { ### Redirecting -You may want to redirect the user to a different page after performing an update. You can do this by calling [`redirect`](/docs/app/api-reference/functions/redirect) within the Server Function: +You may want to redirect the user to a different page after performing an update. You can do this by calling [`redirect`](/docs/app/api-reference/functions/redirect) within the Server Function. ```ts filename="app/lib/actions.ts" switcher 'use server' +import { revalidatePath } from 'next/cache' import { redirect } from 'next/navigation' export async function createPost(formData: FormData) { // Update data // ... + revalidatePath('/posts') redirect('/posts') } ``` @@ -373,16 +377,20 @@ export async function createPost(formData: FormData) { ```js filename="app/actions.js" switcher 'use server' +import { revalidatePath } from 'next/cache' import { redirect } from 'next/navigation' export async function createPost(formData) { // Update data // ... + revalidatePath('/posts') redirect('/posts') } ``` +Calling `redirect` [throws](/docs/app/api-reference/functions/redirect#behavior) a framework handled control-flow exception. Any code after it won't execute. If you need fresh data, call [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) or [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) beforehand. + ### Cookies You can `get`, `set`, and `delete` cookies inside a Server Action using the [`cookies`](/docs/app/api-reference/functions/cookies) API: diff --git a/docs/01-app/02-guides/production-checklist.mdx b/docs/01-app/02-guides/production-checklist.mdx index 2dc62274cb62d..49bf12a80a538 100644 --- a/docs/01-app/02-guides/production-checklist.mdx +++ b/docs/01-app/02-guides/production-checklist.mdx @@ -84,6 +84,8 @@ While building your application, we recommend using the following features to en - **[Forms and Validation](/docs/app/guides/forms):** Use Server Actions to handle form submissions, server-side validation, and handle errors. +- **[Global Error UI](/docs/app/api-reference/file-conventions/error#global-error):** Add `app/global-error.tsx` to provide consistent, accessible fallback UI and recovery for uncaught errors across your app. +- **[Global 404](/docs/app/api-reference/file-conventions/not-found#global-not-foundjs-experimental):** Add `app/global-not-found.tsx` to serve an accessible 404 for unmatched routes across your app.