Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to Next 13 Server Components
Search
Callum Silcock
March 09, 2023
Technology
0
170
Intro to Next 13 Server Components
A lightning talk on the new Next 13 BETA Server Components feature and how to use them
Callum Silcock
March 09, 2023
Tweet
Share
More Decks by Callum Silcock
See All by Callum Silcock
Unlocking Lockfiles - A Developers Guide to Package Management
csilk
0
26
Attacking the Frontend
csilk
0
160
Advanced Testing concepts
csilk
0
230
Automating Design Review with Visual Regression
csilk
0
360
🎟 Tech Delivery Blueprint (Agile)
csilk
0
36
Using Given / When / Then with Cypress
csilk
0
1.2k
Intro To Basic UX Concepts
csilk
0
140
ReactJS For Beginners
csilk
0
96
What is Redux (vs. MVC)
csilk
1
180
Other Decks in Technology
See All in Technology
ゼロからはじめる採用広報
yutadayo
3
1k
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
220
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
460
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
2
870
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
110
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
250
TLSから見るSREの未来
atpons
2
110
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4k
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
150
shake-upを科学する
rsakata
7
820
Featured
See All Featured
Designing for Performance
lara
610
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Facilitating Awesome Meetings
lara
54
6.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
A designer walks into a library…
pauljervisheath
207
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
How to train your dragon (web standard)
notwaldorf
96
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
🛄 VS 📳 NEXT 13 SERVER COMPONENTS Another CodingWithCallum™️ Session
⚡️ lightning talk ⚡️
🛄 SERVER COMPONENT A component that is fetched and rendered
ON THE SERVER
📳 CLIENT COMPONENT A component that is fetched and rendered
ON THE CLIENT
EXAMPLES
None
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)
NOT USING SERVER COMPONENTS 📳 Install all JS Dependencies to
run the site React etc. Then grab all our Client JS Components Then render
WHEN TO USE SERVER 🛄 VS CLIENT 📳 COMPONENTS Need
to access browser related stuff = Client Component Anything Else? = Server Component
None
INTERLEAVING
HOW DO I DEFINE A CLIENT 📳 COMPONENT 'use client';
import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button>
</div> );
SHARED COMPONENT 🛄📳 What if something is Server And Client
Wait what?
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)
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
READ THE DOCS! Next 13 Server And Client Components
None