{% if components %}
<script>
    {% for component in components %}
        ReactDOM.{{ ssr_available|yesno:"hydrate,render" }}(
            React.createElement({{ component.name }},
                {% if component.json %}
                    {{ component.json|safe }}
                {% else %}
                    null
                {% endif %}),
            {% if ssr_available and component.ssr_params.hypernova_id %}
                document.querySelector('div[data-hypernova-id="{{ component.ssr_params.hypernova_id }}"]')
            {% else %}
                document.getElementById('{{ component.identifier }}')
            {% endif %}
        );
    {% endfor %}
</script>
{% endif %}