Index
ed
Search videos...
⌘
K
Search videos
Search across video titles, descriptions, and transcripts
React server components | Traversy Indexed
Back
React server components
Aug 31, 2025
intermediate
Quick Tip
Hide Transcript
0:00
React server components are changing the
0:02
way we build web apps, but a lot of
0:04
explanations make them sound way more
0:05
complicated than they really are. So,
0:07
think of it like this. Normally, React
0:09
sends JavaScript to the browser and then
0:11
the browser builds your UI. With server
0:13
components, React builds part of the UI
0:15
on the server first and then sends the
0:17
finished pieces. So, it's kind of like
0:19
getting a partially assembled IKEA
0:21
furniture instead of just the pieces and
0:23
instructions. So, let's take a look at
0:25
this regular component. We need to use
0:27
the use state hook to hold the user
0:29
data. use effect will trigger the fetch
0:31
and then we make a a network request
0:33
from the browser to the API. Now let's
0:35
look at the same thing as a server
0:37
component and notice it's an
0:38
asynchronous function. I'm hitting the
0:40
database directly with a wait and
0:43
there's no hooks, no API calls, no
0:45
client side data fetching. So the
0:47
component runs on the server, grabs the
0:49
data and then sends the finished HTML to
0:52
the browser. Now there's three big wins
0:54
here. First, you have smaller JavaScript
0:56
bundles because server logic doesn't
0:58
ship to the browser. Second, you're
1:00
using direct database access, which
1:02
means faster data fetching. And third,
1:04
you get better SEO because content
1:06
renders on the server. I've seen apps
1:08
reduce their bundle size from 30% just
1:10
by moving data fetching to server
1:12
components. Now, one thing to remember
1:14
is that server components can't use
1:16
hooks or handle events. So, they're for
1:18
data fetching and rendering. You still
1:20
need to use regular client components
1:22
for interactive stuff like buttons and
1:24
forms.
Related Videos
1:36
Understanding CORS
Oct 11, 2025
intermediate
Live Stream
1:02
package-lock.json file explained
Aug 29, 2025
beginner
Project Build
36:19
Encore Crash Course - TypeScript Backend Framework & Toolset
Sep 2, 2024
intermediate
Crash Course
1:46:11
Express Crash Course
May 7, 2024
intermediate
Crash Course
