03. Client Components/02. Module Resolution (๐Ÿ solution)

Module Resolution

๐Ÿ‘จโ€๐Ÿ’ผ Great! Now our server is all configured to create 'use client' module references to properly separate our client and server code. And our client is configured to resolve those references to the client code necessary to run in the browser and make the components stateful and interactive!
If you check out the RSC payload now, you'll notice that the client component is now referenced in the RSC payload:
2:"$Sreact.suspense"
1:{"name":"App","env":"Server","owner":null}
0:D"$1"
4:{"name":"SearchResultsFallback","env":"Server","owner":"$1"}
3:D"$4"
3:[["$","li","0",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","1",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","2",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","3",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","4",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","5",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","6",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","7",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","8",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","9",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","10",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"],["$","li","11",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"},"$4"],"... loading"]},"$4"]},"$4"]]
6:{"name":"SearchResults","env":"Server","owner":"$1"}
5:D"$6"
8:{"name":"ShipFallback","env":"Server","owner":"$1"}
7:D"$8"
7:["$","div",null,{"className":"ship-info","children":[["$","div",null,{"className":"ship-info__img-wrapper","children":["$","img",null,{"src":"/img/ships/ec7a3f950f99f.webp?size=200","alt":"ec7a3f950f99f"},"$8"]},"$8"],["$","section",null,{"children":["$","h2",null,{"children":"Loading..."},"$8"]},"$8"],["$","div",null,{"children":["Top Speed: XX"," ",["$","small",null,{"children":"lyh"},"$8"]]},"$8"],["$","section",null,{"children":["$","ul",null,{"children":[["$","li","0",{"children":[["$","label",null,{"children":"loading"},"$8"],":"," ",["$","span",null,{"children":["XX ",["$","small",null,{"children":"(loading)"},"$8"]]},"$8"]]},"$8"],["$","li","1",{"children":[["$","label",null,{"children":"loading"},"$8"],":"," ",["$","span",null,{"children":["XX ",["$","small",null,{"children":"(loading)"},"$8"]]},"$8"]]},"$8"],["$","li","2",{"children":[["$","label",null,{"children":"loading"},"$8"],":"," ",["$","span",null,{"children":["XX ",["$","small",null,{"children":"(loading)"},"$8"]]},"$8"]]},"$8"]]},"$8"]},"$8"]]},"$8"]
a:{"name":"ShipDetails","env":"Server","owner":"$1"}
9:D"$a"
0:["$","div",null,{"className":"app","children":[["$","div",null,{"className":"search","children":[["$","form",null,{"children":["$","input",null,{"name":"search","placeholder":"Filter ships...","type":"search","defaultValue":"","autoFocus":true},"$1"]},"$1"],["$","ul",null,{"children":["$","$2",null,{"fallback":"$3","children":"$L5"},"$1"]},"$1"]]},"$1"],["$","div",null,{"className":"details","children":["$","$2",null,{"fallback":"$7","children":"$L9"},"$1"]},"$1"]]},"$1"]
b:I["/edit-text.js","EditableText"]
9:["$","div",null,{"className":"ship-info","children":[["$","div",null,{"className":"ship-info__img-wrapper","children":["$","img",null,{"src":"/img/ships/ec7a3f950f99f.webp?size=200","alt":"Scout Ship"},null]},null],["$","section",null,{"children":["$","h2",null,{"children":["$","$Lb","ec7a3f950f99f",{"shipId":"ec7a3f950f99f","initialValue":"Scout Ship"},null]},null]},null],["$","div",null,{"children":["Top Speed: ",11," ",["$","small",null,{"children":"lyh"},null]]},null],["$","section",null,{"children":["$","p",null,{"children":"NOTE: This ship is not equipped with any weapons."},null]},null]]},null]
5:[["$","li","Infinity Drifter",{"children":["$","a",null,{"href":"/bc4cbadf89bd3","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/bc4cbadf89bd3.webp?size=20","alt":"Infinity Drifter"},null],"Infinity Drifter"]},null]},null],["$","li","Star Hopper",{"children":["$","a",null,{"href":"/3ba8aa65ffe6c","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/3ba8aa65ffe6c.webp?size=20","alt":"Star Hopper"},null],"Star Hopper"]},null]},null],["$","li","Galaxy Cruiser",{"children":["$","a",null,{"href":"/ab267a5984523","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/ab267a5984523.webp?size=20","alt":"Galaxy Cruiser"},null],"Galaxy Cruiser"]},null]},null],["$","li","Planet Hopper",{"children":["$","a",null,{"href":"/d3b8aa65ffe6c","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/d3b8aa65ffe6c.webp?size=20","alt":"Planet Hopper"},null],"Planet Hopper"]},null]},null],["$","li","Space Taxi",{"children":["$","a",null,{"href":"/1ff1991efe029","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/1ff1991efe029.webp?size=20","alt":"Space Taxi"},null],"Space Taxi"]},null]},null],["$","li","Star Destroyer",{"children":["$","a",null,{"href":"/f3d9a88e1c234","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/f3d9a88e1c234.webp?size=20","alt":"Star Destroyer"},null],"Star Destroyer"]},null]},null],["$","li","Interceptor",{"children":["$","a",null,{"href":"/cb03cc4e5717e","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/cb03cc4e5717e.webp?size=20","alt":"Interceptor"},null],"Interceptor"]},null]},null],["$","li","Stealth Cruiser",{"children":["$","a",null,{"href":"/6c86fca8b9086","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/6c86fca8b9086.webp?size=20","alt":"Stealth Cruiser"},null],"Stealth Cruiser"]},null]},null],["$","li","Battleship",{"children":["$","a",null,{"href":"/fdc13cb488bf1","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/fdc13cb488bf1.webp?size=20","alt":"Battleship"},null],"Battleship"]},null]},null],["$","li","Dreadnought",{"children":["$","a",null,{"href":"/d486d48b82b81","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/d486d48b82b81.webp?size=20","alt":"Dreadnought"},null],"Dreadnought"]},null]},null],["$","li","Cruiser",{"children":["$","a",null,{"href":"/cfd10fcd2de6c","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/cfd10fcd2de6c.webp?size=20","alt":"Cruiser"},null],"Cruiser"]},null]},null],["$","li","Frigate",{"children":["$","a",null,{"href":"/e92cefe4f6727","style":{"fontWeight":"normal"},"children":[["$","img",null,{"src":"/img/ships/e92cefe4f6727.webp?size=20","alt":"Frigate"},null],"Frigate"]},null]},null],["$","li","Scout Ship",{"children":["$","a",null,{"href":"/ec7a3f950f99f","style":{"fontWeight":"bold"},"children":[["$","img",null,{"src":"/img/ships/ec7a3f950f99f.webp?size=20","alt":"Scout Ship"},null],"Scout Ship"]},null]},null]]
What's so cool about this is it allows us to have composition across the wire. We can compose our client and server code together!
A common question at this point is "do I need to add 'use client' to every module I want in the client." The answer is no! You only need to add 'use client' to the top-level module that you want to run in the client. Think of 'use client' as a <script> tag in the browser. It's the entry point to your client code (you can have many such entries). 'use client' is a way to create a boundry between the server and client code.
For a handy visualization, check out this animation.
๐Ÿงโ€โ™‚๏ธ Now that we support client components, I'm going to add a bunch to the codebase for our image optimizations and things. I'm also going to prep some stuff for the new Router you're building next. Feel free to check out the diff if you want to see what I'm going to do.
โ† PreviousNext โ†’
Edit on GitHub
problemsolutiondiffchat

Please set the playground first

Loading "Module Resolution"
Loading "Module Resolution"
Login to get access to the exclusive discord channel.
  • General
    Full app architecture in Epic React?
    Sorix ๐Ÿš€:
    The Epic React course is broken into small focused modules, but is there a final project that shows ...
    1 ยท 6 days ago
  • ๐ŸŽฃHooks
    General
    Terminal error when setting playground
    Natiq ๐Ÿš€:
    Every time I click on the "SET TO PLAYGROUND", the app stops with the following error. How can I fix...
    1 ยท a month ago
  • General
    Welcome to EpicReact.dev! Say Hello ๐Ÿ‘‹
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • ๐Ÿš€6
     59 ยท a month ago
  • ๐Ÿคนโ€โ™‚๏ธServer Components
    Issue with auth in React Server Components workshop
    gual:
    Hey, I'm having issues running the RSC workshop locally, specifically when logging in. I completed t...
    • โœ…1
     12 ยท 7 months ago
  • ๐Ÿคนโ€โ™‚๏ธServer Components
    In 4. Client Router / 05. Cache
    efrain ๐Ÿš€:
    Hey guys, I'm trying to understand the reason for using the `useContentCache` hook instead of direct...
    • โœ…1
     1 ยท 7 months ago
  • General
    error when installing the MCP server
    DBattou ๐Ÿš€:
    I tried to install the mcp server by following the instructions on the blog post here -> https://www...
    • ๐Ÿ‘1
    • โœ…1
     8 ยท 3 months ago
  • General
    Interviews with Experts -> Start Watching CTA gives regional restricted license error
    .shreyasvaidya ๐Ÿš€:
    I have purchased my course from India with the regional pricing method, and I am trying to watch the...
    • โœ…1
     4 ยท 4 months ago
  • General
    You are offline - warning
    marianavinyolas ๐ŸŒŒ ๐Ÿš€:
    Hi there! Today I want to start with the Advanced Patterns workshop, but after clone and run the rep...
    • โœ…1
     3 ยท 5 months ago
  • General
    โš›๏ธFundamentals
    Clicking on index.html when start opens in Terminal and not on the editor.
    Waddle ๐Ÿš€:
    Hello, just starting out with this and noticed that when I click on the 'index.html' file as display...
    • โœ…2
     1 ยท 5 months ago
  • General
    Am I following the course in the proper way?
    bauti ๐Ÿš€ ๐ŸŒŒ:
    The way im doing things in epic-react is: Clone the repo for the module i want to do (for example a...
    • โœ…1
     3 ยท 5 months ago
  • ๐ŸŽฃHooks
    General
    VSCode imports from wrong source
    mathemaat ๐Ÿš€:
    I encountered something silly that threw me off for a minute or two. I was working on the Tic Tac To...
    • โœ…1
     1 ยท 6 months ago
  • General
    Terminal Errors When Running Workshop App
    Giovanni ๐Ÿš€:
    Hello guys, I am facing an issue with the Workshop App, that basically I get this message over and...
    • โœ…1
     3 ยท 6 months ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans ๐ŸŒŒ ๐Ÿš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • โœ…2
     6 ยท 10 months ago
  • General
    Cannot connect workshop app
    Philipp ๐Ÿš€:
    I try to connect with my Company MacBook and get the following error ๐Ÿ˜ฆ There was an error: unable t...
    • โœ…1
     5 ยท 7 months ago
  • General
    Problem generating the diff
    mikeyjmcc ๐Ÿš€:
    I am not sure what has changed but I am now receiving errors that the diff cannot be generated. This...
    • โœ…2
     1 ยท 7 months ago
  • General
    Problem with playground
    Xrayoptions ๐Ÿš€:
    Problem section doesn't show <@105755735731781632> how to fix it ?
    • โœ…1
     9 ยท 7 months ago
  • General
    How to run tests in IDE?
    anonymousBlack10:
    Is it possible to run the tests from the IDE or are they setup to be run just from the browser? Some...
    • โœ…1
     1 ยท 8 months ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet ๐Ÿš€ ๐Ÿ† ๐ŸŒŒ:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • โœ…1
     15 ยท 10 months ago
  • General
    AI Assistant?
    John ๐Ÿš€:
    Kent has mentioned an AI assistant that he's using in VSCode. Is there any detail on what that is an...
    • โœ…2
     2 ยท 9 months ago
  • General
    Script to save playground folder
    larissapissurno ๐Ÿš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    • โœ…1
     2 ยท 10 months ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus ๐Ÿš€ ๐ŸŒŒ:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    • โœ…1
     1 ยท 10 months ago