How to organize MVC on the client?

Question

JavaScript

There is a task - to create a SPA application adhering to the MVC pattern. In fact, the application should only take data from a remote server using a certain API (the server itself is not available to us, we are developing only the client part).
It would seem that everything is clear with the server - it accepts a GET request, somehow processes it there, accesses its own database, retrieves data from there and sends it back. In this case, as far as I understand, the model is the database, the controller is some script that processes my request, and the view is the response from the server in the form of JSON, for example.
And here is how things are on the client? It turns out that my HTML page is a view. The controller is represented by client-side JS scripts that asynchronously access a remote server and receive data from there. What is a client model? It only occurs to me that the model for the client is the entire remote server, including the controller and the view. Indeed, for our JS script, there is only a certain black box in the form of a server, to which we access at the address. We do not know the devices of the remote resource, therefore we cannot divide it into its component parts.
Is this true or am I just confused?

Answer 1

I propose to recall what the MVC scheme looks like:
Model (model) is the object (s) where the data got after parsing the response from the server API.
The controller (controller) is the logic of the interaction of objects (logical connections, mechanics).
Representation (view) is a direct output to the screen (rendering/display).

Answer 2

Everything is like this, in this case the controller is the server
. Of course, you can call the unit of data received from the server a model, but if you don’t do anything with it, but just keep it in a state and output it to the view, then you can even call it a pickle.
Another thing is that if CRUD is created with it on the client and some logic is applied when creating CRUD, then yes, a model and a controller appear. (for example, a list of employees that is displayed, a new employee is created and existing ones are edited)

Answer 3

You should not try to use MVC on the server, since this is primarily a pattern for those applications that directly have a user interface . At least that's what Wikipedia says, and I totally agree with that.
If you have already decided that you will have a SPA (Single Page Application), then most likely (in most cases) both M, and V, and C will be in your SPA.
M- this is the business logic data of your application (Info about the user, products, posts, content), in other words - all the data that matters not for the current client, but for the entire product as a whole. Such things are usually shoved into Redux, MobX or equivalents. There is also client-specific data, such as whether the application's side menu is open. Such data should be stored separately from the main model. For example, in the state of React components.
V is the view of your user interface . V is just a thing that draws an interface based on M . As a rule, this is usually React, Vue (partially Angular).
With- This is the logic of interaction with the application through the user interface. For React, for example, this can be implemented using Thunk, Saga, but it can also go beyond them. C can update M while processing user actions by making requests to the server API.
Both the server itself and its API have nothing to do with the MVC client. And in general, in principle (referring to Wikipedia) should not be related to MVC.
The architecture of the server side and everything that happens there is already a separate task, and judging by your question, it’s not even yours.
I'm so careful to refer to wikipedia because there are, for example, PHP frameworks that also use the MVC terminology. But here you need to understand that it is a little different there, since when using PHP frameworks, the interface is often generated directly on the server. And accordingly they call some things V and use "MVC" "on the server".