rsnext/docs/concepts/_server-side-and-client-side.md

Server-Side and Client-Side

When working with Next.js, we tend to write isomorphic code that can be rendered in both Node.js and the browser, to give you a better idea, take a look at the following example:

function Page() {
  return <h1>Hello World</h1>
}

export default Page

The above example is pretty basic, but it properly demonstrates what an isomorphic page looks like. The page can be prerendered with Node.js to static HTML, and it can also be rendered by the browser.

Now, what if the page tries to use a browser-only API?. Like so:

function Page() {
  return <h1>Hello World. Your user agent is: {navigator.userAgent}</h1>
}

export default Page

navigator is only available in the window object, therefore Node.js doesn't have access to it, so your page would end up in a server-side error.

To work with code that only works in one side, read the sections below.

Dynamic imports can also help you handle code that only loads when required.

Client-side only code

If you need access to APIs that only exist in the browser, like window, then useEffect is the recommended solution. Take a look at the following example:

import { useState, useEffect } from 'react'

function Page() {
  const [userAgent, setUserAgent] = useState()

  useEffect(() => {
    setUserAgent(navigator.userAgent)
  }, [])

  return <h1>Hello World. Your user agent is: {userAgent}</h1>
}

export default Page

Everything inside the function passed to useEffect will always run after the initial render, meaning it only runs in the browser.

You can achieve the same using class components, as in the following example:

import React from 'react'

class Page extends React.Component {
  componentDidMount() {
    this.setState({ userAgent: navigator.userAgent })
  }
  render() {
    return <h1>Hello World. Your user agent is: {this.state.userAgent}</h1>
  }
}

export default Page

componentDidMount will only execute in the browser, just like useEffect.

In both cases, userAgent will be undefined in the first render, and once useEffect or componentDidMount are executed, it will change to the value of navigator.userAgent.

Server-side only code

Following the userAgent example from above, we can make it always available to the page by adding getInitialProps, like so:

import { useState, useEffect } from 'react'

function Page({ userAgent }) {
  return <h1>Hello World. Your user agent is: {userAgent}</h1>
}

Page.getInitialProps = ({ req }) => {
  if (typeof window === 'undefined') {
    return { userAgent: req.headers['user-agent'] }
  } else {
    return { userAgent: navigator.userAgent }
  }
}

export default Page

The above example uses req to get the user agent in the server, and navigator if getInitialProps is executed in the browser.

typeof window not only allows the page to differentiate between sides, but it also enables webpack's dead code elimination. We replace typeof window with a constant using webpack DefinePlugin.

Only the required code that passes the condition (typeof window === 'undefined') will be included in the build. So the server-side build for the page's getInitialProps would look like:

Page.getInitialProps = ({ req }) => {
  return { userAgent: req.headers['user-agent'] }
}

And the client-side build:

Page.getInitialProps = ({ req }) => {
  return { userAgent: navigator.userAgent }
}

Thanks to dead code elimination, you could also import modules only for the required side, as in the following example:

Page.getInitialProps = async ({ req }) => {
  if (typeof window === 'undefined') {
    const cookie = await import('cookie')
    const cookies = cookie.parse(req.headers.cookie)

    return { userAgent: req.headers['user-agent'], theme: cookies.theme }
  } else {
    const cookies = await import('js-cookie')

    return { userAgent: navigator.userAgent, theme: cookies.get('theme') }
  }
}

And same as before, each build will only include the code that passes the condition.