Are dynamic routes in Next.js rendered server-side or client-side?

by

I’m working in a project that requires server-side rendering for SEO purposes, and I’m using Next.js and React, and I’m using Next.js dynamic routing.

I created a simple page to check if it’s working:

import Head from 'next/head'
import React, { Fragment } from 'react'
import { withRouter } from 'next/router'

class Product extends React.Component {
  render() {
    return (
      <Fragment>
        <Head />
        <h1>{this.props.router.query.name}</h1>
      </Fragment>
    )
  }
}

export default withRouter(Product)

I place the code in /pages/product/[name].js, ran the dev server and visited localhost:3000/product/cheese.

When the page loaded, I checked the page source in my browser to check if it’s rendered server-side, and nothing in the code contains the word cheese.

Am I doing it wrong? Is it rendered client-side?

77 thoughts on “Are dynamic routes in Next.js rendered server-side or client-side?”