> For the complete documentation index, see [llms.txt](https://openai.gitbook.io/code-cheatsheets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openai.gitbook.io/code-cheatsheets/react/next/preapprouter/ssr.md).

# SSR

Can make hybrid

* **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then *reused* on each request.
  * Whenever possible if not based on request because CDN

```bash
next build
```

* **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.
  * frequently update data that changes on user request
* Can even just normal **clientside render**

## Static Generation

#### Static Generation With Data

Can't render page until you fetch external data(DB, api, file system)

Export async ft called [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching) that will run **at build time server-side in prod** and **every request in dev** to pass as props

```jsx
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: { data },
    revalidate: 60, // Optional: Changes to incremental static regeneration(after build) where it will background(stale data will be shown) regenerate on request at most every 60 seconds
  }
}
```

If you have *dynamic routes*(\[...slug].ts), then you need to `getStaticPaths` so it knows what to pregenerate

```ts
export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // See the "paths" section below
    ],
    fallback: true, // false or "blocking"
  }
}) satisfies GetStaticPaths
```

## Server-side Rendering

To use Server-side Rendering, you need to export [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) instead of `getStaticProps` from your page.

Called at **request time** and context contains request specific parameters

```jsx
export async function getServerSideProps(context) {
const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}
```

## Clientside

### ReferenceError: window is not defined

If you configure Next.js to run in a SSR configuration and you’re using `window` in your code—or one of your packages does—then you’ll have to make Next aware that this package needs to be `dynamic`. The reason this error pops up is this: when html is rendered on the server (remember, SSR stands for server-side rendering), there’s no instance of `window`, because, well, there’s simply none. `window` is only accessible on the client-side.

I ran into this with a package called `react-json-view`. I use it to render beautiful json in html. Here’s how to make it work:

```
import dynamic from 'next/dynamic'
const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false })
```

Now, simply proceed to use that import as you’ve done before.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://openai.gitbook.io/code-cheatsheets/react/next/preapprouter/ssr.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.