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

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 that will run at build time server-side in prod and every request in dev to pass as props

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: ...
  }
}

Server-side Rendering

To use Server-side Rendering, you need to export getServerSideProps instead of getStaticProps from your page.

Called at request time and context contains request specific parameters

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.