ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಸಮನ್ವಯ: ಸಮಾನಾಂತರ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

ಅಸಮಕಾಲಿಕ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು, ವಿಶೇಷವಾಗಿ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ನಾವು ನಿರ್ವಹಿಸುವ ವಿಧಾನದಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಕ್ರಾಂತಿಯನ್ನುಂಟು ಮಾಡಿದೆ. ಇದು ಡೇಟಾ ಲೋಡ್ ಆಗಲು ಕಾಯುತ್ತಿರುವಾಗ ಘಟಕಗಳನ್ನು "ಅಮಾನತುಗೊಳಿಸಲು" (suspend) ಅನುಮತಿಸುತ್ತದೆ, ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಘೋಷಣಾತ್ಮಕ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ವೈಯಕ್ತಿಕ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಳನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸರಳವಾಗಿ ಸುತ್ತುವರಿಯುವುದು ಒಂದು "ವಾಟರ್‌ಫಾಲ್ ಪರಿಣಾಮಕ್ಕೆ" (waterfall effect) ಕಾರಣವಾಗಬಹುದು, ಅಲ್ಲಿ ಒಂದು ಫೆಚಿಂಗ್ ಮುಂದಿನದು ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಪೂರ್ಣಗೊಳ್ಳುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಬಳಸಿ ಬಹು ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಳನ್ನು ಸಮಾನಾಂತರವಾಗಿ ಸಂಘಟಿಸಲು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಡೇಟಾ ಫೆಚಿಂಗ್‌ನಲ್ಲಿ ವಾಟರ್‌ಫಾಲ್ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನಿಮ್ಮ ಹೆಸರು, ಅವತಾರ್ ಮತ್ತು ಇತ್ತೀಚಿನ ಚಟುವಟಿಕೆಯೊಂದಿಗೆ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಸನ್ನಿವೇಶವನ್ನು ಊಹಿಸಿ. ನೀವು ಪ್ರತಿಯೊಂದು ಡೇಟಾ ತುಣುಕನ್ನು ಅನುಕ್ರಮವಾಗಿ (sequentially) ಫೆಚ್ ಮಾಡಿದರೆ, ಬಳಕೆದಾರರು ಹೆಸರಿಗಾಗಿ ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ನೋಡುತ್ತಾರೆ, ನಂತರ ಅವತಾರ್‌ಗಾಗಿ ಮತ್ತೊಂದು ಮತ್ತು ಅಂತಿಮವಾಗಿ, ಚಟುವಟಿಕೆ ಫೀಡ್‌ಗಾಗಿ ಒಂದು ಸ್ಪಿನ್ನರ್ ಅನ್ನು ನೋಡುತ್ತಾರೆ. ಈ ಅನುಕ್ರಮ ಲೋಡಿಂಗ್ ಮಾದರಿಯು ವಾಟರ್‌ಫಾಲ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಇದು ಸಂಪೂರ್ಣ ಪ್ರೊಫೈಲ್‌ನ ರೆಂಡರಿಂಗ್ ಅನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರನ್ನು ನಿರಾಶೆಗೊಳಿಸುತ್ತದೆ. ವಿವಿಧ ನೆಟ್‌ವರ್ಕ್ ವೇಗಗಳನ್ನು ಹೊಂದಿರುವ ಅಂತರರಾಷ್ಟ್ರೀಯ ಬಳಕೆದಾರರಿಗೆ, ಈ ವಿಳಂಬವು ಇನ್ನಷ್ಟು ಹೆಚ್ಚಾಗಬಹುದು.

ಈ ಸರಳೀಕೃತ ಕೋಡ್ ಸ್ನಿಪ್ಪೆಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

function UserProfile() {
  const name = useName(); // ಬಳಕೆದಾರರ ಹೆಸರನ್ನು ಫೆಚ್ ಮಾಡುತ್ತದೆ
  const avatar = useAvatar(name); // ಹೆಸರಿನ ಆಧಾರದ ಮೇಲೆ ಅವತಾರ್ ಅನ್ನು ಫೆಚ್ ಮಾಡುತ್ತದೆ
  const activity = useActivity(name); // ಹೆಸರಿನ ಆಧಾರದ ಮೇಲೆ ಚಟುವಟಿಕೆಯನ್ನು ಫೆಚ್ ಮಾಡುತ್ತದೆ

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="ಬಳಕೆದಾರರ ಅವತಾರ್" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, useAvatar ಮತ್ತು useActivity ಗಳು useName ನ ಫಲಿತಾಂಶವನ್ನು ಅವಲಂಬಿಸಿವೆ. ಇದು ಸ್ಪಷ್ಟವಾದ ವಾಟರ್‌ಫಾಲ್ ಅನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ – useName ಪೂರ್ಣಗೊಳ್ಳುವವರೆಗೆ useAvatar ಮತ್ತು useActivity ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಇದು ಅಸಮರ್ಥವಾಗಿದೆ ಮತ್ತು ಸಾಮಾನ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಯಾಗಿದೆ.

ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸಮಾನಾಂತರ ಡೇಟಾ ಫೆಚಿಂಗ್ ತಂತ್ರಗಳು

ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಕೀಲಿಯು ಎಲ್ಲಾ ಡೇಟಾ ವಿನಂತಿಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಪ್ರಾರಂಭಿಸುವುದು. ನೀವು ಬಳಸಬಹುದಾದ ಹಲವಾರು ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:

1. `React.preload` ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ಡೇಟಾವನ್ನು ಪೂರ್ವಲೋಡ್ ಮಾಡುವುದು

ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ತಂತ್ರಗಳಲ್ಲಿ ಒಂದು ಘಟಕವು ರೆಂಡರ್ ಮಾಡುವ ಮೊದಲೇ ಡೇಟಾವನ್ನು ಪೂರ್ವಲೋಡ್ ಮಾಡುವುದು. ಇದು "ಸಂಪನ್ಮೂಲವನ್ನು" (resource) (ಡೇಟಾ ಫೆಚಿಂಗ್ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಎನ್ಕ್ಯಾಪ್ಸುಲೇಟ್ ಮಾಡುವ ಆಬ್ಜೆಕ್ಟ್) ರಚಿಸುವುದನ್ನು ಮತ್ತು ಡೇಟಾವನ್ನು ಪೂರ್ವ-ಫೆಚಿಂಗ್ ಮಾಡುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. `React.preload` ಇದಕ್ಕೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಘಟಕಕ್ಕೆ ಡೇಟಾ ಅಗತ್ಯವಿರುವ ಹೊತ್ತಿಗೆ, ಅದು ಈಗಾಗಲೇ ಲಭ್ಯವಿರುತ್ತದೆ, ಇದು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿವಾರಿಸುತ್ತದೆ.

ಉತ್ಪನ್ನವನ್ನು ಫೆಚ್ ಮಾಡಲು ಸಂಪನ್ಮೂಲವನ್ನು ಪರಿಗಣಿಸಿ:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// ಬಳಕೆ:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

ಈಗ, ProductDetails ಘಟಕವನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಮೊದಲು ನೀವು ಈ ಸಂಪನ್ಮೂಲವನ್ನು ಪೂರ್ವಲೋಡ್ ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ರೂಟ್ ಪರಿವರ್ತನೆಗಳ ಸಮಯದಲ್ಲಿ ಅಥವಾ ಹೋವರ್ ಮಾಡಿದಾಗ.

React.preload(productResource);

ಇದು ProductDetails ಘಟಕಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಹೊತ್ತಿಗೆ ಡೇಟಾ ಲಭ್ಯವಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಅಥವಾ ನಿವಾರಿಸುತ್ತದೆ.

2. ಏಕಕಾಲೀನ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಾಗಿ `Promise.all` ಅನ್ನು ಬಳಸುವುದು

ಮತ್ತೊಂದು ಸರಳ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ವಿಧಾನವೆಂದರೆ ಒಂದೇ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿ (Suspense boundary) ಒಳಗೆ ಎಲ್ಲಾ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಪ್ರಾರಂಭಿಸಲು Promise.all ಅನ್ನು ಬಳಸುವುದು. ಡೇಟಾ ಅವಲಂಬನೆಗಳು ಮೊದಲೇ ತಿಳಿದಿರುವಾಗ ಇದು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಉದಾಹರಣೆಯನ್ನು ಮತ್ತೆ ನೋಡೋಣ. ಡೇಟಾವನ್ನು ಅನುಕ್ರಮವಾಗಿ ಫೆಚ್ ಮಾಡುವ ಬದಲು, ನಾವು ಹೆಸರು, ಅವತಾರ್ ಮತ್ತು ಚಟುವಟಿಕೆ ಫೀಡ್ ಅನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಫೆಚ್ ಮಾಡಬಹುದು:

import { useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="ಬಳಕೆದಾರರ ಅವತಾರ್" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>ಅವತಾರ್ ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>ಚಟುವಟಿಕೆ ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

ಆದಾಗ್ಯೂ, Avatar ಮತ್ತು Activity ಪ್ರತಿಯೊಂದೂ fetchName ಅನ್ನು ಅವಲಂಬಿಸಿದ್ದರೆ, ಆದರೆ ಪ್ರತ್ಯೇಕ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳ ಒಳಗೆ ರೆಂಡರ್ ಮಾಡಿದ್ದರೆ, ನೀವು fetchName ಪ್ರಾಮಿಸ್ ಅನ್ನು ಪೋಷಕರಿಗೆ ಎತ್ತಿ (lift) ರಿಯಾಕ್ಟ್ ಕಾನ್ಟೆಕ್ಸ್ಟ್ (React Context) ಮೂಲಕ ಒದಗಿಸಬಹುದು.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="ಬಳಕೆದಾರರ ಅವತಾರ್" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>ಅವತಾರ್ ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>ಚಟುವಟಿಕೆ ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. ಸಮಾನಾಂತರ ಫೆಚ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಕಸ್ಟಮ್ ಹುಕ್ (Custom Hook) ಅನ್ನು ಬಳಸುವುದು

ಷರತ್ತುಬದ್ಧ ಡೇಟಾ ಅವಲಂಬನೆಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ, ನೀವು ಸಮಾನಾಂತರ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಕಸ್ಟಮ್ ಹುಕ್ ಅನ್ನು ರಚಿಸಬಹುದು ಮತ್ತು ಸಸ್ಪೆನ್ಸ್ ಬಳಸಬಹುದಾದ ಸಂಪನ್ಮೂಲವನ್ನು ಹಿಂತಿರುಗಿಸಬಹುದು.

import { useState, useEffect, useRef } from 'react';

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('ಸಂಪನ್ಮೂಲವನ್ನು ಇನ್ನೂ ಪ್ರಾರಂಭಿಸಿಲ್ಲ');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// ಬಳಕೆಯ ಉದಾಹರಣೆ:
async function fetchUserData(userId) {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'ಬಳಕೆದಾರ ' + userId };
}

async function fetchUserPosts(userId) {
  // API ಕರೆ ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'ಪೋಸ್ಟ್ 1' }, { id: 2, title: 'ಪೋಸ್ಟ್ 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>ಬಳಕೆದಾರರ ಡೇಟಾ ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

ಈ ವಿಧಾನವು ಪ್ರಾಮಿಸ್‌ಗಳನ್ನು ಮತ್ತು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಸಂಕೀರ್ಣತೆಯನ್ನು ಹುಕ್‌ನಲ್ಲಿ ಆವರಿಸುತ್ತದೆ, ಘಟಕದ ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಡೇಟಾವನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುವತ್ತ ಹೆಚ್ಚು ಗಮನಹರಿಸುತ್ತದೆ.

4. ಸ್ಟ್ರೀಮಿಂಗ್ ಸರ್ವರ್ ರೆಂಡರಿಂಗ್‌ನೊಂದಿಗೆ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಶನ್

ಸರ್ವರ್-ರೆಂಡರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ರಿಯಾಕ್ಟ್ 18 ಸ್ಟ್ರೀಮಿಂಗ್ ಸರ್ವರ್ ರೆಂಡರಿಂಗ್‌ನೊಂದಿಗೆ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಶನ್ ಅನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ಇದು ಸರ್ವರ್‌ನಲ್ಲಿ ಲಭ್ಯವಾಗುತ್ತಿದ್ದಂತೆ HTML ಅನ್ನು ಕ್ಲೈಂಟ್‌ಗೆ ತುಂಡು ತುಂಡಾಗಿ ಕಳುಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಘಟಕಗಳನ್ನು <Suspense> ಬೌಂಡರಿಗಳೊಂದಿಗೆ ಸುತ್ತುವರಿಯಬಹುದು, ಇದರಿಂದ ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಘಟಕಗಳು ಸರ್ವರ್‌ನಲ್ಲಿ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಪುಟದ ಉಳಿದ ಭಾಗವು ಇಂಟರಾಕ್ಟಿವ್ ಆಗಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಾಟಕೀಯವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ನಿಧಾನಗತಿಯ ನೆಟ್‌ವರ್ಕ್ ಸಂಪರ್ಕಗಳು ಅಥವಾ ಸಾಧನಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ.

ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್ ಪ್ರಪಂಚದ ವಿವಿಧ ಪ್ರದೇಶಗಳಿಂದ (ಉದಾಹರಣೆಗೆ, ಏಷ್ಯಾ, ಯುರೋಪ್, ಅಮೆರಿಕಗಳು) ಲೇಖನಗಳನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಕೆಲವು ಡೇಟಾ ಮೂಲಗಳು ಇತರರಿಗಿಂತ ನಿಧಾನವಾಗಿರಬಹುದು. ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಶನ್ ವೇಗವಾದ ಪ್ರದೇಶಗಳಿಂದ ಲೇಖನಗಳನ್ನು ಮೊದಲು ಪ್ರದರ್ಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಆದರೆ ನಿಧಾನಗತಿಯ ಪ್ರದೇಶಗಳಿಂದ ಲೇಖನಗಳು ಇನ್ನೂ ಲೋಡ್ ಆಗುತ್ತಿರುತ್ತವೆ, ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ದೋಷಗಳು ಮತ್ತು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ಸಸ್ಪೆನ್ಸ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯ ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸಿದರೆ, ದೋಷ ನಿರ್ವಹಣೆ ನಿರ್ಣಾಯಕವಾಗಿ ಉಳಿದಿದೆ. ಎರರ್ ಬೌಂಡರಿಗಳು (componentDidCatch ಲೈಫ್‌ಸೈಕಲ್ ವಿಧಾನ ಅಥವಾ `react-error-boundary` ನಂತಹ ಲೈಬ್ರರಿಗಳಿಂದ useErrorBoundary ಹುಕ್ ಅನ್ನು ಬಳಸಿ) ಡೇಟಾ ಫೆಚಿಂಗ್ ಅಥವಾ ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸುವ ದೋಷಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳೊಳಗೆ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಇರಿಸಬೇಕು, ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... ದೋಷಕ್ಕೊಳಗಾಗಬಹುದಾದ ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡುತ್ತದೆ
}

function App() {
  return (
    <ErrorBoundary fallback={<div>ಏನೋ ತಪ್ಪಾಗಿದೆ!</div>}>
      <Suspense fallback={<div>ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

ಲೋಡಿಂಗ್ ಮತ್ತು ದೋಷ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ತಿಳಿವಳಿಕೆ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಒದಗಿಸಲು ನೆನಪಿಡಿ. ನಿಧಾನಗತಿಯ ನೆಟ್‌ವರ್ಕ್ ವೇಗಗಳು ಅಥವಾ ಪ್ರಾದೇಶಿಕ ಸೇವಾ ಅಡಚಣೆಗಳನ್ನು ಎದುರಿಸಬಹುದಾದ ಅಂತರರಾಷ್ಟ್ರೀಯ ಬಳಕೆದಾರರಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ.

ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ನಿರ್ಣಾಯಕ ಡೇಟಾವನ್ನು ಗುರುತಿಸಿ ಮತ್ತು ಆದ್ಯತೆ ನೀಡಿ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್‌ಗೆ ಯಾವ ಡೇಟಾ ಅತ್ಯಗತ್ಯ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಿ ಮತ್ತು ಆ ಡೇಟಾವನ್ನು ಮೊದಲು ಫೆಚ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡಿ.
• ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಡೇಟಾವನ್ನು ಪೂರ್ವಲೋಡ್ ಮಾಡಿ: ಘಟಕಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಮೊದಲು ಡೇಟಾವನ್ನು ಪೂರ್ವಲೋಡ್ ಮಾಡಲು `React.preload` ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸಿ, ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
• ಡೇಟಾವನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಫೆಚ್ ಮಾಡಿ: ಬಹು ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಳನ್ನು ಸಮಾನಾಂತರವಾಗಿ ಪ್ರಾರಂಭಿಸಲು `Promise.all` ಅಥವಾ ಕಸ್ಟಮ್ ಹುಕ್‌ಗಳನ್ನು ಬಳಸಿ.
• API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಉತ್ತಮಗೊಳಿಸಿ: ನಿಮ್ಮ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳು ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಉತ್ತಮಗೊಳಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಲೇಟೆನ್ಸಿ ಮತ್ತು ಪೇಲೋಡ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಿ. ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಡೇಟಾವನ್ನು ಮಾತ್ರ ಫೆಚ್ ಮಾಡಲು GraphQL ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಕ್ಯಾಚಿಂಗ್ (Caching) ಅನ್ನು ಅಳವಡಿಸಿ: API ವಿನಂತಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಆಗಾಗ್ಗೆ ಪ್ರವೇಶಿಸುವ ಡೇಟಾವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ. ದೃಢವಾದ ಕ್ಯಾಚಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳಿಗಾಗಿ `swr` ಅಥವಾ `react-query` ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಬಳಸಿ: ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸಿ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಭಾಗಗಳನ್ನು ಪ್ರಗತಿಪರವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ರೆಂಡರ್ ಮಾಡಲು ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಅನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಪರಿಹರಿಸಲು ಲೈಟ್‌ಹೌಸ್ (Lighthouse) ಅಥವಾ ವೆಬ್‌ಪೇಜ್‌ಟೆಸ್ಟ್ (WebPageTest) ನಂತಹ ಪರಿಕರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿಯಮಿತವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.
• ದೋಷಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಿ: ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಅಳವಡಿಸಿ, ಬಳಕೆದಾರರಿಗೆ ತಿಳಿವಳಿಕೆ ನೀಡುವ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ.
• ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಅನ್ನು ಪರಿಗಣಿಸಿ: ಎಸ್‌ಇಒ (SEO) ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ, ವೇಗವಾದ ಆರಂಭಿಕ ಅನುಭವವನ್ನು ನೀಡಲು ಸ್ಟ್ರೀಮಿಂಗ್ ಮತ್ತು ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಶನ್‌ನೊಂದಿಗೆ ಎಸ್‌ಎಸ್‌ಆರ್ ಅನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್, ಸಮಾನಾಂತರ ಡೇಟಾ ಫೆಚಿಂಗ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಬಲ ಟೂಲ್‌ಕಿಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ವಾಟರ್‌ಫಾಲ್ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಪೂರ್ವಲೋಡಿಂಗ್, Promise.all ನೊಂದಿಗೆ ಏಕಕಾಲೀನ ಫೆಚಿಂಗ್ ಮತ್ತು ಕಸ್ಟಮ್ ಹುಕ್‌ಗಳಂತಹ ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸುವ ಮೂಲಕ, ನೀವು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗಾಗಿ ಉತ್ತಮಗೊಳಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ದೋಷಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಲು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ನೆನಪಿಡಿ. ರಿಯಾಕ್ಟ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವಂತೆ, ಸ್ಟ್ರೀಮಿಂಗ್ ಸರ್ವರ್ ರೆಂಡರಿಂಗ್‌ನೊಂದಿಗೆ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಶನ್‌ನಂತಹ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದು ನಿಮ್ಮ ಸಾಮರ್ಥ್ಯವನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸುತ್ತದೆ, ಸ್ಥಳ ಅಥವಾ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ ಅಸಾಧಾರಣ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ನೀಡುತ್ತದೆ. ಈ ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಕ್ರಿಯಾತ್ಮಕ ಮಾತ್ರವಲ್ಲದೆ ನಿಮ್ಮ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಬಳಸಲು ಸಂತೋಷಕರವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.

ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸಮಾನಾಂತರ ಡೇಟಾ ಫೆಚಿಂಗ್ ತಂತ್ರಗಳ ಸಮಗ್ರ ಅವಲೋಕನವನ್ನು ಒದಗಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ. ಇದು ನಿಮಗೆ ತಿಳಿವಳಿಕೆ ಮತ್ತು ಸಹಾಯಕವಾಗಿದೆ ಎಂದು ನಾವು ಭಾವಿಸುತ್ತೇವೆ. ನಿಮ್ಮ ಸ್ವಂತ ಯೋಜನೆಗಳಲ್ಲಿ ಈ ತಂತ್ರಗಳನ್ನು ಪ್ರಯೋಗಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಆವಿಷ್ಕಾರಗಳನ್ನು ಸಮುದಾಯದೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಲು ನಾವು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ.