Original subtitles

Now, before we dive into any demo or any code

let's understand how React apps do talk to databases.

And as you can tell, by the title of this slide,

it's not working as you maybe thought it works

because React apps, or in general browser-side apps,

browser-side code, so JavaScript code

running in the browsers

should never directly talk to a database.

So, if you have a React app and then some kind of database,

a SQL database, a NoSQL database like MongoDB

it does not matter if you have such a database running

on some database server then, of course,

you might want to fetch and store some data

and you might wanna establish a connection,

but that's not what you should do

and that's not what you'll ever see out there in the wild

unless it's a highly insecure and bad written application.

Because if you would directly connect to a database,

if we leave a site that this will technically

be challenging, but if you would do that,

if you would directly connect to a database server

from inside your client-side, your browser-side

JavaScript code, you would expose your

database credentials in that code.

Because you must never forget that all JavaScript code

running in the browser can be accessed and read,

not just by the browser,

but also by the users of your website.

Simply open up the developer tools

and you can view all the code there.

This generally is no problem, and attached you'll find

a more detailed article and video which I created on this.

But, of course, it will become a problem

if you expose security relevant details in your code.

For example, credentials that allow access to a database.

In addition, directly connecting to a database

could also bring other problems like performance issues

but the security problem is the biggest problem of all.

So, therefore, instead of directly talking to a database

from inside your reactive code,

you always take another route.

You have a Backend application running on another machine

not running in the browser,

but running on some server out there,

maybe on the same server as the database,

often on a different server, though.

Now, this Backend application can be written

with any server-side language of your choice,

NodejS, PHP, ASP.NET, everything is possible.

And it's this Backend application

which will do the talking to the database,

because you can safely store and use database credentials

on the Backend application since that Backend code

can't be viewed by your users.

It's on a different server and the users

of your website will never see that code.

And, therefore, the reactive will then talk

to that Backend server, to that Backend API, typically,

which is a server which exposes different URLs

requests can be sent to

and we're going to see this throughout this section.

And then you have a safe connection to the database

because the credentials are on this Backend app,

and for talking to the Backend app

no security relevant details are needed.

This is how this works, and this is what we're going to see

in action in this course module.