क्लायंट-साइड रेन्डरिंग विरुद्ध सर्व्हर-साइड रेन्डरिंग

सुरुवातीला, वेब फ्रेमवर्कमध्ये सर्व्हरवर प्रस्तुत केलेली दृश्ये होती. आता हे क्लायंट वर घडत आहे. चला प्रत्येक पध्दतीचे फायदे आणि तोटे शोधू या.

कामगिरी

सर्व्हर-साइड रेन्डरिंगसह, जेव्हा जेव्हा आपल्याला नवीन वेब पृष्ठ पहायचे असेल तेव्हा आपल्याला बाहेर जावे लागेल आणि ते मिळवाः

आपण जेवताना प्रत्येक वेळी सुपर मार्केटमध्ये जाण्यासाठी हे एकसारखे आहे.

क्लायंट-साइड रेन्डरिंगसह, आपण एकदा सुपर मार्केटमध्ये जाता आणि महिन्याभरात जेवणाच्या खरेदीसाठी 45 मिनिटे चाला. त्यानंतर जेव्हा जेव्हा आपल्याला खायचे असेल तेव्हा आपण फक्त फ्रीज उघडा.

जेव्हा कार्यप्रदर्शनाची बाब येते तेव्हा प्रत्येक दृष्टीकोनचे त्याचे फायदे आणि तोटे असतात:

• क्लायंट-साइड रेन्डरिंगसह, प्रारंभिक पृष्ठ लोड कमी होणार आहे. कारण नेटवर्कवर संप्रेषण करणे धीमे आहे आणि वापरकर्त्यास सामग्री दर्शविणे सुरू करण्यापूर्वी सर्व्हरला दोन फे tri्या लागतात. तथापि, त्यानंतर, त्यानंतरचे प्रत्येक पृष्ठ लोड निर्लज्जपणे वेगवान होईल.
• सर्व्हर-साइड रेन्डरिंगसह, प्रारंभिक पृष्ठ लोड कमालीचा कमी होणार नाही. पण ते वेगवान होणार नाही. आणि आपल्या इतर कोणत्याही विनंत्या नाहीत.

अधिक विशिष्ट म्हणजे क्लायंट-साइड रेन्डरिंगसह, प्रारंभिक पृष्ठ यासारखे काहीतरी दिसेल:

  <हेड>
    <स्क्रिप्ट src = "ग्राहक-साइड-फ्रेमवर्क.js"> 
    <स्क्रिप्ट src = "app.js"> 
  
  
    
 
  

app.js मध्ये जावास्क्रिप्टमधील सर्व HTML पृष्ठे तारांप्रमाणे असतील. यासारखेच काहीसे:

var पृष्ठे = {
  '/': ' ... ',
  '/ foo': ' ... ',
  '/ बार': ' ... ',
};

नंतर जेव्हा पृष्ठ लोड केले जाईल, तेव्हा फ्रेमवर्क URL बारकडे पाहेल, पृष्ठांवर स्ट्रिंग मिळेल ['/'] आणि त्यास

मध्ये घाला. तसेच, जेव्हा आपण दुवे क्लिक करता तेव्हा फ्रेमवर्क इव्हेंटमध्ये व्यत्यय आणेल, कंटेनरमध्ये नवीन स्ट्रिंग (म्हणा, पृष्ठे ['/ foo']) घाला आणि ब्राउझरला HTTP विनंती बंद करण्यापासून प्रतिबंधित करेल.

एसईओ

समजा आमचे वेब क्रॉलर reddit.com वर विनंती करण्यास सुरवात करीत नाही:

var विनंती = आवश्यक ('विनंती');
विनंती.get ('reddit.com', कार्य (त्रुटी, प्रतिसाद, मुख्य भाग) {
  // शरीर हे असे दिसते:
  // 
  //  ... 
  // 
  //  ESPN 
  //  हॅकर न्यूज 
  // ... अन्य  टॅग ...
});

क्रॉलर नंतर नवीन विनंत्या व्युत्पन्न करण्यासाठी प्रतिसाद देहामधील सामग्री वापरते:

var विनंती = आवश्यक ('विनंती');
विनंती.get ('reddit.com', कार्य (त्रुटी, प्रतिसाद, मुख्य भाग) {
  // शरीर हे असे दिसते:
  // 
  //  ... 
  // 
  //  ESPN 
  //  हॅकर न्यूज 
  // ... अन्य  टॅग ...

  विनंती.get ('espn.com', फंक्शन () {...});
  विनंती.get ('news.ycombinator.com', फंक्शन () {...});
});

त्यानंतर, रेंगाळत राहण्यासाठी espn.com आणि news.ycombinator.com वरील दुवे वापरून क्रॉलर प्रक्रिया सुरू ठेवते.

ते करण्यासाठी येथे काही रिकर्सीव्ह कोड आहेः

var विनंती = आवश्यक ('विनंती');

फंक्शन क्रॉलयूआरएल (यूआरएल) {
  विनंती.get (url, कार्य (त्रुटी, प्रतिसाद, मुख्य भाग) {
    var linkUrls = getLinkUrls (मुख्य भाग);

    linkUrls.forEach (फंक्शन (linkUrl) {
      क्रॉलयूआरएल (लिंक यूआरएल);
    });
  });
}

क्रॉल्रल ('reddit.com');

जर प्रतिसाद मंडळाने असे दिसत असेल तर काय होईलः

  <हेड>
    <स्क्रिप्ट src = "ग्राहक-साइड-फ्रेमवर्क.js"> 
    <स्क्रिप्ट src = "app.js"> 
  
  
    
 
  

बरं, अनुसरण करण्यासाठी कोणतेही टॅग नाहीत. तसेच, हे वेबपृष्ठ खूपच निराळे दिसत आहे, म्हणून जेव्हा आम्ही शोध परिणाम दर्शवितो तेव्हा आम्हाला कदाचित त्यास प्राधान्य द्यायचे नसते.

क्रॉलरला थोडेसे माहिती नाही, क्लायंट साइड फ्रेमवर्क अद्भुत सामग्रीसह

भरत आहे.

म्हणूनच क्लायंट-साइड रेन्डरिंग एसईओसाठी खराब असू शकते.

प्रीरेन्डरिंग

२०० In मध्ये, गुगलने याभोवती येण्याचा एक मार्ग सादर केला.

जेव्हा क्रॉलर www.example.com/page?query#!mystate वर येतो तेव्हा ते त्यास www.example.com/page?query&_escaped_fraament_=mystate मध्ये रूपांतरित करते. या मार्गाने, जेव्हा आपल्या सर्व्हरला _escaped_fraament_ सह विनंती प्राप्त होते, तेव्हा हे माहित आहे की ही विनंती मानव नव्हे तर क्रॉलरकडून येत आहे.

लक्षात ठेवा - सर्व्हरला क्रॉलरने

... (<< श्रेणी << वर्ग = "कंटेनर"> नाही) पाहू इच्छित आहे. मग त्यानंतर:

• विनंती क्रॉलरकडून आल्यावर आम्ही
  ... देऊ शकतो.
• जेव्हा विनंती नियमित मनुष्याकडून येते, आम्ही फक्त
  देऊ शकतो आणि जावास्क्रिप्टला सामग्री आत घालू देतो.

तरीही एक समस्या आहेः

मध्ये काय जात आहे हे सर्व्हरला माहित नाही. आत काय आहे ते शोधण्यासाठी, हे जावास्क्रिप्ट चालवावे लागेल, एक डीओएम तयार करावे लागेल आणि त्या डीओएममध्ये फेरफार करावी लागेल. पारंपारिक वेब सर्व्हरना ते कसे करावे हे माहित नसल्यामुळे ते हेडलेस ब्राउझर म्हणून ओळखल्या जाणार्‍या सेवेला नोकरी करतात.

हुशार क्रॉलर

सहा वर्षांनंतर, गूगलने जाहीर केले की त्याचे क्रॉलर बडबड आहे! जेव्हा क्रॉलर 2.0,