---
# System prepended metadata

title: Example request roundtrip for a component!

---

# Example request roundtrip for a component!

![](https://i.imgur.com/2XbwQim.jpg)

### 1. Frontend asks backend what the content of that subpage is
backend/v2/getPage
```json
{
    "action":"GIMMI PAGE PLZZZZZ!!11",
    "pageId":"1337"
}
```

### 2. Backend responds with list of components
```json
{
    "components":[
        {
            "type":"CMSMultiTeaser",
            "id": "193589135"
        },
        {
            "type":"CMSTestComponent",
            "id": "1341341341"
        },
        {
            "type":"CMSProductCarousel",
            "id": "1531351351"
        }

    ]
}
```
### 3. Frontend fetches data for all of the components (one by one)
- backend/v2/getComponent/193589135
- backend/v2/getComponent/1341341341
- backend/v2/getComponent/1531351351

### 4. Backend responds with component data
```javascript
{
    uid: 'cms-multi-teaser',
    uuid: 'eyJpdGVtSWQiOiJ0ZXN0LW',
    typeCode: "CMSMultiTEaser",
    modifiedtime: '2019-07-12T14:35:30.000+0000',
    name: 'MultiTeaser',
    otherProperties: {
        (...)
    }
}
```
```javascript
{
    uid: 'cms-test-component',
    uuid: 'eyJpdGVtSWQiOiJ0ZXN0LW',
    typeCode: "CMSMultiTEaser",
    modifiedtime: '2019-07-12T14:35:30.000+0000',
    name: 'TestComponent',
    otherProperties: {
        headline: "Thats a nice headline"
    }
}
```
```javascript
{
    uid: 'cms-product-carousel',
    uuid: 'eyJpdGVtSWQiOiJ0ZXN0LW',
    typeCode: "CMSProductCarousel",
    modifiedtime: '2019-07-12T14:35:30.000+0000',
    name: 'ProductCarousel',
    otherProperties: {
        (...)
    }
}
```

### 5. Frontend initializes components with the relevant data
```html
    <CMSTestComponent otherProperties={{headline: "Thats a nice headline"}}/>
```