처음에 웹 서버에 요청할 때 데이터가 없는 빈 HTML을 받아옵니다.
HTML과 CSS 파일들을 요청하고 로드되면 화면에 그려지게 됩니다.
Javascript를 동적 렌더링을 하게 됩니다.
장점 : 유저가 url을 이동해도 서버에서
새로운 Html을 내려받지 않고 클라이언트에서 그리기 때문에 앱과같이 웹을 사용할수 있음.
단점 : 번들된 자바스크립트 파일이 크기 떄문에 인터렉션이 오래 걸린다.
검색 엔진 최적화 대응이 힘들다.
해결 : Code splitting 코드를 쪼개는것으로 해결을 할수 있음.
처음에 웹 서버에 요청할 때 완전하게 만들어진 HTML을 받아온다.
다 만들어진 HTML을 받아서 렌더링하게 된다
장점 : 초기 로딩 속도가 빠르다.
SEO가 가능.
단점
서버 요청 횟수가 증가하여 서버 부하가 커지게 된다
매번 요청해서 받기 때문에 페이지 이동시 깜박거림, 즉 새로고침이 된다.
각각의 장단점이 있습니다.
그래서 이러한 두가지 명확한 장단점이 있는것을 혼용해서 써서 가장 효율이 좋게 만드는것이 Next.js를 사용하면 됩니다.
Next.js를 사용하면 React에서도 CSR, SSR을 혼합하여 빠른 성능을 구현할 수 있다.
Brower에서 실제로 보이는 화면을 어디서 최종적으로 만들어서 보여주는지, 어떻게 만드는지에 따라서 CSR과 SSR이 나뉘어지게 됩니다.
Next.js 공식 사이트
yarn create react-app my-app 처럼 전체적으로 다 만들어주는 자동설정하는 방법이 있다.
npx create-next-app@latest
yarn create next-app
pnpm create next-app
그리고 react-dom을 만들어서 수동으로 설정해야하는 방법도 있다.
npm install next react react-dom
yarn add next react react-dom
본인이 npm을 쓴다면 첫번째 yarn을 쓴다면 두번째 방법으로 입력하면 됩니다.
아 그리고 하기전에
그냥 저대로 치면 패키지가 가끔 아무거도 설치가 안될때가 있다.
가끔인지 항상 그런건지는 잘 모르겠지만
yarn init -y
위에것을 하기전 package.json을 먼저 생성을 해야
패키지를 설치할수 있다.
설치 한 후에 package.json을 열고
내용을 확인해보면 scripts부문에
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
이 부분을 추가해주면 됩니다.
공식 사이트에서 나온 내용을 토대로 말하면
각각의 실행 목적과 내용이 다르다.
dev- 개발모드에서 Next.js를 시작하기 위한 실행.
build - 프로덕션 사용을 위한 애플리케이션 빌드를 실행.
start - 프로덕션 서버를 시작하기 위해 실행.
lint - Next.js의 내장 ESLint 구성을 설정하기 위한 실행
자 그래서 기본적인 세팅은 이렇게 하면 됩니다.
그리고 이제 ssr과 csr을 구현해봐야하는데.
우선 pages라는 폴더를 하나 만들어야 한다. 그리고 안에
index.js를 만들고 home.js라는 파일을 만들었다.
디렉토리 안에 만들떄도 규칙이 있는데 리액트처럼 컴퍼넌츠 파일에 앞글자를 대문자로
써야하는거 처럼 이건 무조건 파일 이름은 소문자로 써야한다.
그리고 pages디렉토리 안 index파일이 주소'/'의 의미를 담고 있다.
Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있다.
파일이 pages라는 디렉토리에 만들어 지면 자동으로 경로로 연결되 사용이 가능하다.
그래서 pages는 가장 일반적인 패턴을 정의하는데 사용할수 있다고 합니다.
pages/index.js => /
pages/blog/index.js => /blog
이런것을 색인 경로(Index routes)라고 합니다.
중첩으로 경로 지정을 할수도 있습니다.
이런식으로 파일을 지정한 후
pages/my/account.js → /my/account
안에 하위 디렉토리가 /my로 경로가 이어지는 걸 볼수 있다.
디렉토리안에 디렉토리 라우터는 이런 중첩파일도 지원을 할수 있습니다.
페이지 간의 연결
간단하게 페이지간 연결을 해보겠습니다. 아래 함수는 공식 사이트에서 나온
내용 그대로를 적용해서 만들어 보았습니다.
next/link를 사용하면 다른 페이지로 라우팅되면서 csr로 동작할수 있도록 한다.
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/my/account">
<a>My account</a>
</Link>
</li>
<li>
<Link href="/my/info">
<a>My info</a>
</Link>
</li>
</ul>
)
}
export default Home
Link이 클라이언트 측 경로 전환을 수행하기 위해 호출된 React 구성 요소 가 제공됩니다
위의 예처럼 각각에 주어진 하이퍼링크로 매핑이 됩니다.
이런 모습의 사이트가 하나 만들어지고
나의 계정이라는 항목을 하나 클릭했을때,
개발자 도구를 통해서 네트워크상태를 확인해보면
account에서 받아온 부분은 없고 단지 엘리먼트 요소들만 바뀐다.
이게 처음에 사용자가 index로 들어왔을때는 SSR-> 서버에서 받은 Html로 DOM을 그리고 그 뒤로는 CSR로 동작하게 한다는 의미이다.