NextJS फ्रेमवर्क में सामग्री सत्यापन

पिछले पाठों में, हमने दो प्रकार के कंपोनेंट्स बनाने की कोशिश की - सर्वर और क्लाइंट कंपोनेंट्स। आइए सुनिश्चित करें कि सर्वर कंपोनेंट्स में SEO की समस्या हल हो गई है। यानी हमें यह जांचना चाहिए कि ब्राउज़र को हमारे कंपोनेंट के टेक्स्ट के साथ मार्कअप प्राप्त होता है। आइए इसे करते हैं।

मान लें कि हमारे सर्वर कंपोनेंट का निम्न रूप है:

src/app/test/page.jsxexport default function Test() {
  let name = 'user';
  return <h1>hello, {name}!</h1>;
}

ब्राउज़र में इस कंपोनेंट वाले पेज को खोलें। फिर Ctrl + U दबाएं। यह की कॉम्बिनेशन पेज का सोर्स HTML कोड खोलेगा। यह वह कोड है जो सर्वर से आता है। यानी ब्राउज़र JavaScript को लागू करने से पहले। सर्च इंजन हमारे पेज को इसी तरह देखते हैं। तो, सोर्स कोड खोलें और उसका अध्ययन करें। वहां आपको टेक्स्ट मिलेगा हमारे कंपोनेंट का।

आइए उदाहरण के लिए अब एक क्लाइंट कंपोनेंट बनाते हैं:

src/app/test/page.jsx'use client';

import { useState } from 'react';

export default function Test() {
  let [name, setName] = useState('user');
  return <h1>hello, {name}!</h1>;
}

फिर से Ctrl + U दबाएं और सोर्स कोड का अध्ययन करें। आपको हमारे कंपोनेंट का टेक्स्ट नहीं मिलेगा, क्योंकि इसका टेक्स्ट बनता है ब्राउज़र में डायनामिकली।

इसमें सर्वर और क्लाइंट कंपोनेंट्स के बीच मुख्य अंतर प्रकट होता है।