I have been using Django for quite a long time passing context data to the templates to render data quite successfully. More recently I have begun to leverage Django to stop passing data to a template context, and rather render the data through a set of API endpoints, and render the data using Javascript, calling axios or ajax to refer to it. Django works well to serve the data as endpoints in this way.
The benefits of doing this is you can practically write a site as a set of asyncronous components much more efficiently than if you pass all that data as one big set of context data to the template, then render it.
What does it take to introduce a template syntax (or something similar) that allows API calls in a way similar to other languages such as Node.js or React? Does it already exist with the url syntax ({% url âendpoint_dataâ %}) or similar? I can only find reference to it in the docs as middleware, but i havenât had much success with that.
Can any developers point me in the right direction, hopefully you can point me to something on github or similar around the template language, where a PR could be created, or some useful adviceâŚ
Thanks
I think I understand.
This wouldnât be possible because Django templates are rendered on the server, and the HTML is sent to the browser. Thatâs it. Thereâs nothing else Django templates can do in that process.
It sounds like HTMX might be useful to you. Iâve never used it but it seems popular, as a way to add JS- based interactivity to server side rendered Django templates. See django-htmx 1.21.0 documentation
Thank you. So you clearly realise that the Django context map is not asynchronous!? Entirely synchronous & that since this is the case the template rendering suxxx big time?
Has anyone mentioned or heard of attaching data to the DOM inside of a view? This could potentially mean asynchronous data retrieval from databases or apis that bind directly onto the DOM and not have to wait endlessly for that render function to complete, or is that again at the mercy of client side / server side mechanics?
I donât want to abandon ship for Vue.js or React entirely just yet⌠Please help.
Welcome @CosmoRied !
I think you missed the key point of the prior response:
Because Django is running on the server, and not in the browser, it doesnât have access to the browserâs DOM. Theyâre running physically in two separate locations.
If you want to perform client-side rendering, then you can use any appropriate JavaScript to do that. Django has the built-in functionality of returning JSON (see the docs for JsonResponse objects which can be adequate for more limited situations, or the Django REST framework for more intricate, comprehensive, or complex situations.
Your JavaScript, whether it be native or using a library such as jQuery, vue, React, etc, would have the responsibility of binding the returned data to the DOM.
Thatâs just what Iâm sayingâŚ
But my question is more subtle⌠Is there no way to extend Django templates to provide similar abilities that JavaScript has to work together when writing an HTML page? It feels weird writing between script tags everywhere.
Why canât we jam the data we send back from the server as prop data in a JavaScript framework? I guess we canât right? If It works better to let the Javascript do the client side, how come we use templates at all? Like rendering a queryset of data, only replace that idea with async requests? APIs are really popular nowadays after all.
Seems a bit weird Django absolutely does not support calling apis, or external endpoints even in its mature age⌠itâs all on axios or Ajax to do the hard work in the end.:.
I think you may need to spend a little bit of time and effort to understand the HTTP protocol and how the request / response cycle works. The way you have worded a lot of your comments leads me to believe that you are not clear on the sequence of events or the direction of control in this process.
This issue is not a âDjangoâ issue. There is no web framework capable of altering the DOM from the server - it physically is impossible within the constraints of the HTTP protocol and browser standards.
Now, to address some of your specific questions:
Not everyone agrees that âit works better to let the JavaScript do the client side.â (I certainly donât, thatâs why I have adopted HTMX as my front-end framework-of-choice.)
Django has no need to call external APIs - the Python request module exists for that purpose - but this has nothing to do with what youâre talking about. A browser does not expose any APIs that the server can call.
1 Like
Just to be clear then, Django should do everything server related - returning JSONResponse for example & HTMX should do everything client related (rendering JSON) for example?
HTMX doesnât render JSON. HTMX expects that what the server is going to return is HTML. See the docs at htmx.org to see what it provides.
(I work in a small development team. Trying to use a heavy-weight JavaScript framework such as vue or react, combined with JSON responses, provide no benefit to the type of work we do. So we rely upon server-side rendering, using HTMX to replace the DOM elements being supplied by the server.)