Turbo Tutorial | Nuxt 3: How to add client only components

my name is Tim bennings and this is a turbo tutorial so in this tutorial we will be looking at server-side components and client-side components in next three and so when you know about nox3 is that they don't like adding a whole bunch of configuration things kind of just work out of the box and this is one of those and it makes it really easy to deal with I want only client side this component or only service at that one and so let's have a look at how you can actually pull that off so this is a very clean nux 3 project there's nothing in the config as you can see and in my app.view I have created two components I have a cast member and a friend's image I like the TV show Friends hence that's why there are actually in these tutorials so I have a cast member like Rachel that says maybe you should take a break and then Ross says well let's cool off blah blah blah if you know friends you know this scene and then the friends image literally just shows you an image so let's quickly go into the browser to look at what that looks like so we have Ross and Rachel and the image so when you now look at these file names here so cast member basically is cast member Dot View which means it renders in server side and it renders in client-side like a normal view component that lives in next but when you look at the image you actually see friendsimage.client.view and so next automatically resolves your components for you and because they do that they just look at the file name and say hey that one is meant for client if I put server there it does something for the server here and that's really interesting because with this you can say this component is like a graph or it needs something on the window for a third party or whatever that will not run on SSR well you just add client there and it renders it only on the client so let's have a look at what this looks like in the browser because if I turn off my JavaScript there is no client so it should show you what the server renders so I have a little extension here so when I turn JavaScript off so this turns it off and refreshes your page and you see there is no image when I turn the JavaScript back on the server re-renders but then with with JavaScript itself it turns the image here it puts it in and so um this is a nice way to kind of separate your client from your server components or for if you're in your hybrid components sometimes you might not be able to do that so what you can also do is this you can actually use client only which is a lovely convenience method by and the next team because sometimes you can just not change these components or you don't use the auto um you know auto loading of them and so if you do client only what will happen now when I turn off the JavaScript Ross will also disappear right because it's rendered only in JavaScript there you go that works in a really Nifty way so let's remove this again because there is one more thing I want to show you that actually makes this thing really interesting if you have the same component but Dot server.view the server.view is rendered as a fallback to the client one so first server then client and so if something goes wrong in the client you still see the server one so which means if you wanted to do something that's completely like lazy loaded or something that depends on whatever the browser gives it to make its size work you can actually have a server version below it that actually says this is the size of the thing let the client render it in and so there's no jankiness in loading the page so let's do that quickly so let's do friends image dot server Dot View and let's paste in some stuff so I had this on my clipboard already so the only difference is there's a different image rendered on the server than on the client and so let's quickly reset my um localhost just to be safe that it all works go back to the browser and so when I just refresh it you saw a little flicker right so when I turn off the JavaScript now it actually shows me my other image because that's the server one then I turn on the JavaScript it's the server one first and the client overrules it and that's a super handy way to go about this because you can do a lot of things with this flexibility so I hope you like it that's what I wanted to show you in the tutorial feel free to leave a comment or whatever any questions and I'll see you in the next one [Music]