[ 3D Web : Front & Back_Next.JS ]
Next.JS란 무엇이고, 왜 사용하는걸까
∇ Front & Back _ Next.JS : Next.JS란 무엇이고, 왜 사용하는걸까?
목 차
1. OverView
2. Next.JS 탄생배경
3. Next.JS가 제공하는 주요 기능.
4. Next.js 사용의 단점.
Ⅰ. ☆ Overview.
※ Next.js 는 React.js를 위해 만들어낸 '오픈소스 자바스크립트 웹 프레임워크 ' 로서,
React.js에는 없는
[ 서버 사이드 렌더링(SSR) & 정적 사이트 생성(SSG) & 증분 정적 재생성(ISR) ] 등 과 같은
다양하고 풍부한 기능을 제공합니다.
◎ 서버사이드 렌더링(SSR)을 함으로써 얻는 이득은??
◆ 페이지 로딩 시간 단축
- 클라이언트 사이드 렌더링(CSR)의 경우, 서버에서 모든 JS파일을 로드하고 나서 유저는 웹 페이지를 보게 되는데
이 시점까지 사용자는 많은 시간을 대기해야 하는 단점이 있습니다.
- 반면에, 서버사이트 렌더링(SSR)은 서버단에서 JS코드를 로딩함으로써
클라이언트단에서는 페이지를 로딩하는 시간이 줄어들게 됩니다.
◆ SEO 성능 증가
- 클라이언트 사이드 렌더링(CSR)의 경우, JS코드가 로드되지 않은 경우, 아무런 정보가 보이지 않습니다.
==> 구글의 검색엔진(서치태그)의 경우, JS코드가 로드되지 않은 페이지를 스캔하게 되는데,
이는 검색 노출에 악영향을 주게 됩니다.
§ 서버사이드렌더링(SSR)방식으로 만들어진 페이지는, 검색 엔진이 JS코드를 읽는 것이 아닌
서버단에서 JS/HTMl/CSS를 렌더링해서 페이지에 한번에 렌더링 함으로써
검색엔진에 게시글이 인식되게끔 하고, meta 태그를 자유롭게 추가함으로 SEO 성능을 증가 시킬 수 있습니다.
◎ Next.js의 제공 기능.
- 코드분할/ 서버사이드렌더링/ 파일 기반 라우팅/ 경로 기반 프리페칭 등등
● 정적 사이트 생성.
● 증분 정적 콘텐츠 생성
● 타입스크립트에 대한 기본 지원
● 자동 polyfill 적용
● 이미지 최적화
● 웹 애플리케이션의 국제화 지원
● 성능 분석.
◎ Next.js 사용의 단점,
○ 서버단의 최적화/성능이 느리면 웹 페이지의 로딩 속도 역시 영향을 받습니다.
○ 서버에 주는 부하가 CSR 방식보다 클 수 밖에 없습니다.
○ 페이지 전환시마다, 화면이 깜빡거리는 느낌으로 페이지를 로딩하는 UX적인 단점.
Ⅱ. Next.JS 탄생배경.
§ 최신 JS프레임워크들이 개발되기 전에는 동적인 웹 어플리케이션을 만들기가 어렵고 복잡했습니다.
개발 전 순수 JS 환경에서는 많은 라이브러리를 사용해야 했으며
원하는 대로 작동하도록 설정하는게 굉장히 복잡했습니다.
§ 이런 상황에서, [ Angular, React, Vue ] 등과 같은 프레임워크가 등장하면서, 웹 개발 분야가 급변하기 시작했습니다.
§ 리액트는 페이스북(현재 메타)의 엔지니어 조던 발케가 개발한 자바스크립트 라이브러리로,
XHP Hack 라이브러리의 영향을 받았습니다. 2013년에 오픈소스화된 리액트는 웹사이트와 웹 앱,
리액트 네이티브를 통한 네이티브 앱 개발, React VR을 이용한 VR 구현 등 다양한 용도로 사용됩니다.
현재 리액트는 가장 인기 있는 자바스크립트 라이브러리 중 하나로, 수백만 개의 웹사이트에서 활용되고 있습니다.
＠ 다만, React에는 한 가지 큰 문제점이 있습니다.
== "리엑트가 기본적으로, 클라이언트 사이드에서만 작동한다는 점입니다. "
-> 유저의 웹 브라우저에서만 실행되기 때문에, 리엑트를 사용해서 만든 웹 애플리케이션은
SEO(검색엔진최적화 : Search Engine Optimization)의 효과를 거의 볼 수 없으며,
첫 화면에 웹 프로덕트를 제대로 렌더링하기 위해 애플리케이션 실행 초기에 성능 부담이 발생합니다.
== 웹앱을 완전히 표시하려면, 브라우저 엔진이 전체 웹 번들(코드)를 다운로드 받은 뒤, 그 내용을 분석하고
코드를 실행해서 결과를 렌더링해야 하기 때문입니다.
(그래서, 규모가 큰 웹의 경우, 첫 화면을 렌더링완료하기까지 수초가 소요되기도 함 )
§ 이러한 문제를 해결하기 위해 렌더링을 서버단에서 미리 하고 오는 방법을 연구하기 시작했습니다.(SSR)
=>> 서버 사이드 렌더링(SSR)을 사용할 수 있다면, 리액트 웹앱을 순수한 HTML 페이지로 미리 렌더링 한 뒤,
브라우저가 이를 다운 받아서, 즉각 화면에 띄워주고, 클라이언트에서 JS번들을 다 해석하면
유저가 웹앱과 상호작용 가능하도록 하게 됩니다.
->> 이러한 연구의 결과가, 이 카테고리에서 작성할 "Next.JS" 입니다/
□ Next.JS 사용 기업.
- >> Next.JS는 현재 넷플릭스, 트위치, 틱톡, 홀루, 나이키, 우버, 엘라스틱과 같은 유명 기업에서 사용되고 있습니다.
□ Next.JS와 비슷한 프레임워크.
√ Gatsby
: Next.js 대신 사용할 수 있는 유명한 프레임워크. (정적 사이트 생성만 지원)
√ Razzle
: Next.JS만큼 유명하진 않지만, 서버 사이드 렌더링이 가능한 JS 애플리케이션을 제작 가능합니다.
- Razzle 핵심은, create-react-app 도구를 쉽게 사용하면서도,
서버-클라이언트의 복잡한 애플리케이션 설정들을 추상화하고 단순하게 만들 수 있습니다.
√ Nuxt.js
: Vue.js 기반의 프레임워크 입니다.
+ 서버사이드렌더링, 정적 사이트 생성, 프로그레시브 웹 앱 관리 등과 같은 기능을 제공하면서도
성능, SEo, 개발 속도 등에서 별다른 차이가 나지 않습니다.
√ Angular Universal
: Angular는 서버에서 JS 코드를 실행하고, 렌더링하는 기능을 제공하고자 Angular Universal을 개발.
□ React.js에서 Next.JS로
☆ Next.js의 기본 철학은 'React.js'와 거의 같습니다.
: "설정보다 관습(convetion-over-cofiguration) 이라는 취지로 만들어졌기 때문에
Next..JS의 특정 기능을 사용하고자 한다면
복잡한 설정 없이도 해당 기능을 사용할 수 있는 쉬운 방법을 찾을 수 있습니다.
★설정보다 관습(Convention-over-configuration)
: 개발자가 해야 할 결정의 수를 줄여주면서도, 유연성을 잃지 않도록 하는 소프트웨어 설계 패러다임.
ex )
단일 Next.js 애플리케이션에서 별도의 설정 파일을 만들지 않고도
어떤 페이지에는 서버 사이드 렌더링을 적용하고, 어떤 페이지에 정적 페이지 생성을 적용할지 지정 가능 !!
== 각 페이지에서 특정 함수를 export하면, NextJS가 나머지 일을 알아서 처리.
◎ 리액트와 Next.js의 가장 큰 차이점은??
- 리액트는 자바스크립트 라이브러리이고, Next.JS는 프레임워크라는 점.
- Next.js는 클라이언트와 서버에서 모두 실핼할 수 있는 코드형식과, 풍부하고 다양한 기능을 제공하여
웹 애플리케이션을 제작할 수 있습니다,
- 서버 사이드 렌더링 페이지 & 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문에
fetch, window, document와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근 불가.
Ⅲ. Next.JS가 제공하는 주요 기능.
▼ hot reloading
: 개발 중 저장되는 코드는 자동으로 새로고침합니다.
▼ automatic routing
- pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅됩니다. (pages/page1.tsx -> localhost:3000/page1)
- public 폴더도 pages의 폴더와 동일하게 라우팅 할 수 있습니다.
(but, 모든 사람이 페이지 접근 가능하므로 지양해야합니다)
▼ single file components
: style.jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 CSS를 만들 수 있습니다.
// styled-jsx
function Heading(props) {
const variable = "red";
return (
<div className="title">
<h1>{props.heading}</h1>
<style jsx>
{`
h1 {
color: ${variable};
}
`}
</style>
</div>);
}
export default function Home() {
return (
<div>
// red
<Heading heading="heading" />
// block
<h1>ttt</h1>
</div>);
}● <style jsx global>를 사용하면 글로벌로 스타일 정의가 가능합니다.
▼ 글로벌 스타일 정의 가능.
- _app.tsx에서만 정의 가능합니다.
-> 다른 컴포넌트에 정의한 경우, 다른 클래스와 겹쳐 오류를 발생할 수 있으므로 _app에서만 허용합니다.
// _app.tsx
import "./globals.css";
function MyApp({ Component, pageProps }) {
return <Component ponent {...pageProps} />;
}
export default MyApp;
▼ Server landing
- 서버 렌더링을 합니다
- 클라이언트 렌더링과 다르게 서버 렌더링을 한 페이지의 페이지 소스보기를 클릭하면 내부에 소스가 존재
▼ Code splitting
- dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능합니다.
- '코드 스플리팅'은 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것 !
- 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 JS 로딩 시간을 개선 가능합니다.
▼ typescript
- 타입스크립트 활용을 위해 웹팩을 만지거나 바벨을 만질 필요가 없습니다.
-> 타입스크립트를 설치( yarn add typescript @types/node @types/react) 하고서
- > yarn run dev 하면 자동으로 tsconfig, next-end.d.ts가 생성되어 TS로 코딩이 가능해집니다.
_app.tsx
● 이곳에서 렌더링 하는 값은 모든 페이지에 영향을 줍니다.
● 최초로 실행되는 것은 _app.tsx
● _app.tsx은 클라이언트에서 띄우길 바라는 전체 컴포넌트
- > 공통 레이아웃임으로 최초 실행되며 내부에 컴포넌트들을 실행..
● 내부에 컴포넌트가 있다면 전부 실행하고 html의 body로 구성
● Component, pageProps를 받습니다.
- 여기서 props로 받은 Component는 요청한 페이지
- GET 요청을 보냈다면, component에는 pages/index.js 파일이 props로 내려오게 됩니다.
- pageProps는 페이지 getInitialProps를 통해 내려 받은 props들을 말합니다.
● 그 다음 _document.tsx가 실행됨.
● 페이지를 업데이트 하기 전에 원하는 방식으로 페이지를 업데이트 하는 통로.
● _app.tsx에서 console.log 실행 시 client, server 둘다 콘솔 찍힘.
Ⅳ. Next.JS 사용의 단점.
- 속도SSR의 단점으로 서버가 느리면 웹사이트가 기하급수적으로 느려진다.
- 서버 부하가 CSR에 비해 많은 편이다.
- 페이지 이동할때마다 새로운 html 파일을 불러올 때 화면이 깜박거림. (UX적으로 좋지못함)
'Front_End [JS기반] > React.js + Next.js' 카테고리의 다른 글
| [ 3D Web : Front & Back_Next.JS ] Next.JS의 렌더링이 동작하는 원리. (2) | 2024.11.28 |
|---|---|
| [ 3D Web : Front_React.js ] React.JS : React란? (0) | 2024.11.26 |
| [ 3D Web : Front_React.js ] React의 JSX & 컴포넌트 & prop & state (2) | 2024.11.23 |
| [ 3D Web : Front_React.js ] React의 동작원리 정리. (1) | 2024.11.21 |
| [ 3D Web : Front_React.js ] React란 무엇인가? (1) | 2024.11.20 |