2

I am reading through the following tutorial:

http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/

I can't quite grasp what the added value is of using something like django-webpack-loader to fully integrate react.js and django when you can completely decouple django from react, running a separate frontend which links to a DRF rest api.

I may be comparing apples to oranges here, but I am not sure. Any help ?

Improve this question

2 Answers 2

Reset to default
4

From the django-webpack-loader tutorial:

Now that we’ve handed off the build process webpack, only thing we need on the django side is to know which bundle to include in our html pages. This is where django-webpack-loader comes in. It’ll also raise exceptions when webpack fails to build a bundle and will show some useful information to help debug the problem. During development, webpack loader will also block requests while a new bundle is being generated so that only the latest bundles are loaded.

This is the core functionality of that loader. It tells django which are the current bundles to be served. It does not server side render your react app nor does it replace an API that the app needs to consume.

When developing a react app you usually use some kind of bundler that transpiles your javascript code to es5, uglyfies and minifies it. So every time your code changes a new bundle will be created containing your new javascript. A lot of people are using webpack for this task.

Now when a request arrives in django it needs to serve the basic html along with the css and js to be loaded by the client that contains the react app. So django needs to know the path to the files to link. But the path may constantly change when webpack rebuilds them. django-webpack-loader helps you to keep track of these changes and includes the correct paths to the current bundles for your react app to be fetched.

It is not a replacement for an API. Its sole task is to resolve the correct paths to your react app files.

EDIT

So the primary purpose of django-webpack-loader is to ensure that the paths to the most recent build are resolved correctly and in turn can be served. What is the reason these paths will change ?

Weppack appends a random hash to a new bundle like bundle.4j2a032fg.js. This way django can tell the client to cache the script so that it does not have to be re-request it every time. The client will only request a new bundle if the url/path changed. But this also requires that django knows the newest bundle with the correct hash.

does server side rendering occur with the use of Django templates ?

Server Side Rendering (SSR) in the context of react means that a nodejs server actually runs the react application once on the server to produce the initial markup of the app. This can then be statically served with the app. It reduces the perceived loading time for the user because the initial state of the app will immediately be shown and it allows for search engines to statically analyse the page which is good for SEO.

While django does render templates it is only the static html around the react app which it will render by default. Django does not render the react app itself. The react app still needs to initially render itself on the client. So to enable django do do true server side rendering you would have to run a nodejs process next to django that does the static rendering of the react app for django to serve.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

So the primary purpose of django-webpack-loader is to ensure that the paths to the most recent build are resolved correctly and in turn can be served. What is the reason these paths will change ? Is this due simply to the bundle name changing ? Also, I understand the django-webpack-loader package doesn’t have to do with server-side rendering, but does server side rendering occur with the use of Django templates ?
@AranFreel I edited my answer with your additional questions.
very helpful, but this goes back to my original question with a small modification, is there any benefit to using django-webpack-loader for react & django instead of writing a plain react application ?
@AranFreel Not to 100%. Django still doesn't serve static assets (js, css, images, videos) in production system. You will still need nginx in front of django for that purpose. So the advantage is that you could dynamically create the html around your react app with django. Also the django-webpack-loader seems to notice when a new bundle is in the process of being created in development to e.g. delay the request until the bundle was built. In production this is more or less useless.
In the case that the entire page consists of a react app, then it seems there is no advantage.
|
0

In the tutorial they are using templates. Templates are loaded in the backend. So user gets fully rendered page. With django rest framework you need to write seperate fronend. More about this: https://nickjanetakis.com/blog/server-side-templates-vs-rest-api-and-javascript-front-end

Improve this answer

7 Comments

Aha ! server-side rendering, that makes sense. Perfect !!
@AranFreel This has nothing to to with server side rendering. The user does not get a fully rendered page just by using django-webpack-loader. The loader just keeps track of the bundles generatey by webpack to serve the most recently created bundle. You need that when creating continious updates for your react app. The app still needs to consume an api provided by django to render itself. Django somehow needs to be told which javascript files to serve.
@Nuts the link you provided is totally unrelated to OPs question. How is that the accepted answer?
User did not understand: I can't quite grasp what the added value is of using something like django-webpack-loader. And in the tutorial they do return a template. Maybe i misunderstood something? @trixn
@Nuts I see but your answer is not about how django-webpack-loader adds a value. So it does not answer the question at all.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.