Blazing fast web experience at your fingertips with Experience Edge, JSS for Next.js and Vercel

Blazing fast web
experience at your
fingertips with Experience
Edge, JSS for Next.js and
Vercel
By Varun Nehra
#sugcon

Varun Nehra
• SVP of Digital Solutions
• Almost a decade of Sitecore
experience
• Sitecore Technology MVP
• 100+ Sitecore client
engagements
• Lives in Atlanta

Topics
1. Fundamentals of Jamstack
2. Pre-rendering concepts SSG, SSR and ISR
3. Steps to build and deploy a Jamstack app using
Experience Edge, JSS Next.js, Vercel

But first, let’s talk performance

• Please insert a background image
that suits your presentation,
or leave it empty.
© 2022 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. https://europe.sugcon.events/
TTFB, FCP

or leave it empty.
What is Jamstack?

or leave it empty.
Its not a technology stack
Its not a platform
Its not a framework
Its an architecture approach centered around 2 concepts
1. Pre-rendering
2. Decoupling
Its purpose is to make web faster, more secure and easier to scale.

or leave it empty.
How is this architecture different?
10

or leave it empty.
Btw, Headless Jamstack

or leave it empty.
The stack has many flavors

or leave it empty.
Too many options…

or leave it empty.
The Stack

Introducing pre-rendering
concepts

or leave it empty.
Server-Side Rendering (SSR)
Fetch data on every request
CSR & SSR
16
Client-Side Rendering (CSR)
Entire website is rendered in
the browser using JS

or leave it empty.
Incremental Site Regeneration (ISR)
Create or update static pages
after you've built your site
It’s all about pre-rendering
17
Static Site Generation (SSG)
Fetch data at build time and
pre render dynamic routes
based on data

” –
We are moving from writing and
managing DLLs to writing and
managing APIs
Dave O’Flanagan, Chief Product Officer, Sitecore

Jamstack with Experience Edge,
JSS Next.js

or leave it empty.
J
A
M

or leave it empty.
JSS Next.js + Experience Edge

3 phases of getting started
Configure, Develop, Deploy

or leave it empty.
1. Subscribe and configure Sitecore Experience Edge
2. Pick a development workflow (code-first, Sitecore-first)
& install appropriate template
3. Scaffold Next.js component, wire it up for Experience
Editor
4. Deploy using Vercel
Here are the steps

or leave it empty.
1. A valid Sitecore license file and Sitecore Experience Edge
subscription
2. Latest LTS version of Node.js
3. Sitecore 10.1 or higher
4. Windows PowerShell 5.1. PowerShell 7 is not supported at this
time.
5. .NET Core 3.1 SDK.
6. .NET Framework 4.8 SDK.
7. Docker for Windows, with Windows Containers enabled.
Before you get started with Sitecore-first

or leave it empty.
1. Subscribe to Sitecore Experience Edge tenant
2. Create API Keys and test queries for Delivery & Preview
APIs
3. Download and install experience edge connector for XM
package
Step 1 Configuring Experience Edge for XM

or leave it empty.
1. Configure authorization credentials in ConnectionStrings.config
2. Create patch files for
§ Experience Edge API endpoint
§ Experience Edge CDN URI
§ Experience Edge CDN media prefix
§ Configure Solr index core (sitecore_experienceedge_index)
3. Create Publishing target
4. Update and export publishing manifest
5. Rebuild Solr index
6. Enable item level and field level language fallback
7. Configure API fault handling
Step 1 - Configure Experience Edge Connector

or leave it empty.
• Install Sitecore Containers template for JSS Next.js
(nuget sitecore.nextjs.gettingstarted)
§ Includes docker compose for XP0
§ Jss create and jss deploy for JSS Next.js app
§ Sitecore Content Serialization
§ MSBuild for CM deployment (code & config)
§ Initialization script (created project solution)
Step 1 - Configure Dev environment

or leave it empty.
Step 1 - Complete

or leave it empty.
• Create data template
• Create JSON rendering (for layout service)
• Setup datasource fields (optionally GraphQL query for
datasource or Rendering Contents Resolver)
• Scaffold a new component (jss scaffold) (src/rendering
folder)
Step 2 – Develop

or leave it empty.
Step 3 – Deploy using Vercel
• Create a project on GitHub (GitLab, BitBucket)
• Log into Vercel and run Import Project wizard
• Select Next.js app from srcrendering folder
• Create 3 environment variables
• Sitecore_API_KEY
• Sitecore_API_HOST
• JSS_EDITING_SECRET
• Click Deploy

Btw, there is a path to convert
MVC to Jamstack with JSS Next.js

I am a proud community member! Please contact me on the following
handles:
sitecorechat.slack.com twitter sitecore.stackexchange.com
Thank you!
@varun.nehra @sitecorevarun Varun.nehra

or leave it empty.
• https://www.youtube.com/watch?v=ugPy7BjH0H0
Resources

or leave it empty.
• https://youtu.be/s_F5hoNsvOo
Resources

or leave it empty.
• https://dev.to/svdoever/nextjs-on-azure-with-sitecore-jss-
3hjk - Serge van den Oever (Sitecore MVP)
Resources

sitecore.com/ukrainefund
Thank you!

Or initiate new sections
from the right
Kick off specific subjects
within your presentation
with these section slides.

Or emphasize with this bold
headline if you want..

” –
Quote somebody on their
brilliance as everybody in our
community deserves a best
friend!
Akshay Sura

or leave it empty.
Each presentation must end with the following three
slides. As the conference is a from-the-community-for-the-
community event we find it important that you share your
social channels you feel comfortable with, mainly the Slack
channel and Twitter.
Also, we couldn’t organize this event without our
community sponsors. Please leave them at the end of your
slide deck.
Please don’t change the following 3 slides

I am a proud community member! Please contact me on the following
handles:
sitecorechat.slack.com twitter sitecore.stackexchange.com
Questions
@varun.nehra @sitecorevarun Varun.nehra

I am a proud community member!
Please contact me on the following handles:
sitecorechat.slack.com twitter

This list of sponsors is yet to be
finalized and will be added
when they are fully confirmed.
A new version of this slide
template will be delivered to you
later and a quick swap of this
slide is the only task left.
Thank you!

Blazing fast web experience at your fingertips with Experience Edge, JSS for Next.js and Vercel

Recommended

Recommended

More Related Content

Similar to Blazing fast web experience at your fingertips with Experience Edge, JSS for Next.js and Vercel

Similar to Blazing fast web experience at your fingertips with Experience Edge, JSS for Next.js and Vercel (20)

More from VarunNehra

More from VarunNehra (9)

Recently uploaded

Recently uploaded (20)

Blazing fast web experience at your fingertips with Experience Edge, JSS for Next.js and Vercel