Έλεγχος περιεχομένου στο πλαίσιο NextJS

Στα προηγούμενα μαθήματα δοκιμάσαμε να δημιουργήσουμε δύο τύπους components - server και client. Ας βεβαιωθούμε ότι στα server components έχει επιλυθεί το πρόβλημα με το SEO. Δηλαδή πρέπει να ελέγξουμε ότι στο browser φτάνει το markup με το κείμενο του component μας. Ας το κάνουμε.

Ας υποθέσουμε ότι το server component μας έχει την ακόλουθη μορφή:

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

Ανοίξτε τη σελίδα με αυτό το component στο browser. Στη συνέχεια πατήστε Ctrl + U. Αυτός ο συνδυασμός πλήκτρων ανοίγει τον πηγαίο κώδικα HTML της σελίδας. Αυτός είναι ο κώδικας που φτάνει από τον server. Δηλαδή πριν από την εφαρμογή του browser JavaScript. Έτσι βλέπουν τη σελίδα μας τα συστήματα αναζήτησης. Λοιπόν, ανοίξτε τον πηγαίο κώδικα και μελετήστε τον. Εκεί θα βρείτε το κείμενο του component μας.

Για παράδειγμα, ας δημιουργήσουμε τώρα ένα client component:

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 και μελετήστε τον πηγαίο κώδικα. Δεν θα βρείτε το κείμενο του component μας, καθώς το κείμενό του σχηματίζεται δυναμικά στο browser.

Σε αυτό εκδηλώνεται η κύρια διαφορά μεταξύ server και client components.