A presentation at SUGDK by Thomas Desmond
What’s new in JSS 16.0 Let’s look at what’s coming up in the new JSS 16.0 and the Headless Rendering Suite PRESENTED BY: Thomas Desmond Date: February, 25 2021 © 2021 Sitecore Corporation A/S. All Rights Reserved.
Today’s speaker Thomas Desmond Javascript Technical Evangelist, Sitecore • Started at Sitecore in January • Long time frontend developer • Located in San Diego, California @ThomasJDesmond www.thetombomb.com © 2021 Sitecore Corporation A/S.
Agenda 01 The Headless suite 02 Improvements in 16.0 03 Jamstack & the BIG new addition 04 Where to learn more 05 Questions 2021 Sitecore Corporation A/S. ©©2001-2020 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
The Headless Rendering Suite Headless Rendering Suite • JSS 16.0 • ASP.NET 16.0 • Headless Module 16.0 © 2021 Sitecore Corporation A/S.
Sitecore Headless Services module rename (formerly known as the Sitecore JavaScript Services Server module) © 2021 Sitecore Corporation A/S.
GraphQL Schema New GraphQL schema available • Allows for advanced content search capabilities • Less logic in the C# or frontend side, your queries can now contain the logic, only getting the data you really want © 2021 Sitecore Corporation A/S.
Next.js support in JSS 16.0 © 2021 Sitecore Corporation A/S.
Why have we added support for Next.js © 2021 Sitecore Corporation A/S.
Motivation behind Next.js support The need for speed.
Motivation behind Next.js support J A M JavaScript Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use. APIs Server-side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function. Markup Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator. © 2021 Sitecore Corporation A/S.
Motivation behind Next.js support J A M “Jamstack” is not an actual tech stack that describes implementation technology It’s a high-level classification of an architectural approach. Jamstack anchors Pre-rendering Fast delivery Rehydration © 2021 Sitecore Corporation A/S.
Motivation behind Next.js support Jamstack Client Jamstack anchors: CDN Pre-rendering Pre-rendering cacheable, static assets at build time whenever possible, Microservices • Pre-rendering • Fast delivery • Rehydration Application Server Database CMS © 2021 Sitecore Corporation A/S.
Motivation behind Next.js support Jamstack Client Jamstack anchors: Fast delivery Deploying assets to CDNs to ensure fast delivery CDN Microservices • Pre-rendering • Fast delivery • Rehydration Application Server Database CMS © 2021 Sitecore Corporation A/S.
Motivation behind Next.js support Jamstack Rehydration Client Supporting dynamic functionality client side by fetching dynamic data as needed Jamstack anchors: CDN Microservices • Pre-rendering • Fast delivery • Rehydration Application Server Database CMS © 2021 Sitecore Corporation A/S.
Next.js Advantages © 2021 Sitecore Corporation A/S.
Next.js Advantages Flexible delivery model Simple, but powerful Great developer experience Marvel, Twitch, TikTok, Netflix, Hulu, Starbucks,, Docker, Ferrari, Staples Innovative features that align with our requirements Enterprise ready Creators of Next.js, built for Next.js Server-Side Rendering Static Site Generation Incremental Static Site (Re-)generation Example: i18n Simplifies JSS implementation Less sample code with less state management OOTB server, script bundling, and more. Vercel provides “easy button” hosting © 2021 Sitecore Corporation A/S.
Next.js Advantages Performance metrics Auto-scaling for viewport Simple, but powerful Lazy loading Flexible TypeScript delivery support model Great Image developer optimization experience 404Marvel, & 500 Twitch, built in TikTok, Netflix, Error component for Hulu, Starbucks,, differentDocker, http response Ferrari, condes Staples Static build-time Site Generation More verification less bugs Incremental=Static Site (Re-)generation Innovative API route features that align with our middleware requirements Enterprise Error -ready handling Deploy multiple apps as one Creators of Next.js, built Use cases: for Next.js code migration, campaign sites Server-Side Rendering Finer control over API Example: i18n requests & responses ComponentSimplifies JSS implementation level CSS Vercel provides Multibutton” Zones “easy hosting Less sample code with less state management Easier modularity and component reuse. OOTB server, script bundling, and more. Easy debugging © 2021 Sitecore Corporation A/S.
Pre-rendering in Next.js Server-Side Rendering Static Generation getServerSideProps getStaticProps Fetch data on each request Fetch data at build time getInitialProps getStaticPaths Pre-render a base version of an SSR page Pre-render dynamic routes based on data © 2021 Sitecore Corporation A/S.
Next integration with Sitecore Experience Edge for Content Hub © 2021 Sitecore Corporation A/S.
Lets Review Headless Rendering Suite 16.0 Release Jamstack • Pre-rendering • Fast delivery • Rehydration Next.js in 16.0 © 2021 Sitecore Corporation A/S.
Resources Learning Resources • https://jss.sitecore.com/ • https://nextjs.org/ • Headless Content Delivery with Edge • 16.0 Release Notes • Sitecore XP 10.1 © 2021 Sitecore Corporation A/S.
Today’s speaker Thomas Desmond Javascript Technical Evangelist, Sitecore • Started at Sitecore in January • Long time frontend developer • Located in San Diego, California @ThomasJDesmond www.thetombomb.com © 2021 Sitecore Corporation A/S.
Questions? © 2021 Sitecore Corporation A/S.
February 25 JSS 16.0 was released alongside Sitecore 10.1 XP. This presentation explains the improvements put into JSS 16.0. As well as the major news that JSS now supports Next.js the React framework for production.
for free. You
can too.