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
43
Attacking the Frontend
csilk
0
170
Advanced Testing concepts
csilk
0
240
Automating Design Review with Visual Regression
csilk
0
370
🎟 Tech Delivery Blueprint (Agile)
csilk
0
40
Using Given / When / Then with Cypress
csilk
0
1.2k
Intro To Basic UX Concepts
csilk
0
150
ReactJS For Beginners
csilk
0
98
What is Redux (vs. MVC)
csilk
1
180
Other Decks in Technology
See All in Technology
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
4
870
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
masayamoriofficial
0
100
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.4k
人を動かすことについて考える
ichimichi
2
330
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
190
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
430
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
470
モバイルアプリ研修
recruitengineers
PRO
3
270
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.8k
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
KATA
mclloyd
32
14k
Navigating Team Friction
lara
189
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Designing for Performance
lara
610
69k
Fireside Chat
paigeccino
39
3.6k
Into the Great Unknown - MozCon
thekraken
40
2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Adaptive Systems
keathley
43
2.7k
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