NextJS 프레임워크에서 콘텐츠 검증

이전 강의들에서 우리는 두 가지 유형의 컴포넌트 - 서버 컴포넌트와 클라이언트 컴포넌트를 만들어 보았습니다. 서버 컴포넌트에서 SEO 문제가 해결되었는지 확인해 봅시다. 즉, 우리 컴포넌트의 텍스트가 포함된 마크업이 브라우저에 도착하는지 확인해야 합니다. 이를 확인해 보겠습니다.

우리의 서버 컴포넌트가 다음과 같은 형태를 가진다고 가정해 봅시다:

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

브라우저에서 이 컴포넌트가 있는 페이지를 여세요. 그런 다음 Ctrl + U를 누르세요. 이 키 조합은 페이지의 원본 HTML 코드를 엽니다. 이는 서버에서 오는 코드입니다. 즉, 브라우저 자바스크립트가 적용되기 전의 코드입니다. 검색 엔진이 우리 페이지를 보는 방식이 바로 이렇습니다. 자, 원본 코드를 열고 살펴보세요. 거기에서 우리 컴포넌트의 텍스트를 찾을 수 있을 것입니다.

예를 들어 이제 클라이언트 컴포넌트를 만들어 봅시다:

'use client';

import { useState } from 'react';

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

다시 Ctrl + U를 누르고 원본 코드를 살펴보세요. 우리 컴포넌트의 텍스트를 찾을 수 없을 것입니다. 왜냐하면 그 텍스트는 브라우저에서 동적으로 생성되기 때문입니다.

이것이 서버 컴포넌트와 클라이언트 컴포넌트의 주요 차이점이 나타나는 부분입니다.

강의에서 설명한 작업을 수행해 보세요.

SEO 관점에서 서버 컴포넌트와 클라이언트 컴포넌트의 차이점은 무엇인지 설명하세요.

SEO 외에도 클라이언트와 서버 컴포넌트는 어떤 다른 차이점이 있나요?