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
110
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
120
Advanced Testing concepts
csilk
0
170
Automating Design Review with Visual Regression
csilk
0
300
🎟 Tech Delivery Blueprint (Agile)
csilk
0
26
Using Given / When / Then with Cypress
csilk
0
1.1k
Intro To Basic UX Concepts
csilk
0
130
ReactJS For Beginners
csilk
0
78
What is Redux (vs. MVC)
csilk
1
170
Other Decks in Technology
See All in Technology
Engineer Career Talk
lycorp_recruit_jp
0
150
いざ、BSC討伐の旅
nikinusu
2
780
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.2k
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
300
Can We Measure Developer Productivity?
ewolff
1
150
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
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