Next.js 실습

# 기술과제

- SSR, CSR이란 무엇인가?
- Next.js란 무엇인가?
- Next.js 설치 후 사용해보기
- Next 가 버전이 두개가 있다
    - /pages
    - /app
- git이 무엇인지?
    - commit
    - add
    - push
    - pull
- github에 Next.js 내코드 올릴 저장소 만들어보기

# 코딩과제

- 레이아웃을 만들어보기
    - 가능한 부분은 컴포넌트화 시키기

---

웹페이지 작동 방식 시기별

static tites
-서버가 html파일들을 가지고 있다 클라이언트가 서버 접속하면 html파일을 보내는 방식
-페이지 내에서 다른링크를 클릭하면 다시 서버에서 해당페이지의 html을 받아와서 페이지 전체가 업데이트가 되어야 한다

iframe
-문서내에서 또 다른 문서를 담을 수 있는 iframe 태그 도입
-페이지 내에서 부분적으로 받아와서 업데이트

XMLHttpRequest
-html문서 전체가 아닌 json가 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아 옴
-그 데이터를 자바스크립트를 이용하여 동적으로 html요소를 생성해서 페이지에 업데이트 하는 방식

ajax
-위 방식을 이용하여 공식적 이름을 가짐
->SPA
-사용자가 한페이지에서 이동하며 부분적으로 필요한 데이터만 받아와 업데이트 함
-하나의 앱을 사용하듯 웹사이트에서도 사용성이 조금씩 좋아짐


이런 spa트랜드+ 컴퓨터성능이 좋아져서->여러가지 일을 무리없이 처리 가능+자바스크립트도 표준화가 되어 ->프레임워크가 나와

*CSR시대
-클라이언트쪽에서 알아서 다 하는 것
-서버에서 인덱스라는 html파일을 보내주면 csr에서 사용되는 심플한 html안에 어플리케이션에 필요한 자바스크립트 링크만 들어져있다
-그래서 처음 접속 시 빈화면만 보이고 다시 링크된 어플 자바스크립트를 서버로 다운을 받게 되는데 여기 자바스크립트에는 필요한 로직 뿐 아니라 어플리케이션을 구동하는 프레임워크와 라이브러리에 소스코드들도 다 포함되어 있다.
-그렇기에 사이즈가 커 다운 받는데 시간이 소요된다
-추가로 필요한 데이터가 필요하면 서버에 요청해 받아온 후 이것들을 기반으로 해서 동적으로 html을 생성해서 드디어 사용자에게 최종적인 어플리케이션을 보여준다

단점
-문제점으로는 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다
-SEO가 좋지 않다-검색엔진이 웹사이트를 돌아다니며 html을 분석하는데 csr을 사용하면 html이 비어져있기에 검색엔진들이 csr로 작성된 웹페이지를 분석하는데 어려움이 있다

위의 SEO 단점을 보호해주기 위해
*SSR
-클라이언트가 모든 것을 처리하는 방식과 다르게 웹사이트에 접속하면 서버에서 필요한 데이터를 가져와서 html파일을 만들게 되고 이렇게 잘만들어진 html파일을 동적으로 만들 수 있는 소스코드와 함꼐 클라이언트에게 보내진다
-클라이언트는 받아온 html문서를 받아와서 사용자에게 보여준다
-csr을 사용했을때보다 첫번째 페이지 로딩이 빨라진다
-모든 컨텐츠가 html에 담겨져있기에 조금 더 효율적인 seo를 할 수 있다

단점
-static에서 있던 깜빡임 이슈가 존재(페이지 클릭으로 이동하면 전체적인 웹사이트를 다시 서버에게 받아 오는 것과 동일하기에)
-서버에 과부화 걸리기가 쉽다(특히 사용자가 많은 제품일수록 클릭을 할 때마다 서버에 요청해서 서버에서 필요한 데이터를 가지고와서html을 만들어야 하므로)
-(치명적)사용자가 빠르게 웹사잍트를 확인할 수는 있지만 동적으로 제어하는 자바스크립트를 다운받지 못해서 여기저기 클릭했는데도 반응이 없는 경우가 발생할 수 있다



TTV(time to view)
TTI(time to interaction)

csr은 ttv(사용자가 웹사이트를 볼 수 있음)과 동시에 tti (클릭을 하거나 인터랙션)이 가능하다
ssr은 사용자가 사이트를 볼 수 있는 시간과 실제로 인터렉션이 할 수 있는 시간이 길다

tip
csr:잘제 잘 쪼개서 첫 화면에 사용자가 꼭 필요한 데이터만 먼저 보여지는게 먼지 고민하는게 필요
ssr:사용자가 보고 인터렉션한 시간의 단차를줄이기 위해 어떤 노력을 할수있을지, 어떤UI와 UX를 제공할수있을지


*ssg(static site generation)
-리액트 같은 경우 csr에 특화되어 있지만 개츠비라는 라이브러리와 함께 사용하면 리액트로 만든 웹어플리케이션을 정적으로 웹페이지를 생성을 미리 해두어서 서버에 배포해 놓을 수가 있다 그리고 이렇게 만든 웹사이트들을 우리가 추가적으로 데이터를 서버에서 받아 오거나 또는 동적으로 처리해야 되는 로직이 있다면 자바스크립트 파일을 함께 가지고 있을 수 있기에 동적인 요소도 충분히 추가 할 수가 있다

*next.js는 강력한 ssr(서버 사이드 렌더링)을 지원하는 라이브러리에서 요즘은 ssg도 지원을 하고 csr과 ssr을 잘 섞어 유연하게 목적에 맞게 사용되게 도와주고 있다

라우팅
-노드(컴퓨터 네트워크)간 연결되어 통신하는 다양한 경로를 미리 정해진 규칙을 사용하여 최상의 경로를 선택하는 프로세스
-네트워크 통신의 효율성을 높여준다
정적 라우팅
-수동으로 경로를 구성하고 선택
동적 라우팅
-실제 네트워크 조건에 따라 런타임에 라우팅 테이블을 만들고 업데이트

*next 버전
-pages
-pages 폴더를 루트 폴더로 사용
-각 페이지는 pages 폴더 내에 index.js 파일로 구성
-url 경로는 pages 폴더의 구조에 따라 결정됩니다.
-파일 시스템 기반 라우팅으로 직관적이고 이해하기 쉽다
-정적 페이지 생성에 적합
-파일 시스템 기반 라우팅을 선호하는프로젝트에 어울린다

-app
-버전이 업그래이드 되면서 최근에 새롭게 도입된 라우틴 컨벤션
-컴포넌트 기반 라우팅 사용
-app 폴더를 로투 폴더로 사용
-각페이지는 app/폴더명 폴더에 위치한 컴포넌트로 구성
-컴포넌트 기반 라우팅으로 코드 조직 및 관리가 용이
-레이아웃 구성 및 재사용이 간편
-서버 액션, 파일 시스템 기반 라우팅 등을 지원
-서버 액션을 사용하는 프로젝트

*git이 무엇인지
https://eatitstory.tistory.com/m/21

GIT이란?

github에 올린 next.js 실습코드
https://github.com/westc0ld/my-app/tree/main

서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️) (youtube.com)

 

참고영상

GitHub - westc0ld/my-app: my-app