This repo contains a couple of examples on how you implement a fully React-rendered frontend in Django using Hypernova and Create React App.
Example 1: Integrate Hypernova with the built in DRTT (Django React Templatetags) ReactDOM.hydration
In this example we use Hypernova as normal on the backend but with a manual ReactDOM.hydrate on the client side (based on the DRTT component render queue).
Pros:
- Will still work if the Hypernova service is unreachable
- A more resiliant solution
Cons:
- We dont take fully adventage of
hypernova-reactby providing our own hydration - Props are stored in several places, both in the rendered html and in the component render queue in DRTT
- We need to target the Hypernova provided placeholder when we hydrate, instead of the DRTT provided placeholder
In this example we take fully advantage of Hypernova, where we use the Hypernova HOC renderReact to initialize components on the frontend.
Pros:
- Does not require
react_printto initialize the components, since we already export them wrapped inrenderReactHOC they will be automatically initialized - We only use the placeholder div provided by Hypernova and skip the DRTT provided one (by adding
no_placeholderin thereact_rendertemplate tag) - A arguably cleaner solution
Cons:
- If the SSR service is unreachable the components wont work