ProNextJS

    Now it’s your turn! Try solving this exercise.

    Run locally (recommended)

    Code

    Start by cloning the project repository and follow instructions in the README.

    Or in browser

    Open on Gitpod
    Continue
    exercise

    Initialize the Cart with Server Data

    Jack HerringtonJack Herrington
    CodeGitpod

    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:

    const cart = await getCart();

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

    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.