Angular

Building an Open Graph Image Fetcher with Angular

Pandiyan MuruganLeave a comment

I’m always interested in understanding how SEO works. This time, I wanted to learn how the Open Graph (OG) image is fetched from a source when we paste a URL into tools like Slack or social media platforms like Facebook or Twitter. By default, these platforms bring some image as a thumbnail or preview. I learned that this image is called an OG image.
In this blog, we built a small solution to simulate fetching an OG image. We also explored an alternative way to fetch the image using a different approach. Let’s dive into the details!

Building an Open Graph Image Fetcher with Angular

In this blog post, we’ll walk through building a simple Open Graph Image Fetcher using Angular. This application will allow users to enter a URL, fetch the Open Graph image associated with that URL, and display it.

Step 1: Setting Up the Angular Project

First, create a new Angular project if you haven’t already:

ng new open-graph-image-fetcher
cd open-graph-image-fetcher

Step 2: Install Dependencies

We’ll need the HttpClientModule for making HTTP requests. So add it accordingly

Step 3: Create the Service

Create a service to handle fetching the Open Graph image. We’ll use the opengraph.io API for this purpose. Note that you need to get an API key from opengraph.io and add it to your environment configuration.

open-graph.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class OpenGraphService {
  private apiKey = environment.openGraphApiKey; // Use API key from environment

  constructor(private http: HttpClient) {}

  fetchOGImage(url: string): Observable<string> {
    const apiUrl = `https://opengraph.io/api/1.1/site/${encodeURIComponent(url)}?app_id=${this.apiKey}`;
    return this.http.get(apiUrl).pipe(
      map((response: any) => {
        console.log('response', response);
        const ogImage = response.hybridGraph.image;
        return ogImage || '';
      })
    );
  }
}

Step 4: Create the Component

Create a component to handle user input and display the fetched Open Graph image.

app.component.ts

import { Component } from '@angular/core';
import { OpenGraphService } from './open-graph.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  ogImage: string | undefined;
  targetURL = 'https://www.example.com';
  loading = false;

  constructor(private openGraphService: OpenGraphService) {}

  fetchOGImage() {
    this.loading = true;
    this.openGraphService.fetchOGImage(this.targetURL).subscribe(
      (image: string) => {
        this.ogImage = image;
        this.loading = false;
      },
      (error) => {
        console.error('Error fetching Open Graph image', error);
        this.loading = false;
      }
    );
  }
}

app.component.html

<div class="container">
  <h1>Open Graph Image Fetcher</h1>
  <div class="content">
    <input type="text" placeholder="Enter URL" [(ngModel)]="targetURL" (keyup.enter)="fetchOGImage()" class="url-input" />
    <button (click)="fetchOGImage()">Fetch Open Graph Image</button>
    <div *ngIf="loading" class="loader"></div>
    <div *ngIf="ogImage && !loading" class="image-container">
      <img [src]="ogImage" alt="Open Graph Image">
    </div>
  </div>
</div>

app.component.scss

.container {
  text-align: center;
  margin-top: 50px;
}

.content {
  display: inline-block;
  text-align: left;
}

.url-input {
  margin-right: 10px; /* Add space between the textbox and the button */
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 20px auto;
}

.image-container {
  height: 300px; /* Fixed height to prevent jumping */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Alternative Approach: Using Cheerio

Another way to fetch Open Graph data is by using Cheerio, a server-side library that parses HTML and extracts data. However, this approach has limitations, such as proxy issues and the requirement of server-side blocks.

Conclusion

In this blog post, we built a simple Open Graph Image Fetcher using Angular and the opengraph.io API. We also explored an alternative approach using Cheerio on a Node.js server. While the Cheerio approach can be useful, it has limitations such as proxy issues and the requirement of server-side blocks.

Find the source here at GitHub

https://github.com/PandiyanCool/open-graph-image

Feel free to expand on this project by adding more features or improving the UI.

Happy coding!

Memoization for Optimal Data Fetching in Next.js

Pandiyan MuruganLeave a comment

Next.js offers a powerful toolkit for building modern web applications. A crucial aspect of Next.js development is efficiently fetching data to keep your application dynamic and user-friendly. Here’s where memoization comes in – a technique that optimizes data fetching by preventing redundant network requests.

What is Memoization?

Memoization is an optimization strategy that caches the results of function calls. When a function is called with the same arguments again, the cached result is returned instead of re-executing the function. In the context of Next.js data fetching, memoization ensures that data fetched for a specific URL and request options is reused throughout your component tree, preventing unnecessary API calls.

Benefits of Memoization:

  • Enhanced Performance: By reusing cached data, memoization significantly reduces network requests, leading to faster page loads and a smoother user experience.
  • Reduced Server Load: Fewer requests to your server free up resources for other tasks, improving overall application scalability.

Understanding Memoization in Next.js Data Fetching:

React, the foundation of Next.js, employs memoization by default for data fetching within components. This applies to:

  • getStaticProps and getServerSideProps: Even though these functions run on the server, the subsequent rendering of the components on the client-side can benefit from memoization.
  • Client-side fetching with fetch or data fetching libraries: Memoization helps prevent redundant calls within the React component tree.

Real-world Example: Product Listing with Pagination

Imagine a Next.js e-commerce app with a product listing page that uses pagination for better navigation. Here’s how memoization can optimize data fetching:

// ProductList.js

import React from 'react';

function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps(context) {
  const page = context.params.page || 1; // handle pagination
  const response = await fetch(`https://api.example.com/products?page=${page}`);
  const products = await response.json();

  return {
    props: { products },
    revalidate: 60, // revalidate data every minute (optional)
  };
}

export default ProductList;

In this example, getStaticProps fetches product data for a specific page. Memoization ensures that if a user clicks through pagination links requesting the same page data (e.g., page=2), the data is retrieved from the cache instead of making a new API call.

Additional Considerations:

  • Memoization Limitations: Memoization only applies within the same render pass. If a component unmounts and remounts, the cache won’t be used.
  • Custom Logic for Dynamic Data: If your data fetching relies on factors beyond URL and request options (e.g., user authentication or data in the URL path), you’ll need additional logic to handle cache invalidation or data updates.

Tips for Effective Memoization:

  • Leverage Data Fetching Libraries: Libraries like SWR or React Query provide built-in memoization and caching mechanisms for data fetching, simplifying implementation.
  • Control Caching Behavior: Next.js allows you to control cache headers for specific data requests using the revalidate option in getStaticProps or custom caching logic for client-side fetches.

By effectively using memoization in your Next.js applications, you can optimize data fetching, enhance performance, and provide a more responsive user experience. Remember, a well-crafted caching strategy is essential for building performant and scalable Next.js applications.