---
title: Synchronous Storefront Rendering | Shopware Community Hub
description: >-
  This course explores how to establish secure communication between the
  Shopware storefront and your App Server. You’ll learn about client-side data
  retrieval,…
canonical_url: 'https://hub.shopware.com/learn/course/synchronous-storefront-rendering'
---

# Synchronous Storefront Rendering

<LearningObjectives>

- To be able to **retrieve data from the App Server** via client-side code, leveraging the `AppClient` service.
- To have an **understanding** of the **security mechanisms** used when communicating with the App Server via client-side code.
- To explain what storefront plugins are and how they can be helpful within the context of App Development.
- To create a firm understanding of how data can be rendered to the page via a storefront plugin.

</LearningObjectives>

# Synchronous Storefront Rendering

Your App Development skills are flourishing, and it is time to test them. In this course, we will build upon the storefront styling skills we gained in the course **[Storefront Styling with Apps](/learn/course/app-storefront-styling-apps)**, where we built a basic app, connected it to an App Server, and defined a Custom Entity.

In this course, our primary goal is to display custom data on the storefront. To achieve this, we need to navigate the deep waters of App Scripting, grapple with storefront Template Overrides, and bring custom data on board our vessel.

## How this Course works: Code-Along

This learning expedition will follow the development of a fictional Shopware App called the [Shopware Shop Tracker](https://github.com/ShopwareAcademy/ShopwareStoreTracker) – an App which captures and displays information about Physical Stores belonging to the business.

### Working through the Course

This course uses a git-tagging system, allowing you to 'code along' with the material within. You will need a recent version of [Git CLI](https://git-scm.com/downloads/) installed and a working knowledge of [Git Fundamentals](https://www.atlassian.com/git) to take advantage of this feature.

Each time you start a new Learning Unit, you will see a section titled **Code-Along**. In this section, there will be a [Git Tag](https://git-scm.com/book/en/v2/Git-Basics-Tagging) which signifies the starting point of the module in question. Whenever you see this section, you have the option to `checkout` the tag by running:

```bash
git checkout tags/[tag_name]
```

<Callout title="Git Help" type="info">

Local changes to the project may stop you from checking out a tag, giving you an error like:
`error: Your local changes to the following files would be overwritten by checkout`. If this is the case, you will need to clean the directory of working changes, using a command such as `git reset --hard HEAD`.

</Callout>

### Course Conventions

Some terminology used in this course may be new to you. Here are the most important terms:

- **Shopware Root**: The base directory of your Shopware installation
- **App Root**: The folder containing your App (usually under `custom/apps/YourAppName`)
- **App-Server Root**: The base directory of your App's backend server (can be anywhere on your machine)
- **Semantic Versioning**: Version numbers follow the format `Major.Minor.Patch` (e.g., `3.1.5`)

<Callout title="Terminal Commands in the Course" type="info">

All commands are shown in a Linux shell. The tools we use (`composer`, `symfony`, `git`, ...) are cross-platform and work with most modern Operating Systems.

</Callout>

## Learning Units

## Units
- [Fetching Data from the App Server](/learn/unit/fetching-data-from-the-app-server): Learn how to securely fetch data from your App Server and display it in the Shopware storefront.
- [Injecting Data into the DOM](/learn/unit/app-injecting-data-into-the-dom): Extracting data from the App Server is an important part of App development. In this learning unit, you will take a response from the App Server and render it…