Details
-
Epic
-
Resolution: Fixed
-
Neutral
-
None
-
None
-
None
-
-
React RSC
-
Empty show more show less
-
Yes
-
Yes
Description
Status
As documented here: https://docs.magnolia-cms.com/headless/spa-development/magnolia-front-end-helpers-for-SPA.html
React Server Components (RSC) and NextJS App Router
Experimental support for React Server Components and NextJS App Router is available in version 1.6-experimental.6 of the react-editor.
To learn more about this feature and to try it in a demo, see README-nextjs-app-router.md (in the minimal-headless-spa-demos repository).
(ON the nextjs-app-router-demo branch)
Ticket
Support App Routing in Next JSS 13 and "React Server Components".
Discovery was done here: https://jira.magnolia-cms.com/browse/MGNLFE-466
Plan of action:
Replace React.createContext() in EditorContext.js using a global singleton that can share data between components:
- Consider moving unchanged data in 1 js singleton (componentMappings, fallbackComponent, devMode)
- And easy changed data in another js (content from page, templateAnnotations)
Move from class components to functions and pls following with ordered tickets:
1. EditableComment (interactivity component)
- Convert all class components to function components: https://nextjs.org/docs/messages/class-component-in-server-component
- Replace componentDidMount, componentDidUpdate, and componentWillUnmount with effect hook https://legacy.reactjs.org/docs/hooks-overview.html
- alwaysRender props should pass from parent component. Detect alwaysRender via #magnoliaContext.isMagnolia from EditorContextHelper
- Add 'use client' in top of file ( react will ignore it by default so maybe no harm at all)
2. EditableComponent (no interacty)
- Convert all class components to function components: https://nextjs.org/docs/messages/class-component-in-server-component
- Remove all componentDidMount, componentDidUpdate, componentWillUnmount and state from react life cycle :https://legacy.reactjs.org/docs/state-and-lifecycle.html
3. EditableArea (no interacty)
- Convert all class components to function components: https://nextjs.org/docs/messages/class-component-in-server-component
- Remove all componentDidMount, componentDidUpdate, componentWillUnmount and state from react life cycle :https://legacy.reactjs.org/docs/state-and-lifecycle.html
4. EditablePage (no interacty)
- Convert all class components to function components: https://nextjs.org/docs/messages/class-component-in-server-component
- Remove all componentDidMount, componentDidUpdate, componentWillUnmount and state from react life cycle :https://legacy.reactjs.org/docs/state-and-lifecycle.html
5. RegiterEvents with PageEditorBridge (interactivity component, just use hook, no render needed)
- Use function components: https://nextjs.org/docs/messages/class-component-in-server-component
- Moving componentDidMount from EditablePage to this component and use react hook. Consider draft ex: https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/220/diff#samples/next-js-13-with-react-editor-new/packages/react-wrap-client-component-typescript/src/RegisterEvents.tsx
- Add 'use client' in top of file (react will ignore it by default so maybe no harm at all)
Full notes are here: https://wiki.magnolia-cms.com/display/TH2/SPA+Editor+and+Next+13+and+RSC
Checklists
Attachments
Issue Links
- caused by
-
MGNLFE-466 Discovery to support for Next.js 13+ App Router
-
- Closed
-
- is related to
-
MGNLFE-578 Update react-samples to use functional components
-
- Open
-