csr, ssr (next js)

1. "use client"

언제 쓰나요?

1. 컴포넌트 내에서 hook을 사용할 때!
2. window, document 등 브라우저 환경에서만 존재하는 변수에 접근할 때!

2. 서버 사이드 렌더링

컴포넌트 앞에 async가 붙는다.

• CSR을 SSR/SSG로 바꾸면 좋은 점!
  검색 엔진 등에서 서비스에 대한 정보를 보다 풍부하게 긁어갈 수 있음. 그 결과 우리 서비스가 검색 엔진에서 보다 좋은 순위로 노출될 가능성이 높아짐. 이를 검색엔진최적화(SEO)라고 하고 프론트엔드 개발에서는 특히나 신경써야함!

import Link from "next/link";

async function getPosts() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await response.json();

  return data;
}

async function PostsListPage() {
  const posts = await getPosts();

  return (
    <div>
      <h1>포스트 목록</h1>

      <nav>
        <ul>
          {posts.map((post) => (
            <li key={post.id}>
              <Link href={`/posts/${post.id}`}>{post.title}</Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
}

export default PostsListPage;

3. SSG : Static Site Generation

정적 사이트 미리 생성하는 것을 의미한다.
예를 들어 어떤 url로 요쳥을 하는 결과가 천년만년 안바뀌는 데이터일 때
같은 데이터를 계속해서 불러오는 것이 아닌 한번 불러온 값을 저장하고 미리 그려놨다가 보내주어 불필요한 리소스를 줄일 수 있다.
빌드할 때 만들어진다.

npm run build

(https://velog.velcdn.com/images/leein9404/post/3ecf7544-a92a-498a-a4af-50ab3abb3ec6/image.png)
위에서 동글뱅이가 있는 곳을 확인해보면 static content로 미리 랜더되었다고 나온다.
![](https://velog.velcdn.com/images/- 잠깐~! CSR을 SSR/SSG로 바꾸면 무엇이 좋나요?

검색 엔진 등에서 우리 서비스에 대한 정보를 보다 풍부하게 긁어갈 수 있어요. 그 결과 우리 서비스가 검색 엔진에서 보다 좋은 순위로 노출될 가능성이 있죠. 이를 검색엔진최적화(SEO)라고 하고 프론트엔드 개발에서는 특히나 신경 써야 하는 부분이에요.leein9404/post/54e6cc4e-87b2-4f6c-adba-df97feca563b/image.png)

npm run start

위의 명령어를 통해서 빌드된 것을 실행할 수 있다!