Slide 1
Slide 1 text
π VS
π³
NEXT 13 SERVER
COMPONENTS
Another CodingWithCallumβ’οΈ Session
β‘οΈ lightning talk
β‘οΈ
Slide 2
Slide 2 text
π SERVER
COMPONENT
A component that is fetched and rendered ON
THE SERVER
Slide 3
Slide 3 text
π³ CLIENT COMPONENT
A component that is fetched and rendered ON
THE CLIENT
Slide 4
Slide 4 text
EXAMPLES
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
USING SERVER COMPONENTS
π
Only download HTML built by the server
Instant render
Speed
πββοΈπ¨
+ the JS required for the client components
(if any)
react cached
Make direct API calls (server to server)
Slide 7
Slide 7 text
NOT USING SERVER
COMPONENTS
π³
Install all JS Dependencies to run the site
React etc.
Then grab all our Client JS
Components
Then render
Slide 8
Slide 8 text
WHEN TO USE
SERVER
π VS CLIENT
π³ COMPONENTS
Need to access browser related stuff = Client
Component
Anything Else? = Server Component
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
INTERLEAVING
Slide 11
Slide 11 text
HOW DO I DEFINE A
CLIENT
π³
COMPONENT
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
setCount(count + 1)}> Click meSlide 12
Slide 12 text
);
Slide 13
Slide 13 text
SHARED
COMPONENT
ππ³
What if something is Server And Client
Wait what?
Slide 14
Slide 14 text
SHARING DATA FROM
π SERVER TO
π³
CLIENT
Make your API requests on the server
Keep as many dependencies on the server as
possible
Eg. pass i18n translations from server > client
to avoid client code
(prop drilling in this case is OK)
Slide 15
Slide 15 text
MUTATING DATA ON
THE
π³ CLIENT
RPC from the client
This will change
Next is working on a RFC on this at the
moment
We will go with what their suggestion is
Watch this space
Slide 16
Slide 16 text
READ THE DOCS!
Next 13 Server And Client Components
Slide 17
Slide 17 text
No content