Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Document caching mechanisms #52514

Merged
merged 164 commits into from
Jul 31, 2023
Merged
Show file tree
Hide file tree
Changes from 161 commits
Commits
Show all changes
164 commits
Select commit Hold shift + click to select a range
071f700
Create 01-caching.mdx
delbaoliveira Jul 10, 2023
b534f16
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 10, 2023
9fa56bf
Write about request deduplication
delbaoliveira Jul 11, 2023
9302582
Iterate over table
delbaoliveira Jul 11, 2023
29cea97
Create new caching section
delbaoliveira Jul 11, 2023
b1b3e90
Split pages
delbaoliveira Jul 11, 2023
77fa471
Write about the Router Cache
delbaoliveira Jul 11, 2023
3fb4b4d
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 11, 2023
4545afa
Write note on cookies
delbaoliveira Jul 11, 2023
ec819a9
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 11, 2023
5cdb0b1
💅🏼
delbaoliveira Jul 12, 2023
692c0e8
Write about data cache
delbaoliveira Jul 12, 2023
f153e93
Outline and explain Render Cache works (wip)
delbaoliveira Jul 12, 2023
b73a19d
:nail_care:
delbaoliveira Jul 12, 2023
e9e46d8
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 12, 2023
9a0ef50
Re-order pages based on the request lifecycle
delbaoliveira Jul 13, 2023
1949046
Iterate over descriptions
delbaoliveira Jul 13, 2023
bba6718
Iterate over render cache explanation
delbaoliveira Jul 13, 2023
db27cd5
Continue writing about render cache
delbaoliveira Jul 17, 2023
14c8b79
💅
delbaoliveira Jul 17, 2023
5b9fbeb
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 17, 2023
1353a1d
Cache rules everything around me
delbaoliveira Jul 17, 2023
8ae00e9
Iterate over React and Data Cache
delbaoliveira Jul 18, 2023
e9f4eb7
Consolidate Render Cache page
delbaoliveira Jul 18, 2023
3886475
Consolidate Route Cache Page
delbaoliveira Jul 18, 2023
6f86ca5
Review the Router Cache
delbaoliveira Jul 18, 2023
2f271eb
Review the Render Cache
delbaoliveira Jul 18, 2023
353bba0
Write about cache interactions
delbaoliveira Jul 18, 2023
f1e505e
Consolidate APIs
delbaoliveira Jul 18, 2023
b283302
Create placeholder page for explaining how RCs are rendered by Next.js
delbaoliveira Jul 18, 2023
9d6bdfc
Move partial rendering section to "how navigation works"
delbaoliveira Jul 18, 2023
912b347
Add missing links
delbaoliveira Jul 18, 2023
44b76bd
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 18, 2023
1df38c6
Fix broken links
delbaoliveira Jul 18, 2023
4de0c41
Typo
delbaoliveira Jul 18, 2023
fe864d6
Remove advanced "routing" section from fundamentals page
delbaoliveira Jul 18, 2023
84dd428
Review Linking and Navigating page
delbaoliveira Jul 18, 2023
0c5fbeb
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 18, 2023
100d2d2
Rewrite prefetching section
delbaoliveira Jul 19, 2023
a47e590
Move note about Server Actions to caching page
delbaoliveira Jul 19, 2023
eb81c40
Write about caching during navigation
delbaoliveira Jul 19, 2023
9873231
Review partial rendering section
delbaoliveira Jul 19, 2023
3d27505
Add Seb's note on 30s caching for prefetch=false
delbaoliveira Jul 19, 2023
448129f
Add note about default prefetch=false for dynamic routes
delbaoliveira Jul 19, 2023
8803e6c
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 19, 2023
a2bab46
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
ab77ba5
Update docs/02-app/02-api-reference/02-file-conventions/layout.mdx
delbaoliveira Jul 19, 2023
64e7f04
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
938b165
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
e4dc01b
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
ae16e01
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
0efdaed
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
5cc517d
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
b77eed8
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
1f00dfd
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
3dcd96d
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 19, 2023
5b06e3d
Apply Tim's feedback
delbaoliveira Jul 19, 2023
12a796f
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 19, 2023
4a819d2
Remove the concept of hard navigation
delbaoliveira Jul 19, 2023
f6a018d
Document the scroll behavior for back/forward navigation
delbaoliveira Jul 19, 2023
3fbd489
Add related links
delbaoliveira Jul 19, 2023
c5d615f
💅🏼
delbaoliveira Jul 19, 2023
6aa667b
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 20, 2023
2be71f3
Simplify data fetching section (wip)
delbaoliveira Jul 20, 2023
5646b3b
Continue working on data fetching section (wip)
delbaoliveira Jul 20, 2023
ddb2f09
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
18b5c7b
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
d0f0f39
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
4f683d6
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
36c7e81
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
195d657
Rewrite data fetching patterns
delbaoliveira Jul 21, 2023
73474c2
Clean up data fetching section
delbaoliveira Jul 21, 2023
986b0e7
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 21, 2023
d73c4fc
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
8b4b3e7
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
51fc6ae
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
df9e4fd
Rename render cache to full route cache
delbaoliveira Jul 21, 2023
211bf3c
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 21, 2023
a3730b4
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
06e9be5
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 21, 2023
8b1bc1a
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 21, 2023
f51b1ff
React Payload -> RSC Payload
delbaoliveira Jul 21, 2023
083c6cf
Update index.mdx
delbaoliveira Jul 21, 2023
101d2e8
Apply Tim's feedback
delbaoliveira Jul 21, 2023
05b2730
Test hash links in related links
delbaoliveira Jul 21, 2023
9c6660d
Update rendering page
delbaoliveira Jul 24, 2023
7522af0
Re-order rendering pages
delbaoliveira Jul 24, 2023
24e8eb4
Rewrite rendering index page
delbaoliveira Jul 24, 2023
8084e7e
Make static and dynamic rendering the first page (as it's simpler)
delbaoliveira Jul 24, 2023
fb8c826
Runtime -> Request time (keep runtime for node.js and edge)
delbaoliveira Jul 24, 2023
5f778a0
Update note on hash link
delbaoliveira Jul 24, 2023
9d284a7
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 24, 2023
0192e85
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 24, 2023
5918117
Apply suggestions from code review
delbaoliveira Jul 24, 2023
c4ea159
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 24, 2023
9e4f91e
Re-order rendering and data fetching sections
delbaoliveira Jul 24, 2023
ba4d9f6
Re-order docs
delbaoliveira Jul 24, 2023
0149565
Add section on how on-demand revalidation works
delbaoliveira Jul 24, 2023
816c019
Remove instances of "on each request"
delbaoliveira Jul 24, 2023
7c5f238
Misc
delbaoliveira Jul 24, 2023
46e2fcc
Apply suggestions from code review
delbaoliveira Jul 24, 2023
6a2a03d
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 24, 2023
9fcb248
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 24, 2023
a70b9df
Remove mention of static and dynamic data fetching
delbaoliveira Jul 24, 2023
d6e3bee
Fix headings
delbaoliveira Jul 24, 2023
e516026
Apply suggestions from code review
delbaoliveira Jul 24, 2023
a4361fd
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 24, 2023
027d61d
Apply suggestions from code review
delbaoliveira Jul 24, 2023
7133d3a
Clarify streaming server rendering
delbaoliveira Jul 24, 2023
6e85f5d
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 24, 2023
c90c02d
Document how `generateStaticParams` affects the Full Route Cache
delbaoliveira Jul 24, 2023
4890cfc
Apply suggestions from code review
delbaoliveira Jul 24, 2023
58d56eb
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 24, 2023
c7529e9
Apply suggestions from code review
delbaoliveira Jul 24, 2023
140b574
Add note on router.refresh
delbaoliveira Jul 24, 2023
287aedd
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 24, 2023
d4a8c1b
Fix note about POST deduping, it's cached, not deduped
delbaoliveira Jul 24, 2023
b45ad12
Rename `router-handlers` file to `route-handlers`
delbaoliveira Jul 24, 2023
1b4f246
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 25, 2023
573a183
Apply Tim's feedback
delbaoliveira Jul 25, 2023
a87aeea
Missing .
delbaoliveira Jul 25, 2023
e79c74d
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 25, 2023
a68e12c
More feedback
delbaoliveira Jul 25, 2023
62724c5
Fix broken links
delbaoliveira Jul 25, 2023
c43980b
Clean up
delbaoliveira Jul 25, 2023
0713a1a
Clean up
delbaoliveira Jul 25, 2023
e8a2471
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 25, 2023
a0c4385
Clean up
delbaoliveira Jul 25, 2023
cc9ed46
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 25, 2023
91323a2
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 26, 2023
668e367
Clean up
delbaoliveira Jul 26, 2023
818ccca
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 26, 2023
2feb33c
Apply suggestions from code review
delbaoliveira Jul 26, 2023
8d2ddf2
Add caching overview diagram
delbaoliveira Jul 26, 2023
02937ae
Add request memoization diagram
delbaoliveira Jul 26, 2023
259c1b5
Add data cache diagram
delbaoliveira Jul 26, 2023
0e03646
Add revalidation diagrams and remove duplicate content
delbaoliveira Jul 26, 2023
29f3cc3
Add full route cache diagram
delbaoliveira Jul 26, 2023
8de3bcd
Add diagram that highlights difference between static and dynamic ren…
delbaoliveira Jul 26, 2023
42a0e27
General clean up
delbaoliveira Jul 26, 2023
3da96be
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 27, 2023
c972b17
Clean up
delbaoliveira Jul 27, 2023
acc706d
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 27, 2023
4113fd3
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 27, 2023
7d9e970
Clean up
delbaoliveira Jul 27, 2023
1918646
Review
delbaoliveira Jul 28, 2023
45ea561
Update docs/02-app/01-building-your-application/04-caching/index.mdx
delbaoliveira Jul 28, 2023
5e32ab4
Add that memoization applies to GET requests
delbaoliveira Jul 28, 2023
6952ea7
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 28, 2023
a8415a2
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 28, 2023
a226618
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 31, 2023
6c53792
Clarify when fetch requests are not cached (maybe)
delbaoliveira Jul 31, 2023
20997d9
Improve on-demand revalidation example
delbaoliveira Jul 31, 2023
3b744bf
Feedback
delbaoliveira Jul 31, 2023
d39f142
Apply suggestions from code review
delbaoliveira Jul 31, 2023
49a54c2
Feedback
delbaoliveira Jul 31, 2023
a6fefc8
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 31, 2023
888280b
Improve preload() example
delbaoliveira Jul 31, 2023
e5d050a
Swap columns in dynamically rendered table
delbaoliveira Jul 31, 2023
805b3cb
Apply suggestions from code review
delbaoliveira Jul 31, 2023
b24b928
Merge branch 'canary' into docs-7gjo
delbaoliveira Jul 31, 2023
ee330cb
Mooore feedback
delbaoliveira Jul 31, 2023
ffbbad6
Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…
delbaoliveira Jul 31, 2023
61257bd
Merge branch 'canary' into docs-7gjo
leerob Jul 31, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/01-getting-started/03-react-essentials.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Server and Client Components allow developers to build applications that span th

### Thinking in Server Components

Similar to how React changed the way we think about building UIs, React Server Components introduce a new mental model for building hybrid applications that leverage the [server and the client](/docs/app/building-your-application/rendering#rendering-environments).
Similar to how React changed the way we think about building UIs, React Server Components introduce a new mental model for building hybrid applications that leverage the server and the client.

Instead of React rendering your whole application client-side (such as in the case of Single-Page Applications), React now gives you the flexibility to choose where to render your components based on their purpose.

Expand Down Expand Up @@ -47,7 +47,7 @@ To make the transition to Server Components easier, all components inside the [A

## Client Components

Client Components enable you to add client-side interactivity to your application. In Next.js, they are [pre-rendered](/docs/app/building-your-application/rendering#component-level-client-and-server-rendering) on the server and [hydrated](/docs/app/building-your-application/rendering#component-level-client-and-server-rendering) on the client. You can think of Client Components as how components in the [Pages Router](/docs/pages) have always worked.
Client Components enable you to add client-side interactivity to your application. In Next.js, they are [pre-rendered](/docs/app/building-your-application/rendering) on the server and hydrated on the client. You can think of Client Components as how components in the [Pages Router](/docs/pages) have always worked.

### The "use client" directive

Expand Down Expand Up @@ -186,7 +186,7 @@ Behind the scenes, React handles rendering as follows:
- On the client, React renders Client Components and _slots in_ the rendered result of Server Components, merging the work done on the server and client.
- If any Server Components are nested inside a Client Component, their rendered content will be placed correctly within the Client Component.

> **Good to know**: In Next.js, during the initial page load, both the rendered result of Server Components from the above step and Client Components are [pre-rendered on the server as HTML](/docs/app/building-your-application/rendering#static-and-dynamic-rendering-on-the-server) to produce a faster initial page load.
> **Good to know**: In Next.js, during the initial page load, both the rendered result of Server Components from the above step and Client Components are [pre-rendered on the server as HTML](/docs/app/building-your-application/rendering) to produce a faster initial page load.

### Nesting Server Components inside Client Components

Expand Down Expand Up @@ -345,7 +345,7 @@ Props passed from the Server to Client Components need to be [serializable](http

> **Where is the Network Boundary?**
>
> In the App Router, the network boundary is between Server Components and Client Components. This is different from the Pages where the boundary is between `getStaticProps`/`getServerSideProps` and Page Components. Data fetched inside Server Components do not need to be serialized as it doesn't cross the network boundary unless it is passed to a Client Component. Learn more about [data fetching](/docs/app/building-your-application/data-fetching#fetching-data-on-the-server) with Server Components.
> In the App Router, the network boundary is between Server Components and Client Components. This is different from the Pages where the boundary is between `getStaticProps`/`getServerSideProps` and Page Components. Data fetched inside Server Components do not need to be serialized as it doesn't cross the network boundary unless it is passed to a Client Component. Learn more about [data fetching](/docs/app/building-your-application/data-fetching/patterns#fetching-data-on-the-server) with Server Components.

### Keeping Server-Only Code out of Client Components (Poisoning)

Expand Down Expand Up @@ -860,4 +860,4 @@ In the above example, both the layout and page need to make database queries. Ea

When fetching data, you may want to share the result of a `fetch` between a `page` or `layout` and some of its children components. This is an unnecessary coupling between the components and can lead to passing `props` back and forth between components.

Instead, we recommend colocating data fetching alongside the component that consumes the data. [`fetch` requests are automatically deduped](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping) in Server Components, so each route segment can request exactly the data it needs without worrying about duplicate requests. Next.js will read the same value from the `fetch` cache.
Instead, we recommend colocating data fetching alongside the component that consumes the data. [`fetch` requests are automatically memoized](/docs/app/building-your-application/caching#request-memoization) in Server Components, so each route segment can request exactly the data it needs without worrying about duplicate requests. Next.js will read the same value from the `fetch` cache.
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default function DashboardLayout({
> - You can use [Route Groups](/docs/app/building-your-application/routing/route-groups) to opt specific route segments in and out of shared layouts.
> - Layouts are [Server Components](/docs/getting-started/react-essentials) by default but can be set to a [Client Component](/docs/getting-started/react-essentials#client-components).
> - Layouts can fetch data. View the [Data Fetching](/docs/app/building-your-application/data-fetching) section for more information.
> - Passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will [automatically dedupe the requests](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping) without affecting performance.
> - Passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will [automatically dedupe the requests](/docs/app/building-your-application/caching#request-memoization) without affecting performance.
> - Layouts do not have access to the current route segment(s). To access route segments, you can use [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment) or [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) in a Client Component.
> - `.js`, `.jsx`, or `.tsx` file extensions can be used for Layouts.
> - A `layout.js` and `page.js` file can be defined in the same folder. The layout will wrap the page.
Expand Down
Loading