Web Development – Clearing Up Misconceptions About Flask Backend and Client-Side Rendering

backendflaskfront-endnode.jsweb-development

I am building a website and along the way I have come across a lot of things I didn't know about and was hoping to get some help in understanding some of them.

I started building a website using Flask and the Jinja templating language. This was very intuitive and easy to understand: client makes a request, server checks all requests are good and then delivers the whole working page in one go.

Then I wanted to upgrade my frontend to use ReactJS. From my research I found that I could still go the server-side rendering route if I used a library like python-react, but I opted for client-side rendering instead. This meant a couple of things

  • I will need a frontend server (e.g. node.js) to render the frontend
  • I will need to refactor my Flask backend to behave like an API

So when a client makes a request for, say, the home page, the process will look something like this (if I understand correctly?):
enter image description here

Assuming I am correct up to this point, my question is, how does the above diagram look in the case of submitting a form?

A form requires a CSRF token to be embedded in it when it is rendered, i.e. the token is created on the Frontend Server. But then, how does the Backend verify that token? Does all authentication also need to happen on the Frontend server? I am not clear on how the Frontend and Backend fit together.

Best Answer

You are incorrect about the need for separate front-end and back-end servers. You need only one server, which can be your Flask-based server, that

  • provides one (static) HTML page when users access the entry-point URL (/home in your diagram)
  • provides a bunch of (static) JS files for the ReactJS implementation of your front-end
  • provides an API for the dynamic content of the site.

As there is only one server, the handling of the CSRF tokens shouldn't be an issue.