JavaScript-રેન્ડર્ડ કન્ટેન્ટ

આધુનિક વેબ એપ્લિકેશનો ભાગ્યે જ સંપૂર્ણ HTML પીરસે છે - તેના બદલે, કન્ટેન્ટ JavaScript દ્વારા ડાયનેમિક રીતે લોડ અને રેન્ડર થાય છે. આ વેબ સ્ક્રેપિંગ માટે અનોખા પડકારો પેશ કરે છે જેને આપણે આ બે પ્રકરણોમાં નિપટાવીશું.

પ્રકરણ 4: ડાયનેમિક ન્યૂઝ ફીડ

આપણો પ્રથમ પડકાર એક ન્યૂઝ ફીડને સ્ક્રેપ કરવાનો છે જ્યાં લેખો JavaScript દ્વારા ડાયનેમિક રીતે લોડ થાય છે. આ કેટલાક મુખ્ય ખ્યાલો રજૂ કરે છે:

• Playwright સાથે બ્રાઉઝર ઓટોમેશન
• ડાયનેમિક કન્ટેન્ટ લોડ થવાની રાહ જોવી
• JavaScript-રેન્ડર્ડ DOM એલિમેન્ટ્સનું હેન્ડલિંગ

પેજનું માળખું આવું દેખાય છે:

<div class="news-feed">
  <article class="news-item">
    <h2>બ્રેકિંગ ન્યૂઝ શીર્ષક</h2>
    <p>લેખની સામગ્રી...</p>
    <div class="meta">
      <span>લેખક નામ દ્વારા</span>
      <time datetime="2024-03-08T12:00:00Z">માર્ચ 8, 2024</time>
    </div>
  </article>
  <!-- વધુ લેખો ડાયનેમિક રીતે લોડ થાય છે -->
</div>

સ્ટેટિક HTML સ્ક્રેપિંગથી મુખ્ય તફાવતો:

// cheerio.load() ની જગ્યાએ, આપણે Playwright વાપરીએ છીએ
const browser = await chromium.launch();
const page = await browser.newPage();

// કન્ટેન્ટ રેન્ડર થવાની રાહ જોવી
await page.waitForSelector('.news-item');

// page.$$eval() વાપરીને લાઇવ DOM માંથી ડેટા એક્સ્ટ્રેક્ટ કરવું
// આ કૉલબેક ફંક્શનને બ્રાઉઝર કન્ટેક્સ્ટમાં ચલાવે છે
// સિલેક્ટર સાથે મેચ થતા તમામ એલિમેન્ટ્સને એકસાથે ઈવેલ્યુએટ કરવા માટે
const items = await page.$$eval('.news-item', elements => {
  // મેચિંગ એલિમેન્ટ્સ પર Array.map() જેવું કામ કરે છે
  // Serializable JavaScript ઑબ્જેક્ટ્સ રિટર્ન કરે છે
  // બહુવિધ એલિમેન્ટ્સમાંથી ડેટા એક્સ્ટ્રેક્ટ કરવા માટે યોગ્ય
});

પ્રકરણ 5: અનંત સ્ક્રોલ ગેલરી

આપણા ડાયનેમિક કન્ટેન્ટ જ્ઞાન પર આધાર રાખીને, આપણે વધુ જટિલ દૃશ્યનો સામનો કરીએ છીએ - અનંત સ્ક્રોલ સાથેની ફોટો ગેલરી. આ રજૂ કરે છે:

• લેઝી-લોડેડ કન્ટેન્ટનું હેન્ડલિંગ
• સ્ક્રોલ ઇવેન્ટ્સને શોધવા અને ટ્રિગર કરવા
• એસિંક લોડિંગ સ્ટેટ્સનું મેનેજમેન્ટ
• જટિલ UI પેટર્નમાંથી ડેટા એક્સ્ટ્રેક્ટ કરવું

અહીં પડકાર એ છે કે કન્ટેન્ટ યુઝર સ્ક્રોલ કરે તેમ ક્રમિક રીતે લોડ થાય છે:

<div class="photo-gallery">
  <div class="photo-card">
    <img src="..." alt="ફોટો શીર્ષક" />
    <h2>ફોટો શીર્ષક</h2>
    <p>ફોટોગ્રાફર નામ દ્વારા</p>
    <div class="flex">
      <span>❤️ 42</span>
    </div>
  </div>
  <!-- સ્ક્રોલ પર વધુ ફોટા લોડ થાય છે -->
</div>

અનંત સ્ક્રોલ હેન્ડલ કરવા માટેના મુખ્ય ખ્યાલો:

// નવું કન્ટેન્ટ લોડ થતું નથી ત્યાં સુધી નીચે સ્ક્રોલ કરો
let previousHeight;
while (true) {
  previousHeight = await page.evaluate('document.body.scrollHeight');
  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  await page.waitForTimeout(1500); // કન્ટેન્ટની રાહ જોવી

  const newHeight = await page.evaluate('document.body.scrollHeight');
  if (newHeight === previousHeight) {
    break; // લોડ કરવા માટે વધુ કન્ટેન્ટ નથી
  }
}

મહત્વપૂર્ણ વિચારણાઓ

JavaScript-રેન્ડર્ડ કન્ટેન્ટ સાથે કામ કરતી વખતે:

1. પરફોર્મન્સ: ડાયનેમિક કન્ટેન્ટ સ્ક્રેપિંગ સ્ટેટિક HTML કરતાં ધીમું છે
2. રિસોર્સ મેનેજમેન્ટ: બ્રાઉઝર ઓટોમેશન વધુ સિસ્ટમ રિસોર્સ વાપરે છે
3. સ્થિરતા: લોડિંગ સ્ટેટ્સ અને નેટવર્ક કન્ડીશન્સ હેન્ડલ કરવાની જરૂર
4. રેટ લિમિટિંગ: ક્રિયાઓ વચ્ચે વિલંબ અમલમાં મૂકવાનું વિચારો

બેસ્ટ પ્રેક્ટિસિસ

1. યોગ્ય વેઇટ સ્ટ્રેટેજીનો ઉપયોગ કરો:

// ચોક્કસ એલિમેન્ટ્સની રાહ જોવી
await page.waitForSelector('.selector');

// નેટવર્ક આઇડલની રાહ જોવી
await page.waitForLoadState('networkidle');

// કસ્ટમ વેઇટ કન્ડીશન્સ
await page.waitForFunction(() => {
  // કસ્ટમ JavaScript કન્ડીશન
});

2. મજબૂત એરર હેન્ડલિંગ અમલમાં મૂકો:

try {
  await page.goto(url);
  // ... સ્ક્રેપિંગ લોજિક
} catch (error) {
  console.error('સ્ક્રેપિંગ નિષ્ફળ:', error);
} finally {
  await browser.close(); // હંમેશા સફાઇ કરો
}

3. વિશ્વસનીયતા માટે રિટ્રાઇ મેકેનિઝમ અમલમાં મૂકવાનું વિચારો
4. મોટા ડેટાસેટ્સ સાથે કામ કરતી વખતે મેમરી ઉપયોગ પર દેખરેખ રાખો
5. સુસંગતતા માટે એક્સ્ટ્રેક્ટેડ ડેટાને વેલિડેટ કરો

તમારા સોલ્યુશનનું પરીક્ષણ

ટેસ્ટ વાતાવરણ વાસ્તવિક દુનિયાની પરિસ્થિતિઓનું અનુકરણ કરતા મોક APIs પ્રદાન કરે છે:

• વેરિયેબલ લોડિંગ ટાઇમ્સ
• નેટવર્ક લેટન્સી
• પેજિનેશન મેકેનિક્સ
• એરર સ્ટેટ્સ

આ વિવિધતાઓ અજમાવો:

1. સ્ક્રોલ ટાઇમિંગ બદલો
2. વિવિધ સ્ક્રીન સાઇઝ હેન્ડલ કરો
3. ધીમા નેટવર્ક કન્ડીશન્સ સાથે ટેસ્ટ કરો
4. ડેટાની અખંડતાને વેલિડેટ કરો

ડાયનેમિક કન્ટેન્ટ હેન્ડલ કરવા માટે તૈયાર છો? ચેલેન્જ કોડ અને ટેસ્ટ વાતાવરણ રિપોઝિટરીમાં છે.

રેફરન્સ અમલીકરણ માટે _solved/chapter4/ અને _solved/chapter5/ માં હલ કરેલા ઉદાહરણો જુઓ. યાદ રાખો - આધુનિક વેબ સ્ક્રેપિંગ HTML માળખું અને એપ્લિકેશન વર્તન બંનેને સમજવા વિશે છે.

ખુશ સ્ક્રેપિંગ!