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
40
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
50
Advanced Testing concepts
csilk
0
64
Automating Design Review with Visual Regression
csilk
0
230
🎟 Tech Delivery Blueprint (Agile)
csilk
0
24
Using Given / When / Then with Cypress
csilk
0
940
Intro To Basic UX Concepts
csilk
0
120
ReactJS For Beginners
csilk
0
58
What is Redux (vs. MVC)
csilk
1
150
Other Decks in Technology
See All in Technology
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
260
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
0
100
One engineer company with Ruby on Rails
rstankov
2
290
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
4
430
JSON攻略法.pdf
miyakemito
8
5.1k
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
120
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
6
550
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
4
1k
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
370
Cracking the KubeCon CfP
inductor
2
250
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
120
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
GraphQLとの向き合い方2022年版
quramy
32
12k
Debugging Ruby Performance
tmm1
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Product Roadmaps are Hard
iamctodd
44
9.7k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Thoughts on Productivity
jonyablonski
58
3.8k
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