nocturne stump
I try to set up a minimal version of astro with react components for interactivity. When running npm run build && npm run preview it works as expected. However when uploading to my website (dogado webhosting) the hydration fails. Here is my code:
index.astro
---
import Posts from "../components/posts";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
<div>
<h2>Test</h2>
<Posts client:load />
</div>
</body>
</html>
posts.tsx
import { useEffect, useState } from 'react';
interface Post {
id: number;
title: string;
body: string;
}
export default function Posts() {
const [posts, setPosts] = useState<Post[]>([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://dummyjson.com/posts');
const result = await response.json();
setPosts(result.posts);
};
fetchData();
}, []);
if (!posts) return <div>Loading...</div>;
return (
<div>
{posts.map((post) => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.body}</p>
</div>
))}
<button onClick={() => alert('test')}>Test</button>
</div>
);
}