Comprehensive guide to setting up CSR and SSR for Live Preview

Installing a training instance

The video below offers a step-by-step visual walkthrough of the process for setting up a training instance in Contentstack. It covers everything from signing up for a training instance to accepting your stack invitation and configuring your account. By the end of this guide, you’ll have your own training instance linked to your organization and stack. This environment will be available to you for 30 days, allowing you to explore and practice using Contentstack’s features. Whether you’re new to Contentstack or looking to enhance your skills, this training instance will give you hands-on experience in a real-world setup.

Setting up and Understanding Live Preview in CSR Mode

The video below provides a detailed, step-by-step visual walkthrough of setting up your stack and code base to enable Live Preview in Client-Side Rendering (CSR) mode. Throughout this course, it will guide you from the basic implementation of Live Preview in your Contentstack stack to the necessary code modifications for enabling Live Preview in a CSR website built with Next.js 14, running locally. It will explain the specific changes required in the code, the reasoning behind them, and how they impact the Live Preview functionality. By the end of this walkthrough, you’ll see exactly how Live Preview will look and work once everything is set up.

Setting up and Understanding Live Preview in SSR Mode

The video below provides a detailed, step-by-step visual walkthrough of setting up your stack and code base to enable Live Preview in Server-Side Rendering (SSR) mode. Throughout this course, it will guide you from the basic implementation of Live Preview in your Contentstack stack to the necessary code modifications for enabling Live Preview in a SSR website built with Next.js 14, running locally. It will explain the specific changes required in the code, the reasoning behind them, and how they impact the Live Preview functionality. By the end of this walkthrough, you’ll see exactly how Live Preview will look and work once everything is set up.

Note: In the SSR video we used a sample SSR app made in NextJS14 with Live Preview 2.0. This might differ from the one present in Sample Starter Apps.

Sample Env For SSR:

#create environment file name as .env.local

#and place following configuration data.


CONTENTSTACK_API_KEY=YOUR_API_KEY

CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN

CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT


# For live preview

CONTENTSTACK_PREVIEW_TOKEN=

CONTENTSTACK_APP_HOST=app.contentstack.com

CONTENTSTACK_API_HOST=cdn.contentstack.io

CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com

CONTENTSTACK_LIVE_PREVIEW=true

CONTENTSTACK_LIVE_EDIT_TAGS=true


#site-map

NEXT_PUBLIC_HOSTED_URL=http://localhost:3000

# Requires host url for sitemap. Localhost:3000 is set as default value


# For Live preview default value is to true to disable live preview set CONTENTSTACK_LIVE_PREVIEW=false

# For live edit tags default value is set to false to enable live edit tag set CONTENTSTACK_LIVE_EDIT_TAGS=true

# For NA region add CONTENTSTACK_APP_HOST=app.contentstack.com

# For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com


# For setting custom host add CONTENTSTACK_API_HOST=for(NA: cdn.contentstack.io, EU: eu-cdn.contentstack.com)