// pages/posts/[slug].js
export async function getStaticProps(context) {
  const { slug } = context.params;
  const post = await fetch(`https://api.example.com/posts/${slug}`).then(res => res.json());
  return {
    props: { post },
    revalidate: 60,
  };
}

export default function BlogPostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      {/* Phần bình luận có thể dùng CSR hoặc SSR */}
    </div>
  );
}

<template>
  <ClientOnly fallback="Đang tải bản đồ...">
    <MapComponent />
  </ClientOnly>
</template>

<script setup>
import MapComponent from './MapComponent.vue';
</script>

---
import { useState } from 'react';
---

<script define:vars={{ initialCount: 0 }}>
  import { createRoot } from 'react-dom/client';
  function Counter({ initialCount }) {
    const [count, setCount] = useState(initialCount);
    return (
      <div className="counter">
        <button onClick={() => setCount(count - 1)}>-</button>
        <span>{count}</span>
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    );
  }
  const root = document.getElementById('counter-root');
  if (root) {
    createRoot(root).render(<Counter initialCount={initialCount} />);
  }
</script>

<div id="counter-root" client:load></div>
<style>
  .counter { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
</style>

import { useLoaderData, Form } from "@remix-run/react";

export async function loader({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.productId}`).then(res => res.json());
  return { product };
}

export async function action({ request, params }) {
  const formData = await request.formData();
  const quantity = formData.get("quantity");
  console.log(`Thêm ${quantity} sản phẩm ${params.productId} vào giỏ`);
  return null;
}

export default function ProductDetail() {
  const { product } = useLoaderData();
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Giá: ${product.price}</p>
      <Form method="post">
        <label htmlFor="quantity">Số lượng:</label>
        <input type="number" id="quantity" name="quantity" defaultValue={1} min={1} />
        <button type="submit">Thêm vào giỏ</button>
      </Form>
    </div>
  );
}