NextJs (2) CSR vs SSR(+hydrate, use client)

📚 NestJs에서 렌더링?

💡 NestJs가 애플리케이션을 렌더링하는 방식

렌더(render) 란? : nextjs가 우리의 react component를 가져와서 브라우저가 이해할 수 있는 html로 변환하는 과정을 의미함

📚 CSR

💡 평범한 react가 렌더되는 방식은 Client Side Rendering : 즉 브라우저가 직접 렌더링을 하는 과정,

평범한 react만으로 애플리케이션을 생성하면 그것은 Client Side Application이 됨.

CSR 특징

• 유저가 페이지에 도착한 시점에 페이지는 빈 화면임. 그 이후 브라우저가 모든 JS파일을 다운로드하고 난 후에야 UI가 그려지기 시작함. (즉 CSR에서 UI는 브라우저의 JS엔진에 의해 그려지게 된다.)
• 그래서 새로고침등 페이지를 다시 그리는 경우가 생기면, UI가 삭제되 일시적으로 화면에 내용이 삭제 됨.
• SEO (검색엔진최적화)를 활용하기 위해서는 google에게 빈 페이지를 보여주지 않는 것이 좋지만 (Google은 페이지의 HTML을 보기때문) 검색 엔진이 보게 되는 웹사이트는 비어있게 됨.

📚 SSR

💡 Nestjs에서 기본적으로 페이지를 렌더하는 방식은 Server Side Rendering : 페이지의 소스코드를 보게 되면 리액트와는 다르게 페이지의 내용들이 모두 실제로 브라우저 코드에 있음. 그러므로 브라우저는 HTML을 화면에 그리기 위해 JS가 로드될 때까지 기다릴 필요가 없게 됨.

NestJs에서 모든 컴포넌트들은 우선적으로 Server Side Rendering 되게 됨.

SSR 특징

• UI를 빌드하는데 React를 쓸 필요가 없음. 모든 컴포넌트와 페이지들은 우선 백엔드에서 미리 렌더되어짐.
• 이렇게 되면 사용자들이 페이지에 접근해서 바로 UI를 볼 수 있다라는 장점이 있음.

💡 Hydration : Hydrate는 백엔드에서 렌더링된 단순 HTML과 번들링된 JS를 클라이언트로 보낸 뒤, 클라이언트측에서 단순 HTML을 리액트 애플리케이션으로 초기화하는 과정을 의미.

Link 컴포넌트 예시:
1. Link컴포넌트를 백엔드에서는 단순한 anchor태그로 변환해 놓기에, 백엔드에 렌더링 된 순간엔 html에 anchor태그로 UI를 그리게 됨.
2. 이후, 유저가 페이지에 도달한 이후에는 리액트, 컴포넌트가 로드되며 우리 애플리케이션은 React App이 됨.
3. 애플리키이션은 interactive해지고 그로 인해 Link 컴포넌트를 통해 새로고침 없이 페이지를 이동할 수 있는 Client Side Navigation을 할 수 있게 됨.

🗣️ 그러나 Hydration 은 모든 컴포넌트에 발생하지 않음.

모든 컴포넌트들은 server side에서 먼저 렌더되지만 그 중 client에서 interactive하게 만들어질 컴포넌트들은 오직 use client 지시어를 맨 위에 갖고 있는 컴포넌트 들 뿐임.

• use client : use client는 백엔드에서 렌더되고 프론트엔드에서 Hydrate됨을 의미 오직 client에서만 렌더된다는 것을 의미하는 것이 아님.
• 프레임워크에게 어떤 컴포넌트가 interactive해지고 어떤 컴포넌트는 단순한 html임을 미리 알려주면 이는 사용자가 다운로드받을 javascript 양이 적어짐을 의미함.

• client component : use client 키워드를 최상부에 선언한 컴포넌트들
• server component에서 client component를 호출하는 것은 가능함, client component에서 server component를 호출하는 것은 불가능함.
• client component에서 호출되는 컴포넌트들은 client component가 됨. (2024.2월 기준)

✅ 정리

• 1. 모든 것은 우선적으로 서버 사이드에서 pre render 되어 html 로 변환됨.
• 2. 그 후에 오직 client components 만이 Hydrate 되어 interactive하게 됨.

📚 'Use Client' 트러블 슈팅 (2024년 2월 16일)

• 서버 컴포넌트에서 Use Client를 사용했는데, 에러가 발생했다.

// components/movie-video.tsx
"use client";

import styles from "../styles/movie-videos.module.css";
import { API_URL } from "../app/(home)/page";

async function getVideos(id: string) {
	const response = await fetch(${API_URL}/${id}/videos);
	return response.json();
}

export default async function MovieVideos({ id }: { id: string }) {
	const videos = await getVideos(id);

	return (
		<div className={styles.container}>
		{videos.map((video) => (
			<iframe
				key={video.id}
				src={https://youtube.com/embed/${video.key}}
				title={video.name}
				/>
		))}
		</div>
	);
}

에러 : Error: × You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive.

(에러 메세지 전문)	Error: × You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/ │ docs/getting-started/react-essentials#the-use-client-directive │ │ ╭─[/Users/chaeyeongmin/Desktop/JavaScript/Next.js/nextjs14/app/(home)/page.tsx:2:1] 2 │ import Movie from "../../components/movie"; 3 │ import styles from "../../styles/home.module.css"; 4 │ 5 │ export const metadata: Metadata = { · ──────── 6 │ title: "Home", 7 │ }; ╰──── Import trace for requested module: ./app/(home)/page.tsx ./components/movie-videos.tsx    

• 위 메세지에 따르면 다음 파일에서 에러가 발생했다고 한다.

import { Metadata } from "next";
import Movie from "../../components/movie";
import styles from "../../styles/home.module.css";

export const metadata: Metadata = {
  title: "Home",
};

export const API_URL = "https://nomad-movies.nomadcoders.workers.dev/movies";

async function getMovies() {
  const response = await fetch(API_URL);
  const json = await response.json();
  return json;
}

export default async function HomePage() {
  const movies = await getMovies();
  return (
    <div className={styles.container}>
      {movies.map((movie) => (
        <Movie
          key={movie.id}
          id={movie.id}
          poster_path={movie.poster_path}
          title={movie.title}
        />
      ))}
    </div>
  );
}

• 🗣️ 에러 메시지를 읽어보니, 지속적으로 metadata를 export하는 행위를 지적하고 있어서 나는 metadata를 사용하는 것이 잘못된 줄 알았다. 그러나 위의 두 파일에서 metadata는 전혀 연관이 없었고, 결국 문제의 원인은 'use client' 지시어의 특성에 있었다. 'use client' 지시어가 붙은 컴포넌트에서는 어떠한 변수도 export할 수 없는 것이 원칙이기 때문에, 이를 위반했던 것이 문제였다. 이러한 원리를 이해하고 나니, API_URL을 각각의 컴포넌트에서 따로 선언함으로써 문제를 해결할 수 있었다.

• 💡 오류 해결

• 다음과 같이 import로 참조해오던 API_URL을 해당 파일안에서 불러주었다.

"use client";

import styles from "../styles/movie-videos.module.css";

async function getVideos(id: string) {
  const API_URL = "https://nomad-movies.nomadcoders.workers.dev/movies";
  const response = await fetch(`${API_URL}/${id}/videos`);
  return response.json();
}

export default async function MovieVideos({ id }: { id: string }) {
  const videos = await getVideos(id);

  return (
    <div className={styles.container}>
      {videos.map((video) => (
        <iframe
          key={video.id}
          src={`https://youtube.com/embed/${video.key}`}
          title={video.name}
</iframe>
      ))}
    </div>
  );
}