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
事業継続を支える自動テストの考え方
tsuemura
0
300
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
開発者が自律的に 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
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
FastConnect の冗長性
ocise
1
9.6k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
We Have a Design System, Now What?
morganepeng
51
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Designing Experiences People Love
moore
139
23k
How GitHub (no longer) Works
holman
313
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Automating Front-end Workflow
addyosmani
1367
200k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
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