블로그 API 통합 최적화: Dev.to 및 Hashnode를 통해 얻은 교훈-JS 튜토리얼-php.cn

블로그 API 통합 최적화: Dev.to 및 Hashnode를 통해 얻은 교훈

DDD

풀어 주다： 2024-12-18 10:53:11

원래의

319명이 탐색했습니다.

Optimizando la Integración de APIs de Blog: Lecciones Aprendidas con Dev.to y Hashnode

Astro와 함께 개인 포트폴리오를 개발하는 동안 저는 흥미로운 도전에 직면했습니다. 게시할 때마다 사이트를 다시 구축할 필요 없이 Dev.to와 Hashnode 게시물을 효율적으로 통합하는 방법이었습니다. 새로운 콘텐츠가 있나요?

문제

처음에는 문제가 간단해 보였습니다. 두 플랫폼의 모든 게시물을 단일 페이지에 표시하는 것이었습니다. 하지만 몇 가지 문제에 직면했습니다.

페이지 매김 제한: 처음에는 처음 20-30개의 게시물만 가져왔습니다
잃어버린 게시물: 새 게시물을 게시할 때마다 해당 게시물이 나타나도록 코드를 수정해야 했습니다
공격적 캐시: 캐시로 인해 새 게시물이 즉시 표시되지 않음

해결책

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

로그인 후 복사

이 솔루션은 강력하고 효율적인 것으로 입증되어 다음과 같은 이점을 제공합니다.