Show on the frontend results returned from a server action in Next JS

Question

I'm new to NEXT JS and I wanted to test it because of the new Server actions function.

I have created a form that, on Submit, launches a server action that fetches some data from an API.

page.tsx

import Form from "@/components/Form";

export default function Home() {
  return (
    <div className="container mx-auto flex justify-center items-center h-screen">
      <Form />
    </div>
  );
}

form.tsx

"use client";

import { requestImg } from "@/actions/formActions";

export const Form = () => {
  return (
    <form
      className="bg-white p-8 rounded shadow-md"
      action={async (formData) => {
        await requestImg(formData);
      }}
    >
    ... other stuff ...
   </form>
  );
};

export default Form;

formActions.ts

"use server";

export const requestImg = async (FormData: FormData) => {
  const link = FormData.get("link");

  const response = await fetch(
    `https://<my API link>/get-all-images/`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        link_post: link,
      }),
    }
  );
  const result = await response.json();
  console.log(result);
};

My question is, now, how do I show the result (it is an array of image links) on the front end? Are there some "best practices"?

My idea was to get the ID of the div element I want to update with new HTML and do something like

const results = document.getElementById('result');
results.innerHTML += `
    <img src="results[0]">
`

but, I don't think it is the best practice, especially with NEXT JS