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
140
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
2
Attacking the Frontend
csilk
0
140
Advanced Testing concepts
csilk
0
200
Automating Design Review with Visual Regression
csilk
0
340
🎟 Tech Delivery Blueprint (Agile)
csilk
0
31
Using Given / When / Then with Cypress
csilk
0
1.2k
Intro To Basic UX Concepts
csilk
0
140
ReactJS For Beginners
csilk
0
88
What is Redux (vs. MVC)
csilk
1
170
Other Decks in Technology
See All in Technology
20250326_管理ツールの権限管理で改善したこと
sasata299
1
620
開発現場とセキュリティ担当をつなぐ脅威モデリング
cloudace
0
140
30 代子育て SRE が考える SRE ナレッジマネジメントの現在と将来
kworkdev
PRO
0
180
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
140
出前館を支えるJavaとKotlin
demaecan
0
150
Restarting_SRE_Road_to_SRENext_.pdf
_awache
1
230
TopAppBar Composableをカスタムする
hunachi
0
170
AWSエンジニアがSAPのデータ抽出してみた
mayumi_hirano
0
110
新卒1年目のフロントエンド開発での取り組み/New grad front-end efforts
kaonavi
0
150
入社後SREチームのミッションや課題の整理をした話
morix1500
1
230
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
320
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
130
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Become a Pro
speakerdeck
PRO
27
5.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Facilitating Awesome Meetings
lara
53
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Embracing the Ebb and Flow
colly
85
4.6k
Visualization
eitanlees
146
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
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