[Next.js] next.js 시작하기 ( next.js란? / 장점 / 동작과정 / 프로젝트 생성 )

💡 next.js 알게된 것

 - v8 엔진 (검색 엔진) 을 통해 구글 맵 개발 가능

 - 서버와 통신할 수 있는 react 라이브러리

 - SSR (server side randering)

 - 풀스택 프레임워크 

 - 싱글 페이지 어플리케이션

 

- 라이브러리((react) : 내가 미리 만들어둔 함수를 가져다 쓸 수 있다. 수정 가능, 원하는 대로 유연하게 대처 가능 

- 프레임워크(vue) : 코딩하는데 한계가 있음

 

SSR이란 ?

 - 서버 사이드 렌더링은 웹 애플리케이션에서 클라이언트 측에서만 렌더링되던 부분을 서버에서도 렌더링하여 완전한 HTML 문서를 클라이언트에게 제공하는 기술이다. 즉, 서버로 부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 기술이다. 

 

SSR은 클라이언트와 서버 간의 협력으로 이루어진 프로세스이다. 서버에서는 초기 렌더링을 처리하고 클라이언트에게 완성된 HTML을 제공함으로써 초기 로딩 속도를 개선할 수 있다. 이후에는 클라이언트 측 JS 코드가 실행되어 동적인 상호작용을 제공한다.

 

SSR 동작과정

 

SSR 동작과정

 

클라이언트 요청

 - 사용자가 웹 애플리케이션에 접속하면 클라이언트는 서버에 요청을 전송한다.

 

서버에서 데이터 로드

 - 서버는 해당 요청에 필요한 데이터를 로드한다. 데이터는 API 호출, 데이터베이스 쿼리 등을 통해 가져올 수 있다.

 

컴포넌트 렌더링

 -  서버는 로드한 데이터와 함께 React 컴포넌트를 렌더링한다. 이 때, 컴포넌트는 사용자에게 보여질 최종 HTML을 생성하는데 사용된다.

 

완성된 HTML 반환

 - 서버는 완성된 HTML을 클라이언트에게 반환한다. 이 HTML에는 컴포넌트가 렌더링된 상태와 필요한 데이터가 포함된다.

 

클라이언트 렌더링

 - 클라이언트는 받은 HTML을 브라우저에 렌더링한다. 이후에는 클라이언트 측 JS 코드가 실행되어 해당 페이지의 상호작용이 가능해진다.

 - 페이지가 로드된 이후에는 사용자의 상호작용에 따라 클라이언트 측에서 추가적인 데이터 요청이 발생하고, 필요한 부분만 업데이트된다. 이는 일반적인 클라이언트 사이드 렌더링(CSR)과 유사하다.

 

SSR의 장점

초기 로딩 속도 개선	서버에서 렌더링된 완전한 HTML 문서를 클라이언트에게 제공하므로, 사용자는 초기에 전체 페이지를 볼 수 있다. 사용자들은 빠른 페이지 로딩을 경험하며, 애플리케이션에 대한 전반적인 성능이 향상된다.
검색 엔진 최적화(SEO)	서버에서 완전한 HTML 문서를 제공하기 때문에 검색 엔진 크롤러가 콘텐츠를 인덱싱하는 데 용이하다.  SSR을 사용하면 검색 엔진이 애플리케이션의 콘텐츠를 쉽게 찾고 인덱싱할 수 있다. 이로써 검색 결과 노출되는 가능성이 높아지며, 애플리케이션의 가시성과 유립 경로가 향상된다.
소셜 미리보기	소셜 미디어 플랫폼은 URL을 스크랩하여 해당 페이지의 미리보기를 생성한다. SSR을 사용하면 서버에서 렌더링된 HTML 문서를 제공하므로, 미리보기가 정확하고 풍부한 정보를 포함할 수 있다. 이는 사용자가 앱을 공유할 때 미리보기가 정확히 표시되어 사용자들에게 더욱 매력적인 링크를 제공할 수 있다.
보안 강화	클라이언트 측 자바스크립트 코드를 외부로 노출시키지 않기 때문에 애플리케이션의 보안을 강화하는 데 도움을 준다.
개발 유연성	서버 측에서 렌더링되기 때문에 서버 측의 다양한 기능과 환경을 활용할 수 있다. 서버 사이드의 언어나 프레임워크, 미들웨어 등 다양한 기술을 자유롭게 사용하여 애플리케이션을 개발할 수 있다.

 

 

프로젝트 생성하기

 

우선 node.js를 다운받아준다.  (node.js 20.16.0 버전으로 다운)

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

//Node 버전 확인
node -v

 

gitbash 또는 powershell에서 (cmd는 사용해도 상관 없지만 가급적 사용하지 말라셨다..왜지) 우선 node 버전 확인 

//경로 이동
cd desktop

cd spharos-app

 

mkdir 명령어 통해 spharos-app 파일을 desktop에 생성해주고.. 생성한 파일 경로로 이동

npx create-next-app@latest .

 

처음 위 명령어를 쳤을 때, 오류가 나서 뭔가 했는데 npm, npx 명령어를 받아들여지지 않는다고..... 찾아낸 해결법은

npm install -g npm@latest --최신 버전 다운 후 진행 하면 가능

 - latest 는 최신버전을 다운 받는다는 뜻

 

오류가 난다면 위 코드를 입력 후, npx create-next-app@latest . 해주면 된다. 

 

 

vsCode에 들어가보면 이렇게 파일이 생성된 것을 볼 수 있다.

 

public : static 파일이라고 생각하면 됨, 원래는 cs, js, image, 등이 들어가는 자리 하지만 파일이 많으면 개발자 컴퓨터는 괜찮지만 유저 컴퓨터에는 잘 안보임 / 큰 이슈가 있지않는 이상 사용 x

 

 

프로젝트를 시작해보기 위해

npm run dev

 

터미널에서 위 명령어를 눌러보면 http://locallhost:3000 이 들어가진다. ctrl + 링크 클릭 하면 화면이 나타날 것이다.