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
130
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
130
Advanced Testing concepts
csilk
0
190
Automating Design Review with Visual Regression
csilk
0
330
🎟 Tech Delivery Blueprint (Agile)
csilk
0
30
Using Given / When / Then with Cypress
csilk
0
1.2k
Intro To Basic UX Concepts
csilk
0
140
ReactJS For Beginners
csilk
0
85
What is Redux (vs. MVC)
csilk
1
170
Other Decks in Technology
See All in Technology
2.5Dモデルのすべて
yu4u
2
610
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
君も受託系GISエンジニアにならないか
sudataka
2
370
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Optimizing for Happiness
mojombo
376
70k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Adopting Sorbet at Scale
ufuk
74
9.2k
How to Ace a Technical Interview
jacobian
276
23k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Embracing the Ebb and Flow
colly
84
4.6k
GitHub's CSS Performance
jonrohan
1030
460k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
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