서버 사이드 렌더링(SSR)을 지원하는 프레임워크

Nuxt.js

• definePageMeta
  • 페이지 구성 요소에 대한 메타데이터 정의

Next.js

• https://nextjs.org/
• https://m.post.naver.com/viewer/postView.naver?volumeNo=35308716&memberNo=25379965&searchKeyword=options&searchRank=89
• https://subtlething.tistory.com/115
• Server Component에서는 함수 props를 받거나 쓰지 않는 순수 컴포넌트만 사용 가능
• MUI 라이브러리는 컴포넌트의 안쪽은 클라이언트에서만 동작, 서버에서는 그냥 HTML 구조만 미리 렌더링하는 형태

예시

• "MUI components are meant to be used in Client Components when using App Router."
• https://mui.com/material-ui/integrations/nextjs/

use client

• 특정 컴포넌트나 페이지가 클라이언트 사이드에서만 렌더링되어야 함을 명시하는 용도로 사용됨
• 지시문을 사용한 컴포넌트는 서버 사이드에서 전혀 렌더링되지 않음

Server Component 안에서 Client Component 렌더링하는 법

디렉토리 구조

• app/
  • Next.js 14 권장, pages/ 도 지원은 함, 강제 아님
• pages/

Gatsby

• 정적 사이트 생성

Bazzle