Next.js / 기본적인 파일 기반 라우팅(폴더 구조), CSR VS SSR, 메타데이터 정리

제미나이로 생성한 Next.js 이미지

 

 

Next.js는 파일 기반 라우팅(File-based Routing)을 사용한다.

app/ 디렉토리에 파일을 만드는 것만으로 자동으로 라우트(URL)이 생성된다.

 

app/

ㅏpage.tsx -> / (루트, 홈페이지 메인)

ㅏabout/

       ㅏ page.tsx -> /about

ㅏ blog/

       ㅏ page.tsx -> /blog

       ㅏ [id]/

             ㅏ page.tsx -> /blog/123 (동적 라우트)

 

- page.tsx : 파일이 실제 웹페이지가 된다.

 

- layout.tsx를 추가하면 하위 라우트에 공통 레이아웃이 적용 가능하다.

 

- not-found.tsx, 잘못된 경로를 입력하거나 페이지 에러가 발생하면 적용되는 페이지

 

- layout.tsx는 가장 밖 app 레이아웃부터 접속한 url의 레이아웃까지 겹쳐서 레이아웃이 보여지게 된다.

 

- (home), (movie) 이렇게 app 바로 밑에서 선언한다면 해당 폴더로 원하는 만큼 그룹핑을 할 수 있다.

  (루트페이지를 2개 이상 만들 수도 있고, 해당 폴더는 url 경로에 포함되지 않는다.)

 

Next.js -> 프레임 워크, React -> 라이브러리

 

- React 라이브러리는 개발자가 사용하는 즉 개발자 입맛대로 원하는 api나 기능 동작을 끌어당겨 자유롭게 

  개발 할수 있는 자바스크립트 라이브러리라고 한다면....

 

- Next.js는 너무 다양한 라이브러리, 복잡한 기능들을 사용한다면 규칙을 맞추기 어려우므로, React 라이브러리

  보다는 조금 정적이고 규칙적인 방법을 제공하여 좀더 빠르고 쉽게 프런트 페이지를 개발할수 있게 해주는 

  프레임워크이다.

 

 

Next.js의 동작

 

 (1) CSR 단점

 

  일반적인 React는 CSR로 동작을 한다. CSR은 자바스크립트 엔진이 사용자가 접속한 순간 부랴부랴 

  동작에 필요한 모든 라이브러리, 리엑트 훅, 기능들을 전부 다운로드 받아서 사용자 화면 초기화를 시작한다

 

  이 기능의 단점이라고 한다면, 사용자가 극한 환경(통신이 안좋은 환경) 이라

  다운로드 기능이 현저히 떨어진다고 할때 자바스크립트 엔진이 브라우저 엔진으로

  여러 웹브라우저를 가동시키기 위한 시간동안 사용자 화면에는 빈 페이지가 뜬 상태로 대기하는 상황이 

  발생하게 된다. 이러한 문제점이 있고....

 

  또 여러 검색엔진(구글, 네이버 등등)들이 웹 사이트의 정보를 봇으로 

  수집할때 안에 html 정보를 보게 되는데, 순수 리엑트로 개발을 하게 된다면, html 페이지에 아무것도 없고

  자바스크립트 파일만 존재하기 때문에(보통 자바스크립트 파일은 검사하지 않는다.) 해당 페이지는 별로 좋지

  않은 페이지라고 판단해서 검색 순위에서 밀리게 된다.

 

 (2) SSR 단점

 

 SSR은 사용자가 해당 홈페이지에 접속하면 일단  모든 컴포넌트, page, layout, 이미지들을 서버측에서

 하드코딩된 html 파일로 만들어서 선 전송을 한다.

 

이로써 얻는 장점으로는 사용자가 접속했을때 아무것도 감미되지 않은 순수 html 파일을 미리 전송받기 

때문에, 전송속도가 획기적으로 빠르고, 내부적으로 리엑트 라이브러리 및 관련 파일을 서버에서 다운로드

받기 위해 걸리는 시간동안 사용자가 해당 하드코딩된 웹페이지를 먼저 보기때문에 (속도가 실제로 빠르기도

하지만), 클라이언트 브라우저에서만 실행하는 CSR보다 더 좋은 사용자 경험을 선사할 수 있다.

 

또 검색엔진이 해당 페이지를 살펴볼때도, 하드코딩된 html 파일을 볼 수 있으므로, 해당 페이지는 

좋은 페이지라고 판단해 검색 순위의 상위 라인에 올릴 수 있다.

 

(3) 어떤 것이 하드코딩된 html로 만들어 질까? 

 

Next.js은 어떤 파일을 사용자에게 다이렉트로 꽂을 것인지? 어떤 파일은 하드 코딩후 라이브러리를 받아 인터렉티브 하게

실행되어야 하는지 선택하는 옵션이 있다.

"use client"

 

 일단 모든 파일은 1차적으로 하드코딩된 상태의 html로 Next.js 서버에서 우리의 코드를 변환을 해서 1차적으로 브라우저에 쏴준다. 그 이후 "use client" 를 선언한 파일을 찾아, 해당 리엑트 라이브러리와 훅 등을 다운로드 받아 연동을 시켜 프레임워크와 리엑트를 조합하여 동작을 온전하게 시켜준다. 

 

따라서 가장 중요한건 use client 라고 해당 파일을 CSR 시켜주는 것이 아니다. 모든 파일은 SSR을 1차적으로 받고 2차적으로 해당 명령을 선언한 파일만 서버에서 다운로드 받은 프레임워크 및 라이브러리를 서버에서 연동시켜주는 것을 알아야 한다.

 

(4) 메타데이터

 

- 헤더에 표시되는 정보를 바꾸거나 추가할 수 있는 데이터가 메타데이터이다.

 

- layout.tsx, page.tsx에서 선언할 수 있고, 루트 페이지에서 경로를 타고 계속 들어가는데 

  레이아웃 처럼 계속 추가 연동이 아니라, 중첩이 되어 1개만 표시되게 된다.

 

export const metadata :Metadata = {
    title : {
      template: "%s | Next Movies",
      default: "Next Movies",
    },
    description: 'The best movies on the best framework',
}

 

- 메타데이터는 문자열 형태 뿐만 아니라 객체 형태도 올수 있으며, title 객체 아래에 template: 옵션을 사용해서 고정적인 

  템플릿 형식을 선언할 수 있으며 , default: 값을 줘서 잘못된 페이지가 입력되었을때 입력될 default값을 설정할 수 있다.

 

- 해당 폴더가 루트 layout 이라고 한다면 해당 하위의 모든 메타데이터 파일을 해당 템플릿의 조건을 따르게 된다.