Render React components on the server side in Django, also called "isomorphic React". You would do this for faster page loads, to make it friendlier to web crawlers and for SEO.
from react_render.django.render import render_component
props = {
'foo': 'bar',
'woz': [1,2,3],
}
rendered = render_component('path/to/component.jsx', props=props)
print(rendered)
It works by having a NodeJS service on the same server that can render the React components. The Python just uses a simple HTTP API to send the context and the file path over to the service, and it responds with the rendered HTML.
npm install react-render-service --save
pip install react-render-client
Optional: Point it to the service in your settings.py
REACT_SERVICE_URL = 'http://localhost:63578/render'
Start the node server which hosts the renderer.
react-service --debug
Renders a component to its initial HTML.
Returns a RenderedComponent
instance, which can be passed directly into templates
to output the component's HTML.
Arguments:
path_to_source
— a path to a JS or JSX file which exports the component. If the path is relative, django's static file finders will be used to find the file.props
optional — a dictonary that will be serialised to JSON and passed to the component during the renderering process.to_static_markup
optional — a boolean indicating that React'srenderToStaticMarkup
method should be used for the rendering. Defaults toFalse
, which causes React'srenderToString
method to be used.json_encoder
optional — a class which is used to encode the JSON which is sent to the renderer. Defaults todjango.core.serializers.json.DjangoJSONEncoder
.
The result of rendering a component to its initial HTML. RenderedComponents can be passed directly into templates where they output the generated HTML.
# Render the component
my_component = render_component(...)
# Print the generated HTML
print(my_component)
<!-- Insert the generated HTML into your template -->
{{ my_component }}
RenderedComponents have a helper method, render_props
, which outputs your JSON-serialized
props. This allows you to reuse the encoded form of your props on the client-side.
<script>
var myProps = {{ my_component.render_props }};
</script>
mkvirtualenv react-render
pip install .
cd tests
npm install
npm run react-render &
cd ..
python runtests.py