1
00:00:03,000 --> 00:00:06,614
We know that we need to use a Client Component

2
00:00:06,614 --> 00:00:09,724
if we want any interactive functionality.

3
00:00:09,724 --> 00:00:12,120
But in our application we don't have

4
00:00:12,120 --> 00:00:14,049
a single component of course,

5
00:00:14,116 --> 00:00:16,381
we have many components, some of

6
00:00:16,381 --> 00:00:18,575
them nested inside one another.

7
00:00:18,646 --> 00:00:20,998
So in this video I want to show you

8
00:00:20,998 --> 00:00:23,317
how the "use client" directive

9
00:00:23,317 --> 00:00:25,326
affects nested components.

10
00:00:25,404 --> 00:00:27,927
At the moment the ShareLinkButton

11
00:00:27,927 --> 00:00:30,221
is used inside the ReviewPage.

12
00:00:30,297 --> 00:00:32,993
And in fact we can see that the server

13
00:00:32,993 --> 00:00:34,909
renders both the ReviewPage

14
00:00:34,979 --> 00:00:36,998
and the ShareLinkButton.

15
00:00:36,998 --> 00:00:39,558
While client-side rendering is only

16
00:00:39,558 --> 00:00:41,752
done for the Client Component.

17
00:00:41,826 --> 00:00:43,830
Now, instead of displaying only

18
00:00:43,830 --> 00:00:45,382
the "Share link" button,

19
00:00:45,447 --> 00:00:47,562
in our page we may want to show

20
00:00:47,562 --> 00:00:49,064
other buttons as well,

21
00:00:49,132 --> 00:00:52,356
to let users share the review on Twitter,

22
00:00:52,356 --> 00:00:53,928
Facebook, and so on.

23
00:00:54,007 --> 00:00:56,528
So we could create another component

24
00:00:56,528 --> 00:00:58,419
to group all those buttons.

25
00:00:58,489 --> 00:01:02,903
Let's add a new file, called "ShareButtons.jsx".

26
00:01:02,903 --> 00:01:05,761
Now, this is just a demo for this video.

27
00:01:05,761 --> 00:01:08,236
Be aware that I'll discard all these

28
00:01:08,236 --> 00:01:09,955
changes after this video.

29
00:01:10,023 --> 00:01:12,644
But in this ShareButtons component

30
00:01:12,644 --> 00:01:16,168
we could return a "div" grouping a few buttons.

31
00:01:16,168 --> 00:01:19,423
Let's include our existing ShareLinkButton,

32
00:01:19,423 --> 00:01:22,125
and then add another button for Twitter,

33
00:01:22,125 --> 00:01:25,283
and a third one for Facebook for example.

34
00:01:25,283 --> 00:01:27,529
I just put some placeholders,

35
00:01:27,529 --> 00:01:29,595
because we're not actually going to

36
00:01:29,595 --> 00:01:31,367
implement those other buttons.

37
00:01:31,426 --> 00:01:34,607
But this way we could use this ShareButtons

38
00:01:34,607 --> 00:01:36,679
component in the ReviewPage,

39
00:01:36,753 --> 00:01:39,496
in place of the "ShareLinkButton".

40
00:01:39,593 --> 00:01:41,829
Which also means we no longer need

41
00:01:41,829 --> 00:01:43,867
to import that other component.

42
00:01:43,933 --> 00:01:45,529
Ok, if we save,

43
00:01:45,793 --> 00:01:47,700
we now have three different

44
00:01:47,700 --> 00:01:49,466
ways to share the review.

45
00:01:49,537 --> 00:01:51,945
Two of them are just placeholders,

46
00:01:51,945 --> 00:01:53,433
but you get the idea.

47
00:01:53,504 --> 00:01:56,189
Now, let's add a log statement here,

48
00:01:56,624 --> 00:01:59,427
printing when this component is rendered,

49
00:01:59,427 --> 00:02:00,042
as usual.

50
00:02:00,324 --> 00:02:02,756
This way, if we keep an eye on the logs,

51
00:02:02,984 --> 00:02:04,533
and reload the page,

52
00:02:05,104 --> 00:02:07,140
we can see that ShareButtons

53
00:02:07,140 --> 00:02:09,103
only renders on the server,

54
00:02:09,175 --> 00:02:12,015
because it's currently a Server Component.

55
00:02:12,015 --> 00:02:14,371
We know that all components are

56
00:02:14,371 --> 00:02:16,574
Server Components by default.

57
00:02:16,650 --> 00:02:20,212
But if we change it to be a Client Component,

58
00:02:20,212 --> 00:02:23,644
by adding the "use client" directive at the top,

59
00:02:23,644 --> 00:02:27,618
then any other components used inside this one

60
00:02:27,618 --> 00:02:31,026
will also automatically be Client Components.

61
00:02:31,026 --> 00:02:35,019
This means that, in "ShareLinkButton.jsx"

62
00:02:35,019 --> 00:02:37,626
we no longer need  "use client".

63
00:02:37,626 --> 00:02:40,018
Let's repeat our usual experiment

64
00:02:40,018 --> 00:02:43,030
of clearing the logs and reloading the page.

65
00:02:43,030 --> 00:02:45,164
You can see that ShareButtons

66
00:02:45,164 --> 00:02:46,930
rendered in the browser,

67
00:02:47,004 --> 00:02:49,791
because it's now a Client Component,

68
00:02:49,791 --> 00:02:52,545
but ShareLinkButton is also treated

69
00:02:52,545 --> 00:02:54,276
as a Client Component,

70
00:02:54,355 --> 00:02:58,319
even though we removed the "use client" directive.

71
00:02:58,319 --> 00:03:01,026
So, when you opt in to client-side

72
00:03:01,026 --> 00:03:03,095
rendering for a component,

73
00:03:03,175 --> 00:03:07,234
it will apply to all its child components as well.

74
00:03:07,234 --> 00:03:09,697
It has to be this way, because

75
00:03:09,697 --> 00:03:12,599
when this component renders in the browser

76
00:03:12,599 --> 00:03:15,769
it will also need to render all its children,

77
00:03:15,769 --> 00:03:17,936
so they will also need to use

78
00:03:17,936 --> 00:03:19,581
client-side rendering.

79
00:03:19,656 --> 00:03:22,856
Now, this also raises an interesting question:

80
00:03:22,856 --> 00:03:24,945
at what level should we put

81
00:03:24,945 --> 00:03:27,034
the "use client" directive?

82
00:03:27,112 --> 00:03:29,163
In theory, we could even set it

83
00:03:29,163 --> 00:03:31,015
in the ReviewPage component,

84
00:03:31,081 --> 00:03:35,031
and use client-side rendering for the whole page.

85
00:03:35,031 --> 00:03:38,286
In practice, this won't work in this case.

86
00:03:38,286 --> 00:03:40,617
The error says we cannot export

87
00:03:40,617 --> 00:03:42,799
a "generateMetadata" function

88
00:03:42,874 --> 00:03:46,180
from a component marked with "use client".

89
00:03:46,180 --> 00:03:48,617
That's because "generateMetadata"

90
00:03:48,617 --> 00:03:50,463
only works on the server.

91
00:03:50,537 --> 00:03:52,925
Even if we try commenting this out,

92
00:03:53,557 --> 00:03:55,247
we then get another error,

93
00:03:55,247 --> 00:03:58,318
because some of our code is trying to use

94
00:03:58,318 --> 00:04:00,779
the Node.js "fs" module.

95
00:04:00,779 --> 00:04:03,995
In this page we call the getReview function,

96
00:04:03,995 --> 00:04:07,891
that uses "readFile" to load the Markdown data.

97
00:04:07,891 --> 00:04:10,219
And that function is only available

98
00:04:10,219 --> 00:04:11,816
when running in Node.js.

99
00:04:11,883 --> 00:04:14,435
It will not be available in the browser,

100
00:04:14,435 --> 00:04:17,624
so we cannot use it in a Client Component.

101
00:04:17,624 --> 00:04:21,279
If a component uses any server-side functionality,

102
00:04:21,279 --> 00:04:22,597
like in this case,

103
00:04:22,670 --> 00:04:25,352
then it must be a Server Component.

104
00:04:25,352 --> 00:04:28,563
In any case, it's not usually a good idea

105
00:04:28,563 --> 00:04:32,237
to use client-side rendering for an entire page,

106
00:04:32,237 --> 00:04:34,588
because that will send an awful lot

107
00:04:34,588 --> 00:04:36,871
of JavaScript code to the browser.

108
00:04:36,938 --> 00:04:39,102
We want to use Client Components

109
00:04:39,102 --> 00:04:40,792
only when it's necessary.

110
00:04:40,859 --> 00:04:43,115
In this example, ShareButtons

111
00:04:43,115 --> 00:04:45,138
can be a Server Component.

112
00:04:45,215 --> 00:04:47,785
It's only in ShareLinkButton that

113
00:04:47,785 --> 00:04:50,356
we use client-side functionality.

114
00:04:50,433 --> 00:04:54,437
So we should only mark this one with "use client".

115
00:04:54,437 --> 00:04:57,909
Each page is rendered from a component tree,

116
00:04:57,909 --> 00:05:00,921
where at the top you have the RootLayout,

117
00:05:00,921 --> 00:05:03,793
that always contains the NavBar,

118
00:05:03,793 --> 00:05:06,470
and then the page-specific component,

119
00:05:06,470 --> 00:05:08,207
in this case ReviewPage.

120
00:05:08,279 --> 00:05:11,725
This will in turn have other nested components,

121
00:05:11,725 --> 00:05:14,572
like the Heading, and ShareButtons,

122
00:05:14,572 --> 00:05:17,872
and the latter includes the ShareLinkButton.

123
00:05:17,872 --> 00:05:20,823
In general, we want to minimize the amount

124
00:05:20,823 --> 00:05:23,001
of code we send to the browser.

125
00:05:23,072 --> 00:05:26,290
That's why we should try to put "use client"

126
00:05:26,290 --> 00:05:29,188
only at the leaves of our component tree.