Transcript

Now that we have our cart context all ready to go, we want to see that initial data, those two cart items on the initial page render from the server. So we want to make sure that our cart context is initialized properly to whatever we have on the server. Now, this is an interesting exercise because it shows us how to get

data from our React server components into our client components. If you have any questions or get stuck, be sure to check out that resource section associated with the video. Good luck.

exercise

Initialize the Cart with Server Data

Jack Herrington

Code Gitpod

Now that we have our Cart Context working, the next step is to get the initial data brought in. In this case, we want to see the two cart items on the initial page render from the server.

In order to do this, we need to get data from our React Server Components into our Client Components.

Challenge

Your objective is to initialize the cart context with the current contents of the cart from the server.

This will require you to add a new CartContext component and add it to the layout.tsx file.

The Layout component already gets the current contents of the cart:

All you'll need to do is connect this cart to the CartContext component.

Transcript

data from our React server components into our client components. If you have any questions or get stuck, be sure to check out that resource section associated with the video. Good luck.

State Management with React Context

Redux for State Management

Zustand for State Management

Jotai for State Management

Outro

Transcript

Initialize the Cart with Server Data

Challenge

Transcript

Initialize the Cart with Server Data

Challenge