# Comprehensive guide to setting up CSR and SSR for Live Preview

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/learning-paths/contentstack-developer-certification/implementing-live-preview/comprehensive-guide-to-setting-up-csr-and-ssr-for-live-preview |
| **course_slug** | implementing-live-preview |
| **lesson_slug** | comprehensive-guide-to-setting-up-csr-and-ssr-for-live-preview |
| **learning_path_slug** | contentstack-developer-certification |
| **markdown_file_url** | /academy/md/learning-paths/contentstack-developer-certification/implementing-live-preview/comprehensive-guide-to-setting-up-csr-and-ssr-for-live-preview.md |
| **generated_at** | 2026-05-18T10:09:02.760Z |

> Lesson in **[Implementing Live Preview](https://www.contentstack.com/academy/learning-paths/contentstack-developer-certification/implementing-live-preview)** within the **contentstack-developer-certification** learning path on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"09","type":"text","duration_minutes":1,"topics":["Comprehensive","guide","setting","CSR","and","SSR"]} -->

#### Lesson text

### **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)

#### Key takeaways

- Connect **Comprehensive guide to setting up CSR and SSR for Live Preview** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

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

### Retrieval tags

- Comprehensive
- guide
- setting
- CSR
- and
- SSR
- implementing-live-preview
- lesson 09
- Comprehensive guide to setting up CSR and SSR for Live Preview
- implementing-live-preview lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "09" and topics: [Comprehensive, guide, setting, CSR, and, SSR].
Parent course slug: implementing-live-preview. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

_No image or video thumbnail URLs were extracted._

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |