Next.js 14버전 - Routing , Rendering, use client

✔️Routing

Next.js

• next.js는 직접 url을 적어줄 필요없이 파일 시스템을 통해 url이 표현된다.
• 직접적인 page.tsx(jsx)파일이 없는 폴더는 실제 페이지가 없다. 
• 사용자가 url로부터 보게 될 요소는 page.tsx다!! 

React

수동적이 방식이다.  이 url 은 저 컴포넌트, 이 url은 이 컴포넌트 : url은 직접 적어주는 방식 

/Home -> <Home />

/about-us -> <AboutUS />

/movies/:id -> <Movie />

: id값에 따라 동적으로 해당하는 Moive 컴포넌트를 렌더링 한다. 

 

 

usePathname : react hook으로 user가 머물고 있는 url을 알려준다. 

 

✔️Rendering

우리의 react component(javascript function)를 가져와서 브라우저가 이해할 수 있는 html로 변화하는 작업

Next.js

SSR(Sever side rendering) 

•  javascript가 활성화되지 않아도 사용자가 Html을 볼 수 있다. 
•  next.js application의 모든 page안의 모든 component들은 next.js가 그것들은 우선 server에서 rendering 한다. 
• 사용자에게 어떠한 html을 주기 전에 server,즉 backend에서 application을 rendering한다. 
• 최조 appliaction의 ui 빌드에서 javascript에 의존하지 않는다. 
• client component든 server component든 우선 server side rendering이 된다.  
• ui를 빌드하는데 react를 쓸 필요가 없다.

 

React

CSR(Client side rendering) : client가 javascript를 로드한 후 그 후에 javascript가 ui를 빌드한다. 

• app을 실행시키려면 꼭 Javascript를 활성화시켜야한다. 
• react는 사용자 브라우저인 client단에서 모든 rendering 작업을 수행한다. client가 브라우저에 ui를 구축하는 것이다.
• 유저가 페이지에 도착한 시점은 페이지가 빈 화면이다. 브라우저가 모든 javascript파일을 다운로드하고 실행한 후에야 화면이 보인다.
• 브라우저의 javascript 엔진에 의해 추가된 것이다. 이 시간이 유저에게는 깜빡이며 잠시 기다리는 시간이 추가되게 되는 것이다. 

SEO 측면 단점 

만약에 나의 웹사이트가 Google에 노출되기를 바란다면 Google에게 빈 페이지를 보여주지 않는 것이 좋다. Google은 페이지의 Html은 보기 때문이다. 

다른 검색엔진들은 페이지에서 javascript를 실행시키지 않는다. 따라서 검색엔진이 보는 내 웹사이트는 비어있게 된다. 

 

 

✔️Hydration 

Next.js가 rendering 후 일어나는 현상 , 단순 Html을 react appliaction으로 초기화하는 작업

• 브라우저에서 javascript을 실행시키지 않으면 next.js는 새로고침이 된다. 즉 javascript를 실행시키면 새로고침이 되지 않는다. -> 이 이유는 react가 hydrated된 것이다.

Next.js에서 user가 a태크를 click하면 발생하는 현상 

• 페이지에 도달하면 ui를 가지고 있는 server에서 생성한 boring HTML 반겨준다.(단순 anhor)->  그리고나서 프레임워크는 즉시 load를 시작한다. react로드, component로드 모든 것이 초기화 된다. -> 그 후에 application이 react app 되면 interactive해지고 navigation이 빨라지는 것을 볼 수 있다. 

: hard refresh없이 client side navigation을 할 수 있게 된 것이다. 

 

 

즉 dehydration인 상태 (= server에서 생성한 boring HTML)에서 hydration(react app 되면 interactive해지는 현상: 비로소 eventListener와 같은 기능을 사용할 수 있게된다.)이 되는 상태이다. 

 

✔️'use client' - (client component)

생활코딩 유튜브 참조

• server cide render는 모든 component에서 발생하고 먼저 rendering된다. 하지만 hydration과정은 모든 component에서 발생하지 않는다. client에서 hydrated 되는 component는 오직 use client 지시어를 맨 위에 갖고 있는 component뿐이다. 
• use client는 오직 client에서만 render된다는 것을 의미하지 않는다. backend에서 render되고 fronted에서 hydrate 및 interactive 됨을 의미한다.
• server component에서는 javascript를 다운받지 않아도 되기 때문에 사용자가 다운받을 javascript양이 적어진다, 사용자는 use client를 가진 components의 javascript코드만 다운받으면 된다.  -> 이것은 페이지의 로딩 속도가 빨라진다는 것을 의미한다.
• server component안에는 client component를 가질 수 있고 client component안에는 server component를 가질 수 없다.
• server component는 브라우저로 절대 가지 않기 때문에 보안에 신경쓰지 않아도 된다. api fetch()같은 코드를 편리하게 사용할 수 있다. 

 

 

참고 자료 

• https://nomadcoders.co/nextjs-for-beginners/lectures/4687