search

Adobe-Marketing-Cloud / aem-guides-wknd-events

Step by Step guide to creating a Single Page Application to use with AEM
48 stars 34 forks source link

[SSR] Information Request for Json #18

Closed bobbayunga closed 5 years ago

bobbayunga commented 5 years ago

Hi, I'm trying to understand the concept of the Server side rendering that is introduced in the SPA Editor. I tried to figure out how a component is rendered on the screen. I don't find where the SPA editor sends a request to the AEM instance to get information about the requested html page. It's very confusing to me and maybe it's because I'm new to the AEM World

Thanks!!!

godanny86 commented 5 years ago

Hi @DriesVanbilloen SSR is currently in tech preview, you can see a POC using the We.Retail Journal project. Which uses a separate node server to generate the static markup of the app, which is then consumed server to server. This will be a chapter in the WKND Events tutorial once an official productized version is released.

bobbayunga commented 5 years ago

Oh ok, but still,I don't understand the workflow in this project? How does the page render and where does it gets it's data?

godanny86 commented 5 years ago

So at a high level:

  1. AEM -> includes the JS for the React app
  2. The React App then makes an ajax request to get the content from AEM (/content/wknd-events/react.model.json). The ajax call is made by the ModelProvider by the Adobe react editable components, so you don't see it in the WKND events src code, but this line in App.js: export default withModel(App); is responsible for making the call and then mapping the JSON to React components
  3. React components read the JSON (passed in as props) and renders with standard React component behavior

The editable portion is included in a separate iFrame that goes in and inspects the React app and renders edit capabilities. I'd recommend viewing the following:

  1. https://helpx.adobe.com/experience-manager/kt/sites/using/spa-editor-framework-feature-video-use.html
  2. https://helpx.adobe.com/experience-manager/kt/eseminars/gems/aem-spa-editor.html
  3. https://helpx.adobe.com/experience-manager/kt/eseminars/gems/SPA-Editor-SDK-Deep-Dive-React.html#main-pars_text -> TODAY!
bobbayunga commented 5 years ago

Thanks for the information, I think we will talk a lot more in the future :) I hope it's fine that I make issues on the github to ask question or what is the standard for asking questions?

godanny86 commented 5 years ago

No problem @DriesVanbilloen! Please ask away. As a general guide I would try to keep issues on GitHub more or less related to the tutorial. For more general questions go to the forums, but either way continue to reach out 👍