Web Rendering

function App() {
  const [data, setData] = React.useState(null);
  const [query, setQuery] = React.useState("default");
  const [input, setInput] = React.useState("default");
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    setLoading(true);
    fetch(
      `https://api.example.com/data?query=${encodeURIComponent(query)}`
    )
      .then((response) => response.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, [query]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setQuery(input);
  };

  return (
    <div>
      <h1>Data Fetch Tutorial</h1>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter query"
        />
        <button type="submit">Search</button>
      </form>
      {loading ? (
        <p>Loading data...</p>
      ) : (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      )}
    </div>
  );
}

export const metadata = {
  title: "SPA-influenced Isomorphic Rendering Example",
  description: "An isomorphic rendering example with SEO metadata.",
  keywords: "rendering, isomorphic, react, SEO, server components",
};

// Assume MutationManager is dynamically imported for client-side behavior.
export default async function Page({ searchParams }) {
  const query = searchParams.query || "default";
  const res = await fetch(
    `https://api.example.com/data?query=${encodeURIComponent(query)}`,
    { cache: "force-cache" }
  );
  const data = await res.json();
  return (
    <div>
      <h1>Isomorphic Page - Results for: {query}</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <MutationManager />
    </div>
  );
}

export const metadata = {
  title: "Server-Rendered Page with Actions",
  description:
    "A server-rendered page that handles mutations using server actions and revalidates paths.",
  keywords: "rendering, server actions, Next.js, MPA",
};

export default async function Page({ searchParams }) {
  const query = searchParams.query || "default";
  const res = await fetch(
    `https://api.example.com/data?query=${encodeURIComponent(query)}`,
    { cache: "force-cache" }
  );
  const data = await res.json();

  async function handleMutation(formData) {
    "use server";
    const res = await fetch("https://api.example.com/update", {
      method: "POST",
      body: formData,
    });
    revalidatePath("/");
  }

  return (
    <div>
      <h1>Server-Rendered Page with Actions</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <ErrorBoundary fallback={<p>Error updating data.</p>}>
        <Suspense fallback={<p>Updating...</p>}>|
          <form action={handleMutation}>
            <input name="value" type="text" />
            <button type="submit">Submit</button>
          </form>
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}