i got this example in my code :

// import { generativeModel } from "@/lib/gemini/vertex/vertex";
import { Model } from "@/lib/prompts/utils";
import { textSchema } from "@/lib/zod/textSchema";
import { NextRequest } from "next/server";

import { GoogleGenerativeAI } from "@google/generative-ai";

const genIA = new GoogleGenerativeAI(process.env.GOOGLE_API_KEY!);

export const generativeModel = genIA.getGenerativeModel({
  model: "gemini-pro",
});

export const dynamic = "force-dynamic";

export const POST = async (req: NextRequest) => {
  try {
    const data = await req.json();

    const title = String(data.title);

    const text = String(data.text);

    const prompt = Model.prompt(title, text);

    const request = {
      contents: [{ role: "user", parts: [{ text: prompt }] }],
    };
    const streamingResult = await generativeModel.generateContentStream(
      request
    );
    for await (const item of streamingResult.stream) {
      console.log("stream chunk: ", JSON.stringify(item));
    }
    const aggregatedResponse = await streamingResult.response;
    console.log("aggregated response: ", JSON.stringify(aggregatedResponse));

    return Response.json(aggregatedResponse);
  } catch (err) {
    console.log(err);

    return Response.json({ status: 404 });
  }
};

what is the best way to represent streaming data on the front end ?