[Next.js] Next는 애플리케이션을 어떻게 렌더링 할까?

Root Page

• app/page.tsx 에 적힌 페이지로 /에 해당하게 됨
• 만약 about-us 페이지를 만들고 싶다면?
  • app/ 폴더 내에 about-us 폴더를 만들고 안에 UI를 제공 (page.tsx)
    • 반드시 해당 디렉토리 안에 꼭 생성 필요
    • page를 만들지 않으면 경로가 노출되지 않음
    • 직접적인 page.tsx파일이 없는 폴더는 실제 페이지 없이 경로의 일부분이 될 뿐
    • 참고로 page파일을 만드지 않는 이상 실제 경로에 포함되지도 랜더링 되지도 않기 때문에
    • 다른 파일을 만들어도 된다 (컴포넌트 같은것 만들어서 써도 되는것

not-found.tsx

• app폴더에 작성하는 404 페이지에 띄워줄 페이지
• not-found.tsx 파일에 내용을 작성하면 경로가 없을때 이 페이지를 띄워줌

app/not-found.tsx

export default NotFound(){
	// not found page ui
	
}

Navigation bar

export default function Navigate() {
const path = usePathname(); # client에서만 동작

retrun (
<nav>
<ul><li><Link href="/">Home</Link>
# path 이름을 이용해 현재 경로를 표시할수도 있다.
{path==="/" ? "★" : ""}

<li><li><Link href="/about-us">About</Link><li></ul> // Next에선 페이지간 이동시 Link를 사용해야 함
</nav>
)
}

SSR과 CSR

• CSR(Client Side Rendering) 방식은 브라우저가 JS파일을 모두 다운로드 후 랜더링 하는 방식이라 깜빡임이 생겨 사용자 경험에 별로 좋지 않다
  • 특히 자바스크립트를 비활성화 시켜놨다면?
    • 페이지를 띄울수 조차 없어짐
  • javascript가 다운되기전엔 html 내용이 아무것도 없다는 뜻
    • 검색엔진이 사이트 내용을 분석하기 어렵다는 뜻이기도 함
    • CSR은 모든 랜더링이 클라이언트 측에서 일어나게 됨
  • Next.js에선 기본이 SSR(Server Side Rendering), 모든 페이지의 내용들이 브라우저 코드에 존재함
    • 이미 화면에 표시할 HTML을 갖고 있기 때문
  • Next 학습시 반드시 기억해야 할 것!
    • next.js application의 모든 page안의 컴포넌트들은 next.js가 그것들을 우선 server side에서 render한다는것
    • 즉, /about-us에 접속한다면 사용자에게 어떠한 html을 보여주기 전 backend에서 application을 render한 후 만들어진 html을 가지고 브라우저의 request에 대한 response로 제공
    • 위 과정은 client components이든, server components이든 모든 상황에 대해 일어남
  • use client 한다 하더라도 기본적으로 SSR이 된다! 달라지는건 없다.
    • 오해하면 안됨!

Hydration

• client component와 server component의 차이

  • a 태그를 이용해 페이지를 이동할때 javascript를 활성화 하지 않고 옮기면 계속 해서 새로고침이 생김

  • javascript를 활성화 하면?

    • 훨씬 빨라지기도 하고 새로고침도 되지 않음
    • hydrated가 되었기 때문
      • 페이지 전체를 reload하지 않고 빠르게 navigate됨
      • Link 컴포넌트가 처리를 하게 됨 이후 프레임워크는 즉시 load를 함
      • React가 로드되고 components가 로드되고 모든것이 초기화 됨
      • 즉 사용자가 페이지에 도착한 순간엔 Javascript도 프레임워크도 로드되지 않음
        • 하지만 빠르게 React application이 initialize 되며 React Component가 됨

  • hydrate 예시

    const [count, setCount] = useState(0) 이 있다고 쳐봅시다.
    
    <button onClick={()=>setCount(c => c+1)} 이라 할때
    
    초기값은 0이다.
    
    javascript를 비활성화 한 경우 숫자가 증가하지 않는다
    -> 버튼에 eventListener가 연결되지 않았기 때문
    -> 하지만 JavaScript가 로드되면? 버튼에 이벤트가 연결되며 Interactive해지게 됨.
    -> 즉, hydration은 단순 HTML을 React application으로 초기화하는 작업이다!
    

use client (backend에서 render되고 front에서 hydrate된다)

→ componet가 client에서 interactive해야 한다는 의미

→ 즉 hydrate 돼야 한다라는것을 의미

→ 초기 load에서 next.js는 이 컴포넌트를 랜더함

→ HTML을 사용자에게 주고 나서 eventListener들을 추가할 컴포넌트를 hydrate함

→ 위의 경우는 상위에 ‘use client’를 적은 경우에만 동작함

• use Client를 언제 쓰고 말지를 고민하지 않아도 됨,
  • 필요한부분에서 use Client를 작성하지 않으면 에러를 보게 될 것이기 때문

server client

• client componet를 사용하지 않는 모든 것들은 server component 가 됨
• sever component는 server에서 먼저 render되고 hydrate되지 않음
  • 사용자가 javascript를 더 적게 다운받아도 된다는 의미
  • 만약 컴포넌트를 interactive 하게 만들필요가 없다면? 사용자가 해당 component를 위한 코드를 다운로드 받을 필요가 없음으로 use client 할 필요 없음
  • 사용자는 use client를 가진 component의 javascript코드만 다운받게 되기 때문.
• 서버 컴포넌트를 사용하는건 정말 현명한 방법이다.
  • data fetching을 할 때 엄청난 결과를 가지고 오기 때문.