I remember when taking CS290, before it was revamped to incorporate React. It was all about creating your routes properly for whatever action needed to be taken. Then using templating to serve whatever needed to be displayed to the user.

It’s funny because in many ways, my web development knowledge hasn’t really advanced much since then. The basics and fundamentals of web work are numerous. So today I’m writing because I’ve made one small breakthrough, and that is understanding the big picture in a React web application.

I was asking my teammate, “wait, do you know where in the frontend React source code we ‘go’ to another page?” — and it kind of hit me. I had this all backwards. I remember working on my internship and using React routers. I recall there was a specific page where basically all the routes were mapped to some high-level page component.

Whereas in my head, I was thinking — surely the browser needs to ‘go’ to the required page according to the backend’s routes, right? Well, not quite. Instead React will render the component, will change the URL in the browser, and all of that happens client side. Hence (duh) client-side rendering (or, CSR).

So what does that mean for the purpose of the backend? Well in 290 it was all server-side rendered (or, SSR). Which means the job of manipulating data, and serving it visually were handled by the backend. Well, in this case instead the backend is basically just an API, in a way. All it does is send data, and receive data.

The logic of when to trigger these endpoints is determined by the logic of the components. The state is maintained in a sort of dance between the frontend and the database. Once I figured that out, it made more sense. Especially after taking CS344 and CS361, it kind of feels like with CSR we have a producer-consumer pipeline. The producer and consumer are two separate processes, running independently. The backend is like a functional stateless machine (which, duh, that’s literally the S in REST).

Click this button -> send information to *this* backend route to manipulate it in *this* way. The backend reads or writes from the database, maybe with some manipulation. The data comes back, the state of the frontend changes, React re-renders. The user sees the changes made.

I’m not sure why that gave me a hard time but it’s nice when the big picture starts to click, then the details become less intimidating. I remember CS290 intimidated me. A lot. I was totally lost most of the course. When we hit “Workout Tracker” I felt really dumb. But now all these things make sense and I have a greater foundational understanding as to how these pieces work together and what they are supposed to do. It’s a great feeling!