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

February 16, 2021 by admin

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?

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

import Layout from '../components/MyLayout';
import Link from 'next/link';
import fetch from 'isomorphic-unfetch';

const Index = props => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.shows.map(show => (
        <li key={show.id}>
          <Link href="/p/[id]" as={`/p/${show.id}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
);

Index.getInitialProps = async function() {
  const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
  const data = await res.json();

  console.log(`Show data fetched. Count: ${data.length}`);

  return {
    shows: data.map(entry => entry.show)
  };
};

As you will soon see, you will need to use getInitialProps for it to be server side rendered. Then this page will be created during the build, and will have all the applicable information in the view source. Will have SEO as well.

When you run npm build, it will show you which is statically generated, and what is ssr. But you need to use getInitialProps otherwise it will be generated client side.