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
110
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
Attacking the Frontend
csilk
0
120
Advanced Testing concepts
csilk
0
150
Automating Design Review with Visual Regression
csilk
0
300
🎟 Tech Delivery Blueprint (Agile)
csilk
0
26
Using Given / When / Then with Cypress
csilk
0
1.1k
Intro To Basic UX Concepts
csilk
0
130
ReactJS For Beginners
csilk
0
78
What is Redux (vs. MVC)
csilk
1
160
Other Decks in Technology
See All in Technology
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
一休.comレストランにおけるRustの活用
kymmt90
3
580
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
620
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
840
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
280
34k
Gamification - CAS2011
davidbonilla
80
5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
RailsConf 2023
tenderlove
29
880
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
How to Ace a Technical Interview
jacobian
275
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Teambox: Starting and Learning
jrom
132
8.7k
Done Done
chrislema
181
16k
Embracing the Ebb and Flow
colly
84
4.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
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