Link 태그

• 기존 a 태그는 링크를 누르면 모든 리소스를 다시 fetch 한다.
  • CSS, JS, FONT 등
• Link 는 해당 페이지에 필요한 것만 다운로드 한다.
  • /users 면 이미 받은 css, js, font는 다시 로드하지 않음

app 폴더의 모든 컴포넌트는 기본적으로 server component 이다.

1. 서버 컴포넌트는 아래를 사용할 수 없다.

• 브라우저 이벤트 (click, …)
• 브라우저 API (로컬 스토리지, …)
• useState, useEffect, …

1. effect, state 없는 fetch를 사용할 수 있다.

import React from "react";

const NewUserPage = async () => {
  const res = await fetch("<https://jsonplaceholder.typicode.com/users>");

  return <div>NewUserPage</div>;
};

export default NewUserPage;

넥스트 장점 (vs 리액트)

SEO friendly

서버 컴포넌트에서 데이터를 받은 상태로 클라이언트에 보내준다. 리액트의 경우 빈 페이지를 먼저 요청하고, 그 다음 네트워크 요청을 하고, 다시 리스트를 보여준다

캐싱