優化部落格 API 整合：Dev.to 和 Hashnode 的經驗教訓

在Astro 開發我的個人作品集期間，我遇到了一個有趣的挑戰：如何有效地整合我的Dev.to 和Hashnode 帖子，而不必每次發文時都重建網站新內容？

問題

問題一開始似乎很簡單：在一個頁面上顯示我來自兩個平台的所有貼文。然而，我遇到了一些挑戰：

1. 分頁限制：最初，我只收到前 20-30 則貼文
2. 遺失的貼文：每次我發布新貼文時，我都必須修改程式碼才能使其顯示
3. 激進的緩存：由於緩存，新帖子沒有立即出現

解決方案

1.無伺服器端點

我在 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'
    }
  });
};

2. 職位收益最大化

關鍵是要求盡可能多的貼文數：

// 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
          }
        }
      }
    }
  }
`;

3. 避免緩存

為了確保內容新鮮，我實作了反快取策略：

const timestamp = new Date().getTime();
const response = await fetch(`/api/posts.json?_=${timestamp}`, {
  headers: {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache'
  }
});

4. 客戶端實現

為了保持介面最新，我創建了一個 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 id="post-title">{post.title}</h2>
          <p>{post.brief}</p>
          <a href="%7Bpost.url%7D">Leer más</a>
        </article>
      ))}
    </div>
  );
}

獲得的好處

1. 自動更新：新貼文出現，無需重建網站
2. 更好的效能：由於無伺服器端點，初始載入速度較快
3. 無內容遺失：所有貼文都可以訪問，無論何時發布
4. 減少維護：無需手動幹預即可顯示新帖子

錯誤處理

我實作了一個強大的錯誤處理系統：

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) : [];
  }
}

效能最佳化

為了進一步提升效能，我實作了：

1. 本地快取：

// 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));
}

1. 影像延遲載入：

function PostImage({ src, alt }) {
  return (
    <img loading="lazy" src="%7Bsrc%7D" alt="{alt}" classname="w-full h-48 object-cover">
  );
}

該解決方案已被證明是穩健且高效的，使我能夠：

• 自動更新我的投資組合
• 透過快速充電改善使用者體驗
• 減少手動維護的需要
• 確保我的所有內容均可用且是最新的

下一步

我計畫實施：

1. 貼文搜尋與過濾系統
2. 內容預覽
3. 參與度指標
4. 統一評論系統

以上是優化部落格 API 整合：Dev.to 和 Hashnode 的經驗教訓的詳細內容。更多資訊請關注PHP中文網其他相關文章！