Extract context before rendering other components

packages/app/src/client/app.jsx

@@ -155,23 +155,42 @@ if (pageContainer.state.path != null) {
   });
 }
 
-Object.keys(componentMappings).forEach((key) => {
-  const elem = document.getElementById(key);
-  if (elem) {
-    ReactDOM.render(
-      <I18nextProvider i18n={i18n}>
-        <ErrorBoundary>
-          <SWRConfig value={swrGlobalConfiguration}>
-            <Provider inject={injectableContainers}>
-              {componentMappings[key]}
-            </Provider>
-          </SWRConfig>
-        </ErrorBoundary>
-      </I18nextProvider>,
-      elem,
-    );
-  }
-});
+const renderMainComponents = () => {
+  Object.keys(componentMappings).forEach((key) => {
+    const elem = document.getElementById(key);
+    if (elem) {
+      ReactDOM.render(
+        <I18nextProvider i18n={i18n}>
+          <ErrorBoundary>
+            <SWRConfig value={swrGlobalConfiguration}>
+              <Provider inject={injectableContainers}>
+                {componentMappings[key]}
+              </Provider>
+            </SWRConfig>
+          </ErrorBoundary>
+        </I18nextProvider>,
+        elem,
+      );
+    }
+  });
+};
+
+// extract context before rendering main components
+const elem = document.getElementById('page-context');
+ReactDOM.render(
+  <I18nextProvider i18n={i18n}>
+    <ErrorBoundary>
+      <SWRConfig value={swrGlobalConfiguration}>
+        <Provider inject={injectableContainers}>
+          {componentMappings['page-context']}
+        </Provider>
+      </SWRConfig>
+    </ErrorBoundary>
+  </I18nextProvider>,
+  elem,
+  renderMainComponents,
+);
+
 
 // initialize scrollpos-styler
 ScrollPosStyler.init();