在Astro 開發我的個人作品集期間，我遇到了一個有趣的挑戰：如何有效地整合我的Dev.to 和Hashnode 帖子，而不必每次發文時都重建網站新內容？
問題一開始似乎很簡單：在一個頁面上顯示我來自兩個平台的所有貼文。然而，我遇到了一些挑戰：
我在 Astro 中創建了一個無伺服器端點，它結合了兩個平台的帖子：
export const GET: APIRoute = async () => {
const [hashnodePosts, devtoPosts] = await Promise.all([
getHashnodePosts(),
getDevToPosts()
]);
const allPosts = [...hashnodePosts, ...devtoPosts]
.sort((a, b) =>
new Date(b.rawDate).getTime() - new Date(a.rawDate).getTime()
);
return new Response(JSON.stringify(allPosts), {
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-store, no-cache, must-revalidate'
}
});
};
關鍵是要求盡可能多的貼文數：
// Para Dev.to
const params = new URLSearchParams({
username: 'goaqidev',
per_page: '1000', // Máximo número de posts
state: 'published'
});
// Para Hashnode
const query = `
query {
publication(host: "goaqidev.hashnode.dev") {
posts(first: 1000) { // Máximo número de posts
edges {
node {
title
brief
// ...otros campos
}
}
}
}
}
`;
為了確保內容新鮮，我實作了反快取策略：
const timestamp = new Date().getTime();
const response = await fetch(`/api/posts.json?_=${timestamp}`, {
headers: {
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
}
});
為了保持介面最新，我創建了一個 React 元件來處理載入和更新貼文：
import { useState, useEffect } from 'react';
function BlogPosts() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const timestamp = new Date().getTime();
const response = await fetch(`/api/posts.json?_=${timestamp}`);
const data = await response.json();
setPosts(data);
} catch (error) {
console.error('Error fetching posts:', error);
} finally {
setLoading(false);
}
};
fetchPosts();
// Actualizar cada 5 minutos
const interval = setInterval(fetchPosts, 5 * 60 * 1000);
return () => clearInterval(interval);
}, []);
if (loading) return <div>Cargando posts...</div>;
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{posts.map(post => (
<article key={post.id} className="card">
<h2>{post.title}</h2>
<p>{post.brief}</p>
<a href={post.url}>Leer más</a>
</article>
))}
</div>
);
}
我實作了一個強大的錯誤處理系統：
async function fetchPosts() {
try {
const response = await fetch('/api/posts.json');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const posts = await response.json();
return posts;
} catch (error) {
console.error('Error fetching posts:', error);
// Intentar cargar desde caché local si está disponible
const cachedPosts = localStorage.getItem('blog_posts');
return cachedPosts ? JSON.parse(cachedPosts) : [];
}
}
為了進一步提升效能，我實作了：
// Guardar posts en localStorage
localStorage.setItem('blog_posts', JSON.stringify(posts));
// Cargar posts desde localStorage mientras se actualiza
const cachedPosts = localStorage.getItem('blog_posts');
if (cachedPosts) {
setPosts(JSON.parse(cachedPosts));
}
function PostImage({ src, alt }) {
return (
<img
loading="lazy"
src={src}
alt={alt}
className="w-full h-48 object-cover"
/>
);
}
該解決方案已被證明是穩健且高效的，使我能夠：
我計畫實施：
以上是優化部落格 API 整合：Dev.to 和 Hashnode 的經驗教訓的詳細內容。更多資訊請關注PHP中文網其他相關文章！
