230919 - Next Component, Cache

오늘 내가 배운 것

1. Component

2. 사용 예시

3. Cache

 

출처 : 생활코딩 Next 13강의

출처 : 생활코딩 Next 13 강의

 

1. Component

Client Component

react를 사용하면서 여태까지 구현해왔던 방식이다. 주로 브라우저에서 실행된다.
useState, useEffect, onClick, onChange, useRouter, useParams... 과 같이 클라이언트 단에서 조작할 수 있는 것을 의미한다.

사용자와 상호 작용을 할 수 있는 컴포넌트이다.

Server Component

서버단에서 조작을 위해서 사용하는 방식이다.
secure data나 cookie, header에 접근할 수 있다.
Server Component 에서는 Client Component를 이용하게 되면 에러를 발생할 수 있다.

사용자에게 단순히 화면을 보여주는 역할을 하는 컴포넌트이다.

Next.js 컴포넌트

next.js에서는 기본적으로 서버 컴포넌트로 간주하기 때문에 클라이언트 컴포넌트를 이용하기 위해서 특정한 조치가 있어야한다.

'use client'를 이용하면 클라이언트 컴포넌트가 된다.

 

 

 

2. 사용 예시

"use client"
import Link from "next/link"
import "./globals.css"
import { useEffect, useState } from "react"

export default function RootLayout({ children }) {
    const [topics, setTopics] = useState([])
    useEffect(() => {
        fetch("http://localhost:9999/topics")
            .then((res) => res.json())
            .then((res) => setTopics(res))
    }, [])
    return // <>렌더 내용</>
}

해당 코드는 클라이언트 컴포넌트로 JS가 실행되지 않으면 상태를 가져올 수 없다. 이런 것을 해결하기 위해서 클라이언트 컴포넌트를 서버 컴포넌트로 바꾸어 사용한다.

• 'use client' 를 없앤다.
• 상태 관련 클라이언트 메서드(useState, useEffect..)를 지운다.
• async-await를 이용하여 비동기를 동기적으로 사용한다.

import Link from "next/link"
import "./globals.css"

export default async function RootLayout({ children }) {
    const resp = await fetch("http://localhost:9999/topics")
    const topics = await resp.json()
    return // <>렌더 내용</>
}

이렇게하면 서버에서 최종적인 정적의 데이터만 사용자에게 넘겨서 화면을 그려준다. ( JS 내용은 제외된다.)

정적 데이터, 파일으로 화면을 그리게 되면 장점이 생긴다.

• 사용자에게 JS를 전송하지 않기 때문에 용량이 적어진다.
• 접근하는 서버가 같은 서버라면 빠르게 처리하여 보여줄 수 있다.
• 서버에서 렌더링이 끝난 후 데이터를 보내기 때문에 JS가 실행되지 않더라도 화면을 그리는데 문제가 없다.

 

 

3. Cache

Next.js에서는 기본적으로 요청과 응답에 의해서 얻은 데이터를 보관하는 캐시의 기능을 가지고 있다.

캐시 기능은 기존에 요청해서 얻은 데이터를 저장시켜두고 다시 로드가 되었을 때, 저장되어 있는 데이터를 가져오는 것을 말한다. 이를 이용하여 성능을 좋게 만들 수 있지만 상황에 따라서 새롭게 업데이트 된 내용을 불러와서 보여야 하는 경우에는 옳지 않은 방법일 수 있다.

그렇기 때문에 여러 방법을 이용해서 이 기능을 끄거나 주기를 짧게 하여 데이터를 계속 최신화 하는 방법이 있다.

주기적으로 업데이트 하기

fetch("https://...", { next: { revalidate: 10 } })

이 방법은 뒤에 있는 숫자(10초)주기로 데이터를 업데이트하는 방식이다.
지정된 숫자를 이용해서 했을 때, 그 주기에 맞춰지기 전까지는 직전 데이터를 이용한다. ( 10초의 경우 10초가 되기 전에 데이터가 바뀌어도 기존의 데이터를 사용함)
그래서 0을 넣어 매번 업데이트를 할 수 있다.

cache 기능을 비활성화 하기

fetch("https://...", { cache: "no-store" })

이 방법을 이용해서 캐싱자체를 안하는 방법을 구현 할 수 있다.

 

---