SSR Exercises

Alright, let's get some practice!

Check out the following Git repository, which includes three SSR-related exercises:

Clock

Earlier in this course, we built a clock! In this exercise, we'll adapt that code so that it works in a server-side rendering context.

Acceptance Criteria:

There should be no errors.

Getting started:

You'll find the files for this exercise in /src/app/exercises/01-clock.

Once you've started a dev server with npm run dev, you can visit localhost:3000/exercises/01-clock to view the app in-browser. If you're using CodeSandbox, you can append /exercises/01-clock to the URL shown in the dev:3000 pane.

Solution:

Solution code (success)

Solution 1: Initializing with a placeholder

function Clock() {
  const [time, setTime] = React.useState();

  React.useEffect(() => {
    const intervalId = window.setInterval(() => {
      setTime(new Date());
    }, 50);

    return () => {
      window.clearInterval(intervalId);
    };
  }, []);

  return (
    <p className="clock">
      {time ? format(time, 'hh:mm:ss.S a') : '———'}
    </p>
  );
}

Solution 2: Suppressing the hydration mismatch warning

function Clock() {
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const intervalId = window.setInterval(() => {
      setTime(new Date());
    }, 50);

    return () => {
      window.clearInterval(intervalId);
    };
  }, []);

  return (
    <p
      suppressHydrationWarning
      className="clock"
    >
      {format(time, 'hh:mm:ss.S a')}
    </p>
  );
}

Neighborhood Shop

This next exercise features a checkout flow for an e-commerce shop:

Your mission is to persist the user's cart in Local Storage, so that their cart isn't lost when refreshing the page. Your approach should be SSR-compatible, using the techniques we learned in the previous lesson.

You'll find the files for this exercise in /src/app/exercises/02-checkout.

Acceptance Criteria:

A user's cart should not be lost when refreshing the page.
The user should never be lied to about their cart. If they have saved items, they shouldn't see "Your cart is empty", not even for a second.
- Instead, you can show a loading indicator. You'll find a suitable component in /src/components/Spinner.
There should be no hydration-related errors, and no errors inside the server terminal.
You'll need to tweak code in multiple files. Don't be afraid to restructure the provided code!

Solution:

Solution code (success)

// page.js
'use client';
import React from 'react';

import DATA from './data';
import reducer from './reducer';
import StoreItem from './StoreItem';
import CheckoutFlow from './CheckoutFlow';
import './styles.css';

function CheckoutExercise() {
  const [items, dispatch] = React.useReducer(
    reducer,
    null
  );

  React.useEffect(() => {
    const savedItems =
      window.localStorage.getItem('cart-items');

    dispatch({
      type: 'initialize',
      items:
        savedItems === null
          ? []
          : JSON.parse(savedItems),
    });
  }, []);

  React.useEffect(() => {
    if (items !== null) {
      window.localStorage.setItem(
        'cart-items',
        JSON.stringify(items)
      );
    }
  }, [items]);

  return (
    <>
      {/* Unchanged */}
    </>
  );
}

export default CheckoutExercise;

// CheckoutFlow.js
'use client';
import React from 'react';

import Spinner from '../../../components/Spinner';

import CartTable from './CartTable';

function CheckoutFlow({
  items,
  taxRate,
  handleDeleteItem,
}) {
  if (items === null) {
    return (
      <div className="checkout-flow empty">
        <Spinner />
      </div>
    );
  }

  if (items.length === 0) {
    return (
      <div className="checkout-flow empty">
        <p>Your Cart is Empty</p>
      </div>
    );
  }

  // Everything else unchanged
}

// reducer.js
import { produce } from 'immer';

function reducer(state, action) {
  return produce(state, (draftState) => {
    switch (action.type) {
      case 'initialize': {
        return action.items;
      }

      case 'add-item': {
        const itemIndex = state.findIndex(
          (item) => item.id === action.item.id
        );

        if (itemIndex !== -1) {
          draftState[itemIndex].quantity += 1;
          return;
        }

        draftState.push({
          ...action.item,
          quantity: 1,
        });
        return;
      }

      case 'delete-item': {
        const itemIndex = state.findIndex(
          (item) => item.id === action.item.id
        );

        draftState.splice(itemIndex, 1);
        return;
      }
    }
  });
}

export default reducer;

Artist Interview

Finally, we'll tackle a responsive interview layout.

This page has an “About the Artist” sidebar. This sidebar is intended to be hidden on smaller devices. The current implementation, however, is not SSR friendly. Your job is to fix it.

You'll find the files for this exercise in /src/app/exercises/03-interview.

Acceptance Criteria:

The initial code has a hydration mismatch on desktop/tablet window sizes (>500px). Your main task is to remove the mismatch.
No other errors should be thrown, on the server or the client.
The sidebar should not be visible when the window is less than 500px wide.

Solution:

Solution code (success)

This exercise can be solved using CSS!

aside {
  display: none;
}

@media (min-width: 500px) {
  aside {
    display: revert;
  }
}

We can then remove all of the responsive stuff from the page, and convert it to a Server Component:

-'use client';
import React from 'react';
-import { useMediaQuery } from 'react-responsive';

import Interview from './Interview';
import './styles.css';

function ExerciseThree() {
-  const isDesktop = useMediaQuery({
-    query: '(min-width: 500px)',
-  });


  return (
    <main>
      <Interview />
-      {isDesktop && (
        <aside>
          <img
            src="/gwen-artist.png"
            alt="Portrait of the artist"
          />
          <h2>About the Artist</h2>
          <p>
            Gwen Altaria is a contemporary artist known for
            her unique blend of traditional oil painting
            techniques and pop culture references. Born and
            raised in London, England, Vivi had an early
            love for both the fine arts and the fantastical
            worlds of video games.
          </p>
        </aside>
-      )}
    </main>
  );
}

export default ExerciseThree;