blazor form SSR vs Interactive Server

I'm trying to learn Blazor, coming from a .Net webforms->MVC->API + Angular background. We have another project starting soon and we asked to learn Blazor. While going through a tutorial i'm a little confused about the differences between SSR (Static Server-Side Rendering) and Interactive Server Renderings.

I thought SSR was no interactivity at all, just static data. for example if you had a faq page which just reads from db and displays nothing else happens. but if you had a contact us form which needs a button click well then you would have to enable @rendermode InteractiveServer

However, while watching the video, the author built the below form:

@page "/employeeadd"

<h3>Add New Employee</h3>

@if (!IsSaved)
{
    <form method="post" data-enhance @onsubmit="OnSubmit" @formname="add-employee-form">

        <AntiforgeryToken />

    <div class="row mb-3">
        <label for="lastName" class="col-form-label col-md-3">Last name: </label>
        <div class="col-md-8">
            <InputText id="lastName" class="form-control col-md-8" @bind-Value="@Employee.LastName" placeholder="Enter Last Name"></InputText>
        </div>
    </div>

    <div class="row mb-3">
        <label for="firstName" class="col-form-label col-md-3">First name: </label>
        <div class="col-md-8">
            <InputText id="firstName" class="form-control col-md-8" @bind-Value="@Employee.FirstName" placeholder="Enter first name"></InputText>
        </div>

    </div>

    <div class="row mb-3">
        <label for="email" class="col-form-label col-md-3">Email: </label>
        <div class="col-md-8">
            <InputText id="email" class="form-control col-md-8" @bind-Value="@Employee.Email" placeholder="Enter email"></InputText>
        </div>
    </div>

    <div class="row mb-3">
        <label for="comment" class="col-form-label col-md-3">Comment: </label>
        <div class="col-md-8">
            <InputTextArea id="comment" class="form-control" @bind-Value="@Employee.Comment" placeholder="Enter comment"></InputTextArea>
        </div>
    </div>

    <div>
        <button type="submit" class="btn btn-outline-primary ms-1">Submit</button>
    </div>
</form>
}
else
{
    <h4 class="text-success">@Message</h4>
}

the code-behind:

namespace Sample.Components.Pages
{
    public partial class EmployeeAdd
    {
        [SupplyParameterFromForm]
        public Employee Employee { get; set; }

        [Inject]
        public IEmployeeDataService EmployeeDataService { get; set; }

        protected string Message = string.Empty;
        protected bool IsSaved = false;

        protected override void OnInitialized()
        {
            Employee ??= new();
        }

        private async Task OnSubmit()
        {
            await EmployeeDataService.AddEmployee(Employee);
            IsSaved = true;
            Message = "Employee added successfully";
        }
    }
}

I assumed this first would not work without InteractiveServer, but it worked, why? I thought SSR meant no interactivty, things only flow one way from Server->UI not UI-Server, or can it go either way as long it's 1 way only?

Also the author then said:

One thing though, isn't this now interactive as well? Great question. The answer is no. We just posted data to the server that triggered the OnSubmit on the server, and that we then used to change things. And the resulting HTML was sent to the client and patched into the existing page.

Isnt that interactive? patched into the existing page sounded like to me just the changed data came back, not a full page refresh.

I thought SSR meant no interactivty, things only flow one way from Server->UI not UI-Server, or can it go either way as long it's 1 way only?

It's not about one-way vs bidirectional.

You have used MVC, Blazor SSR is just like that. With a little bit of optimization ("... and patched into the existing page"). The only interactivity here is with GET and POST.

You can see the difference better when you add some validation to your controls. With SSR the validations will only trigger on Submit, all at once. Add @rendermode InteractiveServer to the exact same page and validation happens when the focus leaves a Control.