I've understood that server components basically allow us to do server side rendering and handling caching on a component level instead of page level. One thing I wanted to ask was regarding static html.

Here we have 10000 lines of html that will not require data fetching or any execution of javascript on server side for its logic, it also has no interactivity.

"use client";

import { useState } from "react";

function ClientComponent() {
  const [state, setState] = useState<number>(0);

  function increase() {
    setState((prevState) => prevState + 1);
  }

  return (
    <div>
      {/* ...10000 lines of static html that doesn't need interactivity */}
      <button onClick={increase}>+ Increase</button>
    </div>
  );
}

Here the 10000 lines of static html are seperated into a server component, the button that requires interactivity and makes use of useState is turned into a client component and is embedded inside the ServerComponent.

"use server";

async function ServerComponent() {
  return (
    <div>
      {/* ...10000 lines of static html that doesn't need interactivity */}
      <ClientComponent />
    </div>
  );
}

"use client";

import { useState } from "react";

function ClientComponent() {
  const [state, setState] = useState<number>(0);

  function increase() {
    setState((prevState) => prevState + 1);
  }

  return <button onClick={increase}>Increase</button>;
}

Since nextjs 13 will pre render the client components anyway, does it make sense to seperate static html into server components even though they're not making use of any javascript server-side, for example fetching data from database? Would including those 10000 lines of static html in a client component have any downsides?