Nuxt 3: How to add client only components

my name is Tim Benniks 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