Overview
Introduction to Data Management
Data fetching and mutation allow your application to retrieve information from backend services or APIs and securely submit form updates or modifications. This page explains how data retrieval handles caching, prefetching, and how forms process submissions safely in your application.
Key Concepts
Understanding how data flows and gets cached will help you build faster, more reliable web pages.
- Prefetching: The system automatically loads data for links or navigation forms when they appear on your screen (viewport), so pages load instantly when clicked.
- Caching: Retrieved data and static page shells are stored in memory or on disk to serve subsequent requests faster without hitting your backend services repeatedly.
- Server Actions: Secure functions executed on the server to handle form submissions and data updates without exposing sensitive database credentials to the browser.
Fetching Data and Handling Responses
Data Retrieval Workflow
When your application requests information, the system handles network requests, retries, and caching automatically behind the scenes.
- A component requests data or a user navigates to a new page route.
- The system checks local caches and prefetch stores for existing valid data.
- If data is missing or stale, a network request is dispatched to fetch the latest response.
- Responses are processed, parsed, and stored in the cache for future requests.
Note
If a network request fails due to temporary connectivity issues, automatic retries will be attempted for server-rendered data to ensure reliability.
Submitting Form Updates Safely
Submitting a Form
Forms can navigate to a destination URL or execute secure mutations when submitted.
- Fill out the form fields in your user interface.
- Click the submit button.
- The application intercepts the native submission, validates the action target and parameters, and prevents default page reloads when using soft navigation.
- The router handles the transition smoothly, updating your application state and history stack.
Warning
When using a string-based action URL on a form, file inputs are not supported because files cannot be encoded directly as search parameters. Use a function-based action if your form requires file uploads.
Configuration Options
Form Property Reference
When configuring forms and data requests, certain properties control navigation, caching behavior, and replacement strategies.
| Property | Type | Default | Description |
|---|---|---|---|
action | string | function | Required | The URL path to navigate to or the server function to execute upon submission. |
prefetch | boolean | null | null | Controls whether route data is prefetched when the form enters the viewport. |
replace | boolean | false | Replaces the current history state instead of pushing a new entry to the stack. |
scroll | boolean | true | Controls whether the window scrolls to the top of the page after navigation. |
Tip
Setting prefetch={false} disables automatic background prefetching for forms that you do not expect users to submit frequently, saving network bandwidth.