Docs: Review and update getServerSideProps page (#59545)

- Remove recommendation for client-side rendering
- Cut repetition 
- Improve tone

Author: delbaoliveira

docs/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx

@@ -3,7 +3,11 @@ title: getServerSideProps
 description: Fetch data on each request with `getServerSideProps`.
 ---
 
-If you export a function called `getServerSideProps` (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by `getServerSideProps`.
+`getServerSideProps` is a Next.js function that can be used fetch data and render the contents of a page at request time.
+
+## Example
+
+You can use `getServerSideProps` by exporting it from a Page Component. The example below how you can fetch data from a 3rd party API in `getServerSideProps`, and pass the data to the page as props:
 
 ```tsx filename="pages/index.tsx" switcher
 import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
@@ -13,67 +17,75 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getServerSideProps = (async (context) => {
+export const getServerSideProps = (async () => {
+  // Fetch data from external API
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
-  const repo = await res.json()
+  const repo: Repo = await res.json()
+  // Pass data to the page via props
   return { props: { repo } }
-}) satisfies GetServerSideProps<{
-  repo: Repo
-}>
+}) satisfies GetServerSideProps<{ repo: Repo }>
 
 export default function Page({
   repo,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  return repo.stargazers_count
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
 }
 ```
 
 ```jsx filename="pages/index.js" switcher
 export async function getServerSideProps() {
+  // Fetch data from external API
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
+  // Pass data to the page via props
   return { props: { repo } }
 }
 
 export default function Page({ repo }) {
-  return repo.stargazers_count
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
 }
 ```
 
-> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
-
-## When does getServerSideProps run
-
-`getServerSideProps` only runs on server-side and never runs on the browser. If a page uses `getServerSideProps`, then:
-
-- When you request this page directly, `getServerSideProps` runs at request time, and this page will be pre-rendered with the returned props
-- When you request this page on client-side page transitions through [`next/link`](/docs/pages/api-reference/components/link) or [`next/router`](/docs/pages/api-reference/functions/use-router), Next.js sends an API request to the server, which runs `getServerSideProps`
+## When should I use `getServerSideProps`?
 
-`getServerSideProps` returns JSON which will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have `getServerSideProps` defined.
+You should use `getServerSideProps` if you need to render a page that relies on personalized user data, or information that can only be known at request time. For example, `authorization` headers or a geolocation.
 
-You can use the [next-code-elimination tool](https://next-code-elimination.vercel.app/) to verify what Next.js eliminates from the client-side bundle.
+If you do not need to fetch the data at request time, or would prefer to cache the data and pre-rendered HTML, we recommend using [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
 
-`getServerSideProps` can only be exported from a **page**. You can’t export it from non-page files.
+## Behavior
 
-Note that you must export `getServerSideProps` as a standalone function — it will **not** work if you add `getServerSideProps` as a property of the page component.
+- `getServerSideProps` runs on the server.
+- `getServerSideProps` can only be exported from a **page**.
+- `getServerSideProps` returns JSON.
+- When a user visits a page, `getServerSideProps` will be used to fetch data at request time, and the data is used to render the initial HTML of the page.
+- `props` passed to the page component can be viewed on the client as part of the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
+- When a user visits the page through [`next/link`](/docs/pages/api-reference/components/link) or [`next/router`](/docs/pages/api-reference/functions/use-router), Next.js sends an API request to the server, which runs `getServerSideProps`.
+- You do not have to call a Next.js [API Route](/docs/pages/building-your-application/routing/api-routes) to fetch data when using `getServerSideProps` since the function runs on the server. Instead, you can call a CMS, database, or other third-party APIs directly from inside `getServerSideProps`.
 
-The [`getServerSideProps` API reference](/docs/pages/api-reference/functions/get-server-side-props) covers all parameters and props that can be used with `getServerSideProps`.
+> **Good to know:**
+>
+> - See [`getServerSideProps` API reference](/docs/pages/api-reference/functions/get-server-side-props) for parameters and props that can be used with `getServerSideProps`.
+> - You can use the [next-code-elimination tool](https://next-code-elimination.vercel.app/) to verify what Next.js eliminates from the client-side bundle.
 
-## When should I use getServerSideProps
+## Error Handling
 
-You should use `getServerSideProps` only if you need to render a page whose data must be fetched at request time. This could be due to the nature of the data or properties of the request (such as `authorization` headers or geo location). Pages using `getServerSideProps` will be server side rendered at request time and only be cached if [cache-control headers are configured](/docs/pages/building-your-application/deploying/production-checklist#caching).
+If an error is thrown inside `getServerSideProps`, it will show the `pages/500.js` file. Check out the documentation for [500 page](/docs/pages/building-your-application/routing/custom-error#500-page) to learn more on how to create it. During development, this file will not be used and the development error overlay will be shown instead.
 
-If you do not need to render the data during the request, then you should consider fetching data on the [client side](#fetching-data-on-the-client-side) or [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
+## Edge Cases
 
-### getServerSideProps or API Routes
+### Edge Runtime
 
-It can be tempting to reach for an [API Route](/docs/pages/building-your-application/routing/api-routes) when you want to fetch data from the server, then call that API route from `getServerSideProps`. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to both `getServerSideProps` and API Routes running on the server.
+`getServerSideProps` can be used with both [Serverless and Edge Runtimes](/docs/pages/building-your-application/rendering/edge-and-nodejs-runtimes), and you can set props in both.
 
-Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from `getServerSideProps`. This produces an additional call, reducing performance. Instead, directly import the logic used inside your API Route into `getServerSideProps`. This could mean calling a CMS, database, or other API directly from inside `getServerSideProps`.
-
-### getServerSideProps with Edge API Routes
-
-`getServerSideProps` can be used with both [Serverless and Edge Runtimes](/docs/pages/building-your-application/rendering/edge-and-nodejs-runtimes), and you can set props in both. However, currently in the Edge Runtime, you do not have access to the response object. This means that you cannot — for example — add cookies in `getServerSideProps`. To have access to the response object, you should **continue to use the Node.js runtime**, which is the default runtime.
+However, currently in the Edge Runtime, you do not have access to the response object. This means that you cannot — for example — add cookies in `getServerSideProps`. To have access to the response object, you should **continue to use the Node.js runtime**, which is the default runtime.
 
 You can explicitly set the runtime on a per-page basis by modifying the `config`, for example:
 
@@ -85,36 +97,7 @@ export const config = {
 export const getServerSideProps = async () => {}
 ```
 
-## Fetching data on the client side
-
-If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the [client side](/docs/pages/building-your-application/data-fetching/client-side). An example of this is user-specific data:
-
-- First, immediately show the page without data. Parts of the page can be pre-rendered using Static Generation. You can show loading states for missing data
-- Then, fetch the data on the client side and display it when ready
-
-This approach works well for user dashboard pages, for example. Because a dashboard is a private, user-specific page, SEO is not relevant and the page doesn’t need to be pre-rendered. The data is frequently updated, which requires request-time data fetching.
-
-## Using getServerSideProps to fetch data at request time
-
-The following example shows how to fetch data at request time and pre-render the result.
-
-```jsx
-// This gets called on every request
-export async function getServerSideProps() {
-  // Fetch data from external API
-  const res = await fetch(`https://.../data`)
-  const data = await res.json()
-
-  // Pass data to the page via props
-  return { props: { data } }
-}
-
-export default function Page({ data }) {
-  // Render data...
-}
-```
-
-## Caching with Server-Side Rendering (SSR)
+### Caching with Server-Side Rendering (SSR)
 
 You can use caching headers (`Cache-Control`) inside `getServerSideProps` to cache dynamic responses. For example, using [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/).
 
@@ -138,8 +121,4 @@ export async function getServerSideProps({ req, res }) {
 }
 ```
 
-Learn more about [caching](/docs/pages/building-your-application/deploying/production-checklist#caching).
-
-## Does getServerSideProps render an error page
-
-If an error is thrown inside `getServerSideProps`, it will show the `pages/500.js` file. Check out the documentation for [500 page](/docs/pages/building-your-application/routing/custom-error#500-page) to learn more on how to create it. During development this file will not be used and the dev overlay will be shown instead.
+However, before reaching for `cache-control`, we recommend seeing if [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) with [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) is a better fit for your use case.

docs/03-pages/02-api-reference/02-functions/get-server-side-props.mdx

@@ -13,30 +13,40 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getServerSideProps = (async (context) => {
+export const getServerSideProps = (async () => {
+  // Fetch data from external API
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
-  const repo = await res.json()
+  const repo: Repo = await res.json()
+  // Pass data to the page via props
   return { props: { repo } }
-}) satisfies GetServerSideProps<{
-  repo: Repo
-}>
+}) satisfies GetServerSideProps<{ repo: Repo }>
 
 export default function Page({
   repo,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  return repo.stargazers_count
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
 }
 ```
 
 ```jsx filename="pages/index.js" switcher
 export async function getServerSideProps() {
+  // Fetch data from external API
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
+  // Pass data to the page via props
   return { props: { repo } }
 }
 
 export default function Page({ repo }) {
-  return repo.stargazers_count
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
 }
 ```