Introduction to Talking to the Server

Introduction

Communicating with the server is an important task for client-side apps. The server is usually the source of data truth and it has information the client needs. For example, server information may have changed, and we may need updated data to draw a new part of the client application. The server also often needs to be informed of actions taken by the client.

In a Hotwire environment, we can use Turbo Frames and Turbo Streams to manage much server interactivity through regular HTTP requests to the server, which then returns regular HTML responses. However, sometimes we may want to manage server communication as part of our Stimulus and React code.

In this chapter, we’ll look at using Stimulus to mediate a form submission in our sample application to get information from the server about which concerts are sold out. Then, we’ll discuss what to do when we have to contact a server that returns data rather than HTML. We’ll also look at how to get React components to receive API data and incorporate it into their state by sending and receiving data about which seats in the concert have already been held.

Using Stimulus to manage forms

Turbo is designed to allow regular form submissions to trigger interactive changes on a page without having to reload the entire page. Sometimes, though, we need a little more client-side complexity. We might want the form to be submitted on a user action other than clicking a “Submit” button. Or, we might want to gather data from elsewhere on the page. In either case, we can use Stimulus to mediate our form submission.

use Stimulus to mediate our ...