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
Go headless but don't lose your head
Search
Andy Adiwidjaja
September 24, 2020
Technology
0
410
Go headless but don't lose your head
Use NextJS+Headless Silverstripe CMS. Talk at Virtual StripeCon Europe 2020
Andy Adiwidjaja
September 24, 2020
Tweet
Share
More Decks by Andy Adiwidjaja
See All by Andy Adiwidjaja
Printing with Puphpeteer
adiwidjaja
0
500
Other Decks in Technology
See All in Technology
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
420
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
160
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
300
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
740
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
9
2.1k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
560
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
130
インフラ寄りSREの生存戦略
sansantech
PRO
6
2.5k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
110
ゼロからはじめる採用広報
yutadayo
3
990
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A Tale of Four Properties
chriscoyier
160
23k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
A designer walks into a library…
pauljervisheath
207
24k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Review Best Practice
trishagee
69
19k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Code Reviewing Like a Champion
maltzj
524
40k
Agile that works and the tools we love
rasmusluckow
329
21k
Transcript
Go headless, but don’t lose your head Andy Adiwidjaja Virtual
StripeCon Europe, 24.09.2020
Headless is here to stay and Silverstripe CMS is the
best open source solution
Overview Why SSR? Should I care? Why headless Silverstripe CMS?
How can I start?
Why SSR? Should I care? Is it worth it?
Me - had projects as a NextJS developer - was
forced to work with strange backends - would like to use Silverstripe CMS - launches own projects with NextJS+SilverstripeCMS
Going SSR Disadvantages of Single Page Apps: - SEO -
Browser history - Time to first render Solutions: - Server-side-rendering - Static generators (Graphic: microsoft.com)
Yeah, right Stacey Trooster StripeCon EU 2019
Headless CMS, React, SSR? 2001 2003 Plain PHP, Templating with
Smarty 2010 CMS, SASS, JQuery, Ajax 2015 CMS/Framework, SASS, React / Angular 2020 Plain HTML, Dreamweaver Templates
Demo https://kulturellebildung-sh.de/ Loads pages as XHR Loads HTML on Reload
Works without JavaScript!
NextJS getStaticProps getStaticPaths: - Fetch data at Build time New:
“static can also be dynamic” - getStaticProps can revalidate - getStaticPaths can have fallback getServerSideProps: - Fetch data on each request
NextJS SSR
NextJS dynamic pages Default NextJS logic: pages in /pages folder.
Former solution: Custom server.js rewriting to /pages/index.tsx Now: /pages/[[...page]].tsx
So, why Silverstripe CMS as headless CMS?
Headless CMS Criteria: Simple setup Mostly config Low maintenance Frontend-independent,
but: Pages Page elements Navigation Custom Data Hosted CMS (examples): Contentful Kentico GraphCMS Expensive, Limitations. Self-hosted CMS: Strange new players, all old players with APIs
Silverstripe CMS - dev/build - Pages with Elemental - ModelAdmin
- Backend functionality - Backend integration! Basic admin interfaces are a matter of configuration, but configuration in code! Strength of Silverstripe: Create solutions! class Actor extends DataObject { private static $db = [ “Name” => “Varchar(255) ]; } class ActorAdmin extends ModelAdmin { private static $managed_models = [ Actor::class, ]; private static $url_segment=”actor”; private static $menu_title=”Actors”; }
Example: DBRD React Frontend Headless Silverstripe CMS Sync with MS
Dynamics 365 (SOAP) ModelAdmin for Control No pages, assets etc. Easy to map models in and out
How? https://github.com/adiwidjaja/silverstripe-nextjs-starter Demo - Elements - Preview - RedirectorPage
File structure .storybook Storybook config backend Silverstripe CMS pages NextJS
pages public NextJS static files src JavaScript code No templates!
Setup > git clone
[email protected]
:adiwidjaja/ silverstripe-nextjs-starter.git demo > cd demo
> vi .env # Configuration > cd backend && composer install # PHP dependencies > cd .. > yarn # JS dependencies > yarn dev # Dev server
JavaScript Stack - NextJS - React - Typescript - Styled-components
- Storybook const FaqElementStyled = styled.div``; const TextContent = styled.div` display: ${props => (props.visible ? 'block' : 'none')}; `; const FaqElement = ({ title, text, }) => { const [open, setOpen] = useState(false); return ( <FaqElementStyled> <h1 onClick={() => setOpen(!open)}>{title}</h1> <TextContent visible={open}>{text}</TextContent> </FaqElementStyled> ); };
Config .env
Backend: Models Page TextElement FAQElement - Title - Description -
Image - Text
GraphQL - Route - Page - Fields - readOne op
with Resolver - nestedQueries - Elements - Menu - Children
Backend: Resolver
GraphiQL Your single most important tool Working with GraphQL. composer
require --dev silverstripe/ Graphql-devtools Demo
Client: GraphQL /src/utils/api.ts Called by getServerSideProps
Tricks BaseElementalExtension: - getContentFields: Waiting for GraphQL 4 Page: -
FrontendLink - Menu - PreviewLink Cannot use LinkOrSection, as Director::get_curr_page() uses Controller::curr(), which is not available.
Hosting - Silverstripe CMS: Standard - Javascript: Start with pm2
- NGinx: - /api: Rewrite to Silverstripe public folder - /: Proxy to Javascript-Server location ^~ /api { alias [...]/demo/backend/public; try_files $uri $uri/ @silverstripe; [...] } location @silverstripe { rewrite /api/(.*)$ /api/index.php?$1 last; } location ~ ^/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://localhost:3000; } > yarn && yarn build > pm2 start yarn --interpreter bash --name app -- start > pm2 restart app
Conclusion SSR is no silver bullet Headless is here to
stay SSR+Headless Silverstripe CMS is easy to setup I would like to see a positioning for Silverstripe CMS as a headless CMS.
Thank you! I’m happy to speak with you about Headless+SSR.
Or anything else. Andy Adiwidjaja EMail:
[email protected]
Illustrations: Maria Müller-Leinweber https://www.mamuelei.de