Docs: Document caching mechanisms

docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx

@@ -3,20 +3,18 @@ title: Linking and Navigating
 description: Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.
 ---
 
-The Next.js router uses [server-centric routing](/docs/app/building-your-application/routing#server-centric-routing-with-client-side-navigation) with [client-side navigation](#how-navigation-works). It supports [instant loading states](/docs/app/building-your-application/routing/loading-ui-and-streaming) and [concurrent rendering](https://react.dev/reference/react/startTransition). This means navigation maintains client-side state, avoids expensive re-renders, is interruptible, and doesn't cause race conditions.
+There are two ways to navigate between routes in Next.js:
 
-There are two ways to navigate between routes:
-
-- [`<Link>` Component](#link-component)
-- [`useRouter` Hook](#userouter-hook)
+- Using [`<Link>` Component](#link-component)
+- Using [`useRouter` Hook](#userouter-hook)
 
 This page will go through how to use `<Link>`, `useRouter()`, and dive deeper into how navigation works.
 
 ## `<Link>` Component
 
-`<Link>` is a React component that extends the HTML `<a>` element to provide [prefetching](#prefetching) and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.
+`<Link>` is a built-in component that extends the HTML `<a>` tag to provide [prefetching](#prefetching) and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.
 
-To use `<Link>`, import it from `next/link`, and pass a `href` prop to the component:
+You can use it by importing it from `next/link`, and passing a `href` prop to the component:
 
 ```tsx filename="app/page.tsx" switcher
 import Link from 'next/link'
@@ -34,11 +32,11 @@ export default function Page() {
 }
 ```
 
-There are optional props you can pass to `<Link>`. See the [API reference](/docs/app/api-reference/components/link) for more information.
+There are other optional props you can pass to `<Link>`. See the [API reference](/docs/app/api-reference/components/link) for more.
 
-## Examples
+### Examples
 
-### Linking to Dynamic Segments
+#### Linking to Dynamic Segments
 
 When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts:
 
@@ -58,7 +56,7 @@ export default function PostList({ posts }) {
 }
 ```
 
-### Checking Active Links
+#### Checking Active Links
 
 You can use [`usePathname()`](/docs/app/api-reference/functions/use-pathname) to determine if a link is active. For example, to add a class to the active link, you can check if the current `pathname` matches the `href` of the link:
 
@@ -93,13 +91,22 @@ export function Navigation({ navLinks }) {
 
 ### Scrolling to an `id`
 
-The default behavior of `<Link>` is to [scroll to the top of the route segment that has changed](#focus-and-scroll-management). When there is an `id` defined in `href`, it will scroll to the specific `id`, similarly to a normal `<a>` tag.
+The default behavior of `<Link>` is to scroll to the top of a new route or to maintain the scroll position for backwards and fowards navigation.
+
+If you'd like to scroll to a specific `id` on navigation, you can append the `href` string with a `#` hash link since `<Link>` renders to a `<a>` tag.
+
+```jsx
+<Link href="/dashboard#settings">Settings</Link>
+
+// Output
+<a href="/dashboard#settings">Settings</a>
+```
 
 ## `useRouter()` Hook
 
-The `useRouter` hook allows you to programmatically change routes inside [Client Components](/docs/getting-started/react-essentials).
+The `useRouter` hook allows you to programmatically change routes.
 
-To use `useRouter`, import it from `next/navigation`, and call the hook inside your Client Component:
+Since it's a hook, you can only use it inside Client Components. The hook is imported from `next/navigation`.
 
 ```jsx filename="app/page.js"
 'use client'
@@ -117,15 +124,15 @@ export default function Page() {
 }
 ```
 
-The `useRouter` provides methods such as `push()`, `refresh()`, and more. See the [API reference](/docs/app/api-reference/functions/use-router) for more information.
+For a full list of `useRouter` methods, see the [API reference](/docs/app/api-reference/functions/use-router).
 
 > **Recommendation:** Use the `<Link>` component to navigate between routes unless you have a specific requirement for using `useRouter`.
 
 ## How Navigation Works
 
 - A route transition is initiated using `<Link>` or calling `router.push()`.
 - The router updates the URL in the browser's address bar.
-- The router avoids unnecessary work by re-using segments that haven't changed (e.g. shared layouts) from the [client-side cache](#client-side-caching-of-rendered-server-components). This is also referred to as [partial rendering](/docs/app/building-your-application/routing#partial-rendering).
+- The router avoids unnecessary work by re-using segments that haven't changed (e.g. shared layouts) from the [client-side cache](#client-side-caching-of-rendered-server-components). This is also referred to as [partial rendering](#partial-rendering).
 - If the [conditions of soft navigation](#conditions-for-soft-navigation) are met, the router fetches the new segment from the cache rather than the server. If not, the router performs a [hard navigation](#hard-navigation) and fetches the Server Component payload from the server.
 - If created, [loading UI](/docs/app/building-your-application/routing/loading-ui-and-streaming) is shown from the server while the payload is being fetched.
 - The router uses the cached or fresh payload to render the new segments on the client.
@@ -160,6 +167,20 @@ By default, routes are prefetched as they become visible in the viewport when us
 > - Prefetching is only enabled in production.
 > - Prefetching can be disabled by passing `prefetch={false}` to `<Link>`.
 
+## Partial Rendering
+
+When navigating between sibling routes (e.g. `/dashboard/settings` and `/dashboard/analytics` below), Next.js will only fetch and render the layouts and pages in routes that change. It will **not** re-fetch or re-render anything above the segments in the subtree. This means that in routes that share a layout, the layout will be preserved when a user navigates between sibling pages.
+
+<Image
+  alt="How partial rendering works"
+  srcLight="/docs/light/partial-rendering.png"
+  srcDark="/docs/dark/partial-rendering.png"
+  width="1600"
+  height="945"
+/>
+
+Without partial rendering, each navigation would cause the full page to re-render on the server. Rendering only the segment that’s updating reduces the amount of data transferred and execution time, leading to improved performance.
+
 ### Soft Navigation
 
 On navigation, the cache for changed segments is reused (if it exists), and no new requests are made to the server for data.

docs/02-app/01-building-your-application/01-routing/index.mdx

@@ -146,30 +146,6 @@ This is because while folders define routes, only the contents returned by `page
 
 Learn more about [Project Organization and Colocation](/docs/app/building-your-application/routing/colocation).
 
-## Server-Centric Routing with Client-side Navigation
-
-Unlike the `pages` directory which uses client-side routing, the App Router uses **server-centric routing** to align with [Server Components](/docs/getting-started/react-essentials#server-components) and [data fetching on the server](/docs/app/building-your-application/data-fetching/fetching). With server-centric routing, the client does not have to download a route map and the same request for Server Components can be used to look up routes. This optimization is useful for all applications, but has a larger impact on applications with many routes.
-
-Although routing is server-centric, the router uses **client-side navigation** with the [Link Component](/docs/app/building-your-application/routing/linking-and-navigating#link-component) - resembling the behavior of a Single-Page Application. This means when a user navigates to a new route, the browser will not reload the page. Instead, the URL will be updated and Next.js will [only render the segments that change](#partial-rendering).
-
-Additionally, as users navigate around the app, the router will store the result of the React Server Component payload in an **in-memory client-side cache**. The cache is split by route segments which allows invalidation at any level and ensures consistency across [React's concurrent renders](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react). This means that for certain cases, the cache of a previously fetched segment can be re-used, further improving performance.
-
-Learn more about [Linking and Navigating](/docs/app/building-your-application/routing/linking-and-navigating).
-
-## Partial Rendering
-
-When navigating between sibling routes (e.g. `/dashboard/settings` and `/dashboard/analytics` below), Next.js will only fetch and render the layouts and pages in routes that change. It will **not** re-fetch or re-render anything above the segments in the subtree. This means that in routes that share a layout, the layout will be preserved when a user navigates between sibling pages.
-
-<Image
-  alt="How partial rendering works"
-  srcLight="/docs/light/partial-rendering.png"
-  srcDark="/docs/dark/partial-rendering.png"
-  width="1600"
-  height="945"
-/>
-
-Without partial rendering, each navigation would cause the full page to re-render on the server. Rendering only the segment that’s updating reduces the amount of data transferred and execution time, leading to improved performance.
-
 ## Advanced Routing Patterns
 
 The App Router also provides a set of conventions to help you implement more advanced routing patterns. These include:

docs/02-app/01-building-your-application/02-rendering/01-react-components.mdx

@@ -0,0 +1,6 @@
+---
+title: React Components
+description: Learn how Server and Client Components are rendered in Next.js.
+---
+
+This page is currently being written. Follow along and give feedback on [GitHub](https://github.com/vercel/next.js/pull/51579).