1
00:00:00,000 --> 00:00:03,000
So what are Server Actions

2
00:00:03,000 --> 00:00:07,000
and how can we use this Server Actions concept

3
00:00:07,000 --> 00:00:11,000
to handle data submissions with NextJS?

4
00:00:11,000 --> 00:00:14,000
Well, first, it's important to understand

5
00:00:14,000 --> 00:00:16,000
that Server Actions

6
00:00:16,000 --> 00:00:21,000
are actually not a NextJS-specific feature,

7
00:00:21,000 --> 00:00:25,000
but actually a feature that is supported by React itself

8
00:00:25,000 --> 00:00:28,000
if you're using React in an environment

9
00:00:28,000 --> 00:00:30,000
where this feature works,

10
00:00:30,000 --> 00:00:35,000
which is not the case in your standard React project

11
00:00:35,000 --> 00:00:39,000
which might be a pure client-side React project,

12
00:00:39,000 --> 00:00:43,000
but which in the end can be unlocked by frameworks

13
00:00:43,000 --> 00:00:47,000
like NextJS that wrap around React.

14
00:00:47,000 --> 00:00:49,000
So this React feature,

15
00:00:49,000 --> 00:00:51,000
this Server Actions React feature,

16
00:00:51,000 --> 00:00:56,000
is in the end, unlocked by frameworks like NextJS.

17
00:00:56,000 --> 00:01:00,000
Still, it is a feature built directly into React

18
00:01:00,000 --> 00:01:03,000
that's then made available by NextJS

19
00:01:03,000 --> 00:01:04,000
to put it like this.

20
00:01:04,000 --> 00:01:08,000
But what's the idea behind Server Actions?

21
00:01:08,000 --> 00:01:10,000
Well, let's create an action

22
00:01:10,000 --> 00:01:14,000
and let's handle the submission of this form here,

23
00:01:14,000 --> 00:01:16,000
which you find in the new-post folder,

24
00:01:16,000 --> 00:01:18,000
in the app folder,

25
00:01:18,000 --> 00:01:20,000
in that page.js file.

26
00:01:20,000 --> 00:01:23,000
Let's handle the submission of this form

27
00:01:23,000 --> 00:01:24,000
with a Server Action

28
00:01:24,000 --> 00:01:29,000
and along the way learn what a Server Action is.

29
00:01:29,000 --> 00:01:32,000
So to handle the submission of this form

30
00:01:32,000 --> 00:01:35,000
with a Server Action, I'll actually start

31
00:01:35,000 --> 00:01:38,000
by handling the submission with a non-Server Action,

32
00:01:38,000 --> 00:01:42,000
with just a form action instead.

33
00:01:42,000 --> 00:01:44,000
And that's another feature

34
00:01:44,000 --> 00:01:47,000
built into React itself already

35
00:01:47,000 --> 00:01:50,000
though at least at the point of time

36
00:01:50,000 --> 00:01:52,000
where I'm recording this video, it's not stable yet,

37
00:01:52,000 --> 00:01:55,000
but it will eventually be a stable feature

38
00:01:55,000 --> 00:02:00,000
that can also be used in client-side React applications.

39
00:02:00,000 --> 00:02:02,000
So in all React projects,

40
00:02:02,000 --> 00:02:06,000
even if you're not using a framework like NextJS

41
00:02:06,000 --> 00:02:07,000
because there is a difference

42
00:02:07,000 --> 00:02:12,000
between a form action and a Server Action as you will see.

43
00:02:12,000 --> 00:02:15,000
And the idea in the end simply is that React

44
00:02:15,000 --> 00:02:17,000
gives you a way of handling

45
00:02:17,000 --> 00:02:21,000
form submissions on the client or server-side

46
00:02:21,000 --> 00:02:24,000
in an easier and simpler way

47
00:02:24,000 --> 00:02:27,000
than it used to be in the past.

48
00:02:27,000 --> 00:02:32,000
And a form action simply is a function you define

49
00:02:32,000 --> 00:02:36,000
either directly in the component like this

50
00:02:36,000 --> 00:02:39,000
or in a separate file that doesn't matter

51
00:02:39,000 --> 00:02:43,000
and you can give this function any name of your choice.

52
00:02:43,000 --> 00:02:47,000
For example, createPost could be a fitting name here,

53
00:02:47,000 --> 00:02:51,000
and you then pass this function, which we created here.

54
00:02:51,000 --> 00:02:53,000
You pass that as a value

55
00:02:53,000 --> 00:02:58,000
to the action prop on the form element,

56
00:02:58,000 --> 00:02:59,000
and that's new.

57
00:02:59,000 --> 00:03:04,000
This action prop is actually a default attribute

58
00:03:04,000 --> 00:03:07,000
you can set on the form element

59
00:03:07,000 --> 00:03:09,000
even if you're not using React.

60
00:03:09,000 --> 00:03:11,000
But when using React,

61
00:03:11,000 --> 00:03:14,000
React takes over that prop

62
00:03:14,000 --> 00:03:16,000
and that attribute, so to say,

63
00:03:16,000 --> 00:03:18,000
and handles it slightly differently

64
00:03:18,000 --> 00:03:21,000
than it would normally work.

65
00:03:21,000 --> 00:03:24,000
Because normally on the form element,

66
00:03:24,000 --> 00:03:27,000
if you are not using React or a React version

67
00:03:27,000 --> 00:03:30,000
that doesn't support that form actions feature,

68
00:03:30,000 --> 00:03:32,000
the action attribute

69
00:03:32,000 --> 00:03:36,000
that can be set on a form element,

70
00:03:36,000 --> 00:03:39,000
in the end, defines the URL

71
00:03:39,000 --> 00:03:43,000
to which the browser will automatically send a request

72
00:03:43,000 --> 00:03:45,000
once the form is submitted.

73
00:03:46,000 --> 00:03:50,000
So that's a default behavior built into the browser.

74
00:03:50,000 --> 00:03:53,000
This action prop or attribute

75
00:03:53,000 --> 00:03:55,000
normally defines the URL

76
00:03:55,000 --> 00:03:59,000
to which the form data will be automatically submitted

77
00:03:59,000 --> 00:04:02,000
once you press a submit button inside of the form.

78
00:04:02,000 --> 00:04:06,000
That's what this action prop normally does.

79
00:04:06,000 --> 00:04:09,000
Now when using a React version that supports form actions,

80
00:04:09,000 --> 00:04:12,000
or NextJS as we do,

81
00:04:12,000 --> 00:04:15,000
this action prop will work slightly differently.

82
00:04:15,000 --> 00:04:20,000
Instead of accepting a URL, it will accept a function

83
00:04:20,000 --> 00:04:24,000
and React will prevent that browser default behavior

84
00:04:24,000 --> 00:04:27,000
of sending a request to some URL

85
00:04:27,000 --> 00:04:29,000
and instead trigger that function

86
00:04:29,000 --> 00:04:31,000
when the form is submitted.

87
00:04:32,000 --> 00:04:35,000
And conveniently, it will then give you

88
00:04:35,000 --> 00:04:37,000
a formData object,

89
00:04:37,000 --> 00:04:39,000
which it will pass into this function

90
00:04:39,000 --> 00:04:42,000
as an argument automatically,

91
00:04:42,000 --> 00:04:45,000
which allows you to extract the data

92
00:04:45,000 --> 00:04:48,000
that was entered into the different inputs

93
00:04:48,000 --> 00:04:49,000
of that form.

94
00:04:50,000 --> 00:04:52,000
And that formData object

95
00:04:52,000 --> 00:04:54,000
is based on that formData interface,

96
00:04:54,000 --> 00:04:58,000
which is also a standard thing in the web,

97
00:04:58,000 --> 00:05:01,000
not React-specific, which in the end,

98
00:05:01,000 --> 00:05:04,000
defines an object that contains various methods

99
00:05:04,000 --> 00:05:08,000
like this get method that you can use to extract

100
00:05:08,000 --> 00:05:11,000
the data that was entered by the user.

101
00:05:11,000 --> 00:05:13,000
So we can use this formData object

102
00:05:13,000 --> 00:05:16,000
which we get automatically here to call the get method

103
00:05:16,000 --> 00:05:19,000
to get hold of the different input values

104
00:05:19,000 --> 00:05:21,000
entered by the user.

105
00:05:21,000 --> 00:05:24,000
And we do get hold of these different values

106
00:05:24,000 --> 00:05:27,000
with help of the name prop and attribute

107
00:05:27,000 --> 00:05:30,000
that's set on those elements,

108
00:05:30,000 --> 00:05:33,000
and that's therefore all important.

109
00:05:33,000 --> 00:05:37,000
When using such a form action as we're doing it here,

110
00:05:37,000 --> 00:05:38,000
and that's all important,

111
00:05:38,000 --> 00:05:40,000
this is not a Server Action yet.

112
00:05:40,000 --> 00:05:42,000
It's a form action,

113
00:05:42,000 --> 00:05:45,000
but it will soon become a Server Action.

114
00:05:45,000 --> 00:05:47,000
When you're using such a form action,

115
00:05:47,000 --> 00:05:50,000
you must set these name attributes

116
00:05:50,000 --> 00:05:52,000
on all the inputs

117
00:05:52,000 --> 00:05:55,000
of which you want to extract their values

118
00:05:55,000 --> 00:05:57,000
because it will be those name values

119
00:05:57,000 --> 00:06:00,000
that you now use with the get method,

120
00:06:00,000 --> 00:06:02,000
like here, get('title') to extract

121
00:06:02,000 --> 00:06:05,000
that inputs value here

122
00:06:05,000 --> 00:06:08,000
to get hold of any values entered by the user.

123
00:06:09,000 --> 00:06:13,000
So that would give me the title value entered by the user.

124
00:06:13,000 --> 00:06:15,000
And we can now repeat that

125
00:06:15,000 --> 00:06:17,000
to all to get hold of the image file

126
00:06:17,000 --> 00:06:19,000
with help of formData.get('image').

127
00:06:20,000 --> 00:06:24,000
And yes, it does work with file pickers just like that.

128
00:06:24,000 --> 00:06:27,000
You can also extract those files.

129
00:06:27,000 --> 00:06:29,000
And soon, I'll also show you

130
00:06:29,000 --> 00:06:32,000
how to then upload and store them in a safe way.

131
00:06:32,000 --> 00:06:36,000
And we can get hold of the content that was entered here

132
00:06:36,000 --> 00:06:39,000
with help of that content name,

133
00:06:39,000 --> 00:06:41,000
which is set on that text area.

134
00:06:41,000 --> 00:06:46,000
So with formData.get('content') like this.

135
00:06:48,000 --> 00:06:49,000
And now here for the moment,

136
00:06:49,000 --> 00:06:52,000
I'll just console.log(title, image, content);

137
00:06:53,000 --> 00:06:56,000
so that we can see whether it works or not,

138
00:06:56,000 --> 00:06:58,000
and that's all.

139
00:06:58,000 --> 00:07:02,000
That's how we can define a client-side form action.

140
00:07:02,000 --> 00:07:06,000
And soon, it will become a Server Action.

141
00:07:06,000 --> 00:07:08,000
We simply create a function

142
00:07:08,000 --> 00:07:11,000
that accepts that formData argument

143
00:07:11,000 --> 00:07:13,000
and we then use this function

144
00:07:13,000 --> 00:07:16,000
as a value on this action prop.

145
00:07:17,000 --> 00:07:20,000
We don't execute the function here.

146
00:07:20,000 --> 00:07:22,000
We don't set those parentheses.

147
00:07:22,000 --> 00:07:24,000
We just use it as a value.

148
00:07:25,000 --> 00:07:28,000
Well, and now with all that done,

149
00:07:28,000 --> 00:07:30,000
if you save everything,

150
00:07:30,000 --> 00:07:32,000
you see we get an error here

151
00:07:32,000 --> 00:07:36,000
at least at the point of time where I'm recording this.

152
00:07:36,000 --> 00:07:38,000
I'm getting an error that I should use this

153
00:07:38,000 --> 00:07:43,000
use server thing here on this function.

154
00:07:44,000 --> 00:07:48,000
And I just mentioned that this here should work.

155
00:07:48,000 --> 00:07:52,000
Well, yes, in theory, that should work

156
00:07:52,000 --> 00:07:56,000
and you find a similar example in the official React docs,

157
00:07:56,000 --> 00:07:59,000
but it will only work if you're using a React version

158
00:07:59,000 --> 00:08:01,000
that supports that feature.

159
00:08:01,000 --> 00:08:04,000
And at this point of time where I'm recording this,

160
00:08:04,000 --> 00:08:06,000
this feature isn't stable yet.

161
00:08:06,000 --> 00:08:10,000
So it might work at the point of time you are viewing this,

162
00:08:10,000 --> 00:08:12,000
but it does not work yet here for me.

163
00:08:12,000 --> 00:08:13,000
But that's no problem

164
00:08:13,000 --> 00:08:16,000
because that's just the first step

165
00:08:16,000 --> 00:08:18,000
towards such a Server Action,

166
00:08:18,000 --> 00:08:21,000
which I actually want to build and which will work.

167
00:08:22,000 --> 00:08:24,000
Because even if this would work here,

168
00:08:24,000 --> 00:08:29,000
this will just be executed on the client.

169
00:08:29,000 --> 00:08:31,000
So we would gather all that data,

170
00:08:31,000 --> 00:08:35,000
but we then would still have to send it to a backend,

171
00:08:35,000 --> 00:08:38,000
for example with help of the fetch function, manually.

172
00:08:38,000 --> 00:08:41,000
And that could be a separated backend

173
00:08:41,000 --> 00:08:43,000
or it could be an API route

174
00:08:43,000 --> 00:08:47,000
defined as part of our NextJS project.

175
00:08:47,000 --> 00:08:50,000
Still, we would manually send a request

176
00:08:50,000 --> 00:08:53,000
from the client-side to some backend.

177
00:08:53,000 --> 00:08:56,000
And just as with data fetching,

178
00:08:56,000 --> 00:09:00,000
where we also could fetch data from the client-side,

179
00:09:00,000 --> 00:09:01,000
this would work

180
00:09:01,000 --> 00:09:05,000
but it would not be the best possible approach here

181
00:09:05,000 --> 00:09:08,000
in a scenario where we own the data source

182
00:09:08,000 --> 00:09:09,000
that should be changed,

183
00:09:09,000 --> 00:09:13,000
so where we own the database, in this case.

184
00:09:13,000 --> 00:09:15,000
And therefore, we'll move on

185
00:09:15,000 --> 00:09:17,000
and now turn this into a Server Action.