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
29
Attacking the Frontend
csilk
0
160
Advanced Testing concepts
csilk
0
230
Automating Design Review with Visual Regression
csilk
0
370
🎟 Tech Delivery Blueprint (Agile)
csilk
0
38
Using Given / When / Then with Cypress
csilk
0
1.2k
Intro To Basic UX Concepts
csilk
0
140
ReactJS For Beginners
csilk
0
97
What is Redux (vs. MVC)
csilk
1
180
Other Decks in Technology
See All in Technology
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
680
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
410
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
140
Kiroから考える AIコーディングツールの潮流
s4yuba
4
600
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
700
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
8.1k
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
2
190
OPENLOGI Company Profile for engineer
hr01
1
36k
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
300
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
330
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
11k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How to Ace a Technical Interview
jacobian
278
23k
4 Signs Your Business is Dying
shpigford
184
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Testing 201, or: Great Expectations
jmmastey
44
7.6k
Facilitating Awesome Meetings
lara
54
6.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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