Next.js 공부 정리 (1)

Next.js 공부 정리 (1)

 

Next.js 공부 정리 (1)

 

RSC
디플로이
Fetch 2가지	1
SWR와 리액트?

 

Fetch에서 캐싱이란 어떻게 작동하는가?

 

Fetch에서 캐싱이란 어떻게 작동하는가?

Fetch 캐싱 차이?
next.js는 기본적으로 서버사이드로 캐싱을 한다	클라이언트 측에서 API 응답이나 자산(예: JavaScript 및 CSS 파일)  캐싱과 같은 다른 형태의 캐싱을 활용하여 애플리케이션의 전반적인 성능을 더욱 최적화할 수도 있습니다.
리액트 기본적으로 서버사이드로 캐싱을 한다	자체는 서버 측 캐싱을 수행하지 않습니다.  웹 애플리케이션의 사용자 인터페이스 구성요소를 구축하기 위한 라이브러리입니다.

라우터 사용 2가지 방법

라우터

라우터 1번	useRouter 후크: useRouter 후크는 next/router 모듈의 일부이며 이를 통해 구성 요소 내의 라우터 개체와 해당 속성에 액세스할 수 있습니다. 다음과 같이 가져와서 사용할 수 있습니다. jsx Copy code import { useRouter } from 'next/router'; function MyComponent() {   const router = useRouter();   // Access router properties like pathname, query, asPath, etc.   console.log(router.pathname);   return <div>...</div>; } useRouter 후크를 사용하면 프로그래밍 방식으로 다른 페이지로 이동하고 현재 경로에 대한 정보에 액세스할 수 있습니다.
라우터 2번	링크 구성요소: 'Link' 구성 요소는 Next.js 애플리케이션의 페이지 간 선언적 클라이언트 측 탐색에 사용됩니다. 'next/link' 모듈에서 가져오며 일반적으로 애플리케이션의 JSX 코드 내에서 사용됩니다. 사용 방법의 예는 다음과 같습니다. jsx Copy code import Link from 'next/link'; function Navigation() {   return (     <nav>       <Link href="/">Home</Link>       <Link href="/about">About</Link>     </nav>   ); } Link 구성 요소는 지정된 href를 사용하여 앵커(<a>) 태그를 생성하고 링크를 클릭할 때 클라이언트측 탐색을 처리합니다. 페이지 다시 로드를 줄여 사용자 경험을 개선하는 데 도움이 됩니다.

 

 

 

SSG 는 무엇인가?

 

정적 사이트 생성(SSG)

Next.js는 빌드 시 전체 페이지를 사전 렌더링할 수 있는 SSG도 지원합니다.  이는 콘텐츠가 자주 변경되지 않는 콘텐츠가 풍부한 사이트, 블로그 또는 전자상거래 사이트에 특히 유용합니다.  SSG는 HTML 파일을 미리 생성해 주기 때문에 더욱 뛰어난 SEO 성능을 제공할 수 있습니다.

 

 

(Fetch next.js , 리액트 )는 기본적으로  서버사이드로 캐싱 차이는 무엇인가?

 

Fetch

next.js 캐싱

클라이언트 측에서 API 응답이나 자산(예: JavaScript 및 CSS 파일)  캐싱과 같은 다른 형태의 캐싱을 활용하여 애플리케이션의 전반적인 성능을 더욱 최적화할 수도 있습니다.

리액트 캐싱

자체는 서버 측 캐싱을 수행하지 않습니다.  웹 애플리케이션의 사용자 인터페이스 구성요소를 구축하기 위한 라이브러리입니다.

독립적구조	// React Server Component (server.js) import { createServerComponent } from 'react-server-components'; function Header() {   return <header>Header</header>; } function MainContent() {   return <main>Main Content</main>; } function Footer() {   return <footer>Footer</footer>; } export const ServerHeader = createServerComponent(Header); export const ServerMainContent = createServerComponent(MainContent); export const ServerFooter = createServerComponent(Footer); //이 개념적 예에서는 UI의 개별 부분(머리글, MainContent 및 바닥글)에 대한  React Server 구성 요소를 만들었습니다. 이러한 구성 요소는 서버에서 독립적으로 렌더링되고 제공될 수 있습니다.
하이드레이션	next.js를 사용하므로써 하이드레이션을 쓸수있다.
페이로드	React 서버 구성 요소(RSC) - 페이로드 예: React Server 구성 요소에서 페이로드는 미리 렌더링된 콘텐츠와 데이터를 서버에서 클라이언트로 전송하기 위한 메커니즘입니다. 다음은 간단한 예입니다. // React Server Component on the server import { createServerComponent } from 'react-server-components'; function MyServerComponent() {   const data = fetchDataFromServer(); // Simulated server-side data fetching   return (     <div>       <h1>Server Component</h1>       <p>Data from server: {data}</p>     </div>   ); } export default createServerComponent(MyServerComponent); MyServerComponent는 React 서버 구성요소입니다. 구성 요소는 서버에서 데이터를 가져옵니다(여기에서 시뮬레이션). 이 구성 요소가 서버에서 렌더링되면 가져온 데이터를 포함하여 HTML이 생성됩니다. 이 HTML과 데이터는 페이로드의 일부로 클라이언트에 전송됩니다.
랜더링
스트리밍
사용법	RSC는  서버사이드가 필요하다
	리액트 18버전이 필요하다

 

 

 

SSR 이란?

서버측 렌더링(SSR)	React 구성 요소 중 일부 또는 전부가 서버에서 렌더링되어 사전 렌더링된 HTML로 클라이언트에 전송된다는 것을 의미합니다.
Next.js의 차이점	Next.js를 사용하면 렌더링 프로세스 중에 서버측 코드와 로직을 실행할 수 있습니다.  여기에는 데이터 가져오기, 서버측 라우팅 및 기타 서버별 작업 처리가 포함될 수 있습니다.