NextJS) Pages, Static Pre Rendering, Router, _app

Pages

일종의 라우터를 쉽게 만들어놓은 것

파일명이 url임

컴포넌트 이름은 상관없음

파일명에 따라 작동한다.

 

예외

index 

일반적인 home인 페이지

 

특징

컴포넌트가 react는 기능을 하는데, import react 할 필요가 없다

 

Static Pre Rendering

 

클라이언트 사이드 렌더링 - 클라이언트에서 자바스크립트 실행해서 화면에서  html을 만들면서 보여준다.

(CSR)

->  하나씩 점점 생겨남 (hydration - 프론트 안에서 실행)

, js 없이  아무것도 보여줄 수없다

 

서버사이드 렌더링 - 서버에서 자바스크립트 실행해서 실행된 html을 완성되면 보여준다.

(SSR)

-> 다 만들고 한꺼번에 생겨남

, js 없이 기본 html 화면을 보여준다. 그리고 js가 렌더링되면서 실행되는 것을 화면으로 업데이트함

 

Router

router

<Link>
    <a style={{color:router.pathname ==='/' ? 'red' : 'blue'}}>
	    test1
    </a>
</Link>

<Link>
    <a style={{color:router.pathname ==='/about' ? 'red' : 'blue'}}>
	    test2
    </a>
</Link>

이런식으로 함

Link 안에 a를 넣어주기

 

_app

페이지가 실행되기전에 실행되는 역할
global로 실행되게 함
따라서 어디든지 실행가능