Static Site Generation with Next.js and TypeScript (Part VI) - Client-Side Rendering

 - Please read the fifth part of this blog post 

 before proceeding. It covers how to efficiently build a Next.js application with a single access token that can be used across all 

 functions. It also covers how to export a Next.js application to static HTML. If you just want to jump straight into this tutorial, then clone the 

If all rendering happened on the client-side, then you end up with several problems. For example, suppose you build an application with 

. If you disable JavaScript in the browser and reload the application, then you will find the page void of content since React cannot run without JavaScript. Therefore, checking the DOM in the developer console, the 

 element, where React renders all of the dynamic content, will be shown to be empty. There's also the possibility of the client running on an underpowered device, so rendering might take longer than expected. Or worse, the client has a poor network connection, so the application might have to wait longer for JavaScript bundles and other assets to be fully fetched before being able to render anything to the page. 

This is why it's important to not blindly render all content with only one rendering strategy. Rather, you should consider taking a hybrid approach when building an application. By having some content pre-rendered in advance via static-site generation (or server-side rendering) and having the remaining content rendered via client-side rendering, you can simultaneously deliver both a highly performant page and an enriching user experience. 

Thus far, every page of our Next.js application has been pre-rendered: the 

 pages. The initial HTML of the home page (

) contains the markup of the eight pet animal type cards that each allows users to navigate to a list of recently adopted pets. The initial HTML of each type page (

) contains the markup of the list of recently adopted pets. Once the page's initial HTML gets loaded and rendered, the browser hydrates the HTML. This breathes life into the page, giving it the ability to respond to user events and enabling features like client-side navigation and lazy-loading.

Below, I'm going to show you how to render dynamic content on the client-side of a Next.js application with the 

 page, the list of pet animals available for adoption will be fetched and rendered on the client-side. By delegating the rendering of this list to the client-side, we reduce the likelihood of the list being outdated and including a pet that might have been adopted very recently.

 of this tutorial series, then you can continue on from where the fifth part left off.

 component, let's define two state variables and their corresponding setter methods:

import { useState } from "react";

// ...

const TypePage: NextPage<TypePageProps> = ({ adoptedAnimals, type }) => {
  const [adoptableAnimals, setAdoptableAnimals] = useState([]);
  const [isUpdatingAdoptableListings, setIsUpdatingAdoptableListings] =
    useState(false);

  return (
    <>
      <Breadcrumbs
        className="mb-7"
        pages={[
          {
            name: "Types",
            url: `/`, // TODO: Create a page for `/types`.
          },
          {
            name: type.name,
            url: `/types/${type.id}`,
          },
        ]}
      />
      <main>
        <section className="relative mb-7" id="overview">
          <h1 className="text-7xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
            {type.name}
          </h1>
          <p className="mt-7 text-2xl text-gray-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </section>
        <section className="relative mb-7" id="recently-adopted">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            Recently Adopted
          </h3>
          <AnimalCardsList animals={adoptedAnimals} />
        </section>
      </main>
    </>
  );
};

// ...

To fetch a list of adoptable pet animals, let's call a 

 prop is passed to the dependency array of this Hook because its 

import { useEffect, useState } from "react";

// ...

const TypePage: NextPage<TypePageProps> = ({ adoptedAnimals, type }) => {
  const [adoptableAnimals, setAdoptableAnimals] = useState<Animal[]>([]);
  const [isUpdatingAdoptableListings, setIsUpdatingAdoptableListings] =
    useState<boolean>(false);

  useEffect(() => {
    const fetchAdoptableAnimals = async () => {
      let animals: Animal[] = [];

      try {
        setIsUpdatingAdoptableListings(true);

        ({ animals } = await (
          await fetch(
            `${NEXT_PUBLIC_PETFINDER_API_URL}/animals?type=${type.id}&status=adoptable&limit=5`,
            {
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${PETFINDER_ACCESS_TOKEN}`,
              },
            }
          )
        ).json());
      } catch (err) {
        console.error(err);
      }

      setAdoptableAnimals(animals);
      setIsUpdatingAdoptableListings(false);
    };

    fetchAdoptableAnimals();
  }, [type]);

  return (
    <>
      <Breadcrumbs
        className="mb-7"
        pages={[
          {
            name: "Types",
            url: `/`, // TODO: Create a page for `/types`.
          },
          {
            name: type.name,
            url: `/types/${type.id}`,
          },
        ]}
      />
      <main>
        <section className="relative mb-7" id="overview">
          <h1 className="text-7xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
            {type.name}
          </h1>
          <p className="mt-7 text-2xl text-gray-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </section>
        <section className="relative mb-7" id="recently-adopted">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            Recently Adopted
          </h3>
          <AnimalCardsList animals={adoptedAnimals} />
        </section>
      </main>
    </>
  );
};

// ...

When you run the Next.js application in development mode (

, you will encounter the following error message:

Unhandled Runtime Error
ReferenceError: process is not defined

 environment variable is not prefixed with 

 environment variable is not exposed to the browser. Therefore, we will need to fetch a new access token for sending requests to the Petfinder API on the client-side.

// ...

import {
  Animal,
  AnimalType,
  AnimalTypeBreed,
  AnimalTypesResponse,
  TokenResponse,
} from "../../shared/interfaces/petfinder.interface";

// ...

// Webpack might not be able to substitute the environment variable with its raw value unless the environment variable is specified as process.env.<ENV_VAR>.
// Therefore, you may also have to ditch destructuring and manually assign the environment variables like so:
const PETFINDER_ACCESS_TOKEN = process.env.PETFINDER_ACCESS_TOKEN;
const NEXT_PUBLIC_PETFINDER_API_URL = process.env.NEXT_PUBLIC_PETFINDER_API_URL;
const NEXT_PUBLIC_PETFINDER_CLIENT_ID =
  process.env.NEXT_PUBLIC_PETFINDER_CLIENT_ID;
const NEXT_PUBLIC_PETFINDER_CLIENT_SECRET =
  process.env.NEXT_PUBLIC_PETFINDER_CLIENT_SECRET;

// ...

const TypePage: NextPage<TypePageProps> = ({ adoptedAnimals, type }) => {
  // ...

  useEffect(() => {
    const fetchAdoptableAnimals = async () => {
      let animals: Animal[] = [];

      try {
        setIsUpdatingAdoptableListings(true);

        const { access_token }: TokenResponse = await (
          await fetch(`${NEXT_PUBLIC_PETFINDER_API_URL}/oauth2/token`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              grant_type: "client_credentials",
              client_id: NEXT_PUBLIC_PETFINDER_CLIENT_ID,
              client_secret: NEXT_PUBLIC_PETFINDER_CLIENT_SECRET,
            }),
          })
        ).json();

        ({ animals } = await (
          await fetch(
            `${NEXT_PUBLIC_PETFINDER_API_URL}/animals?type=${type.id}&status=adoptable&limit=5`,
            {
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${access_token}`,
              },
            }
          )
        ).json());
      } catch (err) {
        console.error(err);
      }

      setAdoptableAnimals(animals);
      setIsUpdatingAdoptableListings(false);
    };

    fetchAdoptableAnimals();
  }, [type]);

  // ...
};

// ...

To communicate to users that the list of adoptable pet animals is being fetched from the Petfinder API, let's add a 

 component and show it to the user anytime the page is updating this list. To the right of the animated spinner icon, the 

 component shows a default "Loading ..." message. With the 

 component's styles and the default "Loading..." message respectively.

$ touch components/{Loader,LoadingSpinner}.tsx

import { FC } from "react";

interface LoadingSpinnerProps {
  className?: string;
}

const LoadingSpinner: FC<LoadingSpinnerProps> = ({ className }) => (
  <svg
    className={`animate-spin h-full${className ? ` ${className}` : ""}`}
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle
      className="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      strokeWidth="4"
    ></circle>
    <path
      className="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
);

export default LoadingSpinner;
```

(`components/Loader.tsx`)

```tsx
import { FC, ReactNode } from "react";
import LoadingSpinner from "./LoadingSpinner";

interface LoaderProps {
  className?: string;
  children?: ReactNode;
}

const Loader: FC<LoaderProps> = ({ className, children }) => (
  <div
    className={`${
      children
        ? className
        : `flex items-center h-8 text-gray-500 ${
            className ? ` ${className}` : ""
          }`
    }`}
  >
    <LoadingSpinner />
    {children ? children : <p className="ml-2 text-lg">Loading...</p>}
  </div>
);

export default Loader;

 component that displays the list of adoptable pet animals. Additionally, let's update the 

// ...

import Loader from "../../components/Loader";

// ...

const TypePage: NextPage<TypePageProps> = ({ adoptedAnimals, type }) => {
  // ...

  return (
    <>
      <Breadcrumbs
        className="mb-7"
        pages={[
          {
            name: "Types",
            url: `/`, // TODO: Create a page for `/types`.
          },
          {
            name: type.name,
            url: `/types/${type.id}`,
          },
        ]}
      />
      <main>
        <section className="relative mb-7" id="overview">
          <h1 className="text-7xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
            {type.name}
          </h1>
          <p className="mt-7 text-2xl text-gray-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </section>
        <section className="relative mb-7" id="recently-adopted">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            Recently Adopted
          </h3>
          <AnimalCardsList animals={adoptedAnimals} />
        </section>
        <section className="relative mb-7" id="for-adoption">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            For Adoption
          </h3>
          <div className="relative">
            {isUpdatingAdoptableListings && <Loader className="mb-7" />}
            <AnimalCardsList animals={adoptableAnimals} />
          </div>
        </section>
      </main>
    </>
  );
};

// ...

When the Next.js application refreshes with these changes, fully reload the page. The list of recently adopted pet animals (above-the-fold content) instantly gets rendered since it was pre-rendered at build time. If you quickly scroll down the page, you can momentarily see the loader just before it disappears and watch as the client renders the fetched list of adoptable pet animals (below-the-fold content).

Updating the List of Adoptable Pet Animals

Suppose the page is kept open for some time. The initial list of adoptable pet animals will become outdated. Let's give the user the ability to manually update this list by clicking an "Update Listings" button.

import { FC, SyntheticEvent } from "react";
import LoadingSpinner from "./LoadingSpinner";

interface UpdateButtonProps {
  className?: string;
  isUpdating: boolean;
  handleOnClick: (evt: SyntheticEvent) => void;
  text: string;
  updateText: string;
}

const UpdateButton: FC<UpdateButtonProps> = ({
  className,
  isUpdating,
  handleOnClick,
  text,
  updateText,
}) => (
  <button
    type="button"
    className={`inline-flex items-center font-semibold leading-6 rounded-md text-white bg-purple-600 hover:bg-purple-500 px-4 py-2 h-10 text-sm shadow transition ease-in-out duration-150${
      className ? ` ${className}` : ""
    }${isUpdating ? " cursor-not-allowed" : ""}`}
    onClick={handleOnClick}
    disabled={isUpdating}
  >
    {isUpdating && <LoadingSpinner className="-ml-1 mr-3 text-white" />}
    {isUpdating ? updateText : text}
  </button>
);

export default UpdateButton;

When the user clicks on the button, and the 

 Hook so that it can also be called within the 

 Hook, the function is memoized and only gets recreated when the prop 

 changes, which should never change at any point during the lifetime of the 

 component. Therefore, anytime a state variable like 

 gets updated and causes a re-render of the component, the 

import { useCallback, useEffect, useState } from "react";

// ...

import UpdateButton from "../../components/UpdateButton";

// ...

const TypePage: NextPage<TypePageProps> = ({ adoptedAnimals, type }) => {
  const [adoptableAnimals, setAdoptableAnimals] = useState<Animal[]>([]);
  const [isUpdatingAdoptableListings, setIsUpdatingAdoptableListings] =
    useState<boolean>(false);

  const fetchAdoptableAnimals = useCallback(async () => {
    let animals: Animal[] = [];

    try {
      setIsUpdatingAdoptableListings(true);

      const { access_token }: TokenResponse = await (
        await fetch(`${NEXT_PUBLIC_PETFINDER_API_URL}/oauth2/token`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            grant_type: "client_credentials",
            client_id: `${NEXT_PUBLIC_PETFINDER_CLIENT_ID}`,
            client_secret: `${NEXT_PUBLIC_PETFINDER_CLIENT_SECRET}`,
          }),
        })
      ).json();

      ({ animals } = await (
        await fetch(
          `${NEXT_PUBLIC_PETFINDER_API_URL}/animals?type=${type.id}&status=adoptable&limit=5`,
          {
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${access_token}`,
            },
          }
        )
      ).json());
    } catch (err) {
      console.error(err);
    }

    setAdoptableAnimals(animals);
    setIsUpdatingAdoptableListings(false);
  }, [type]);

  const updateAdoptableListings = async () => {
    await fetchAdoptableAnimals();
  };

  useEffect(() => {
    fetchAdoptableAnimals();
  }, [fetchAdoptableAnimals]);

  return (
    <>
      <Breadcrumbs
        className="mb-7"
        pages={[
          {
            name: "Types",
            url: `/`, // TODO: Create a page for `/types`.
          },
          {
            name: type.name,
            url: `/types/${type.id}`,
          },
        ]}
      />
      <main>
        <section className="relative mb-7" id="overview">
          <h1 className="text-7xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
            {type.name}
          </h1>
          <p className="mt-7 text-2xl text-gray-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </section>
        <section className="relative mb-7" id="recently-adopted">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            Recently Adopted
          </h3>
          <AnimalCardsList animals={adoptedAnimals} />
        </section>
        <section className="relative mb-7" id="for-adoption">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            For Adoption
          </h3>
          <UpdateButton
            className="absolute top-3.5 right-0"
            isUpdating={isUpdatingAdoptableListings}
            handleOnClick={updateAdoptableListings}
            text="Update Listings"
            updateText="Updating Listings..."
          />
          <div className="relative">
            {isUpdatingAdoptableListings &&
              (adoptableAnimals.length > 0 ? (
                <div className="absolute top-0 right-0 left-0 bottom-0 bg-white opacity-60 rounded-md z-[2]">
                  <Loader className="absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 text-gray-800" />
                </div>
              ) : (
                <Loader className="mb-7" />
              ))}
            <AnimalCardsList animals={adoptableAnimals} />
          </div>
        </section>
      </main>
    </>
  );
};

// ...

Upon the initial page load, a simple animated spinner icon with the text "Loading..." is shown to the user as the client fetches for a list of adoptable pet animals. Then, anytime the user clicks on the "Update Listings" button to update the list of adoptable pet animals, an overlay with an animated spinner icon gets placed on top of the previous listings. This preserves the previous listings in case the client cannot update the list of adoptable pet animals (due to a network error, etc.).

 component to ensure that the previous listings are kept in state when the client fails to update the list of adoptable pet animals. We add another state variable 

 only if an error was encountered when fetching an updated list of adoptable pet animals. When 

, a generic error message "Uh Oh! We could not update the listings at this time. Please try again." is shown to the user.  

// ...

import {
  Animal,
  AnimalsResponse,
  AnimalType,
  AnimalTypeBreed,
  AnimalTypesResponse,
  TokenResponse,
} from "../../shared/interfaces/petfinder.interface";

// ...

const TypePage: NextPage<TypePageProps> = ({ adoptedAnimals, type }) => {
  // ...

  const [isUpdateFailed, setIsUpdateFailed] = useState<boolean>(false);

  const fetchAdoptableAnimals = useCallback(async () => {
    try {
      setIsUpdateFailed(false);
      setIsUpdatingAdoptableListings(true);

      const { access_token }: TokenResponse = await (
        await fetch(`${NEXT_PUBLIC_PETFINDER_API_URL}/oauth2/token`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            grant_type: "client_credentials",
            client_id: `${NEXT_PUBLIC_PETFINDER_CLIENT_ID}`,
            client_secret: `${NEXT_PUBLIC_PETFINDER_CLIENT_SECRET}`,
          }),
        })
      ).json();

      const { animals }: AnimalsResponse = await (
        await fetch(
          `${NEXT_PUBLIC_PETFINDER_API_URL}/animals?type=${type.id}&status=adoptable&limit=5`,
          {
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${access_token}`,
            },
          }
        )
      ).json();

      setAdoptableAnimals(animals);
    } catch (err) {
      console.error(err);

      setIsUpdateFailed(true);
    }

    setIsUpdatingAdoptableListings(false);
  }, [type]);

  // ...

  return (
    <>
      <Breadcrumbs
        className="mb-7"
        pages={[
          {
            name: "Types",
            url: `/`, // TODO: Create a page for `/types`.
          },
          {
            name: type.name,
            url: `/types/${type.id}`,
          },
        ]}
      />
      <main>
        <section className="relative mb-7" id="overview">
          <h1 className="text-7xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
            {type.name}
          </h1>
          <p className="mt-7 text-2xl text-gray-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </section>
        <section className="relative mb-7" id="recently-adopted">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            Recently Adopted
          </h3>
          <AnimalCardsList animals={adoptedAnimals} />
        </section>
        <section className="relative mb-7" id="for-adoption">
          <h3 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-7">
            For Adoption
          </h3>
          <UpdateButton
            className="absolute top-3.5 right-0"
            isUpdating={isUpdatingAdoptableListings}
            handleOnClick={updateAdoptableListings}
            text="Update Listings"
            updateText="Updating Listings..."
          />
          <div className="relative">
            {isUpdatingAdoptableListings &&
              (adoptableAnimals.length > 0 ? (
                <div className="absolute top-0 right-0 left-0 bottom-0 bg-white opacity-60 rounded-md z-[2]">
                  <Loader className="absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 text-gray-800" />
                </div>
              ) : (
                <Loader className="mb-7" />
              ))}
            {!isUpdatingAdoptableListings && isUpdateFailed && (
              <p className="mb-7 text-red-600">
                Uh Oh! We could not update the listings at this time. Please try
                again.
              </p>
            )}
            <AnimalCardsList animals={adoptableAnimals} />
          </div>
        </section>
      </main>
    </>
  );
};

// ...

If you find yourself stuck at any point during this tutorial, then feel free to check out the project's repository for this part of the tutorial 

Please stay tuned for future parts, which will cover topics like API routes and deployment of the Next.js application to Vercel!

If you want to learn more advanced techniques with TypeScript, React and Next.js, then check out our

Fullstack React with TypeScript Masterclass

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Static Site Generation with Next.js and TypeScript (Part VI) - Client-Side Rendering

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript