![[PJ Log] React 프로젝트에 Next js 적용](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fm7vFm%2Fbtr6YRvI0qz%2FMp7D39Hul6ed5fx3yPOse1%2Fimg.png)
기본적인 와꾸가 잡혀가는 내 개인 플래너 프로젝트... 대충이라도 빨리 만들어서 사용하고 싶다.
그러려면 빨리 Back-end와 Server를 돌려야 한다. 챗지피티에게 이것저것 물어보기도 하고 구글링도 하며 Next js를 사용해 express 서버에서 돌리기로 결정하였다.
NEXT. JS
사용 전, 간단하게 NEXT JS가 뭔 대해 알아보자.
The React Framework for the Web
사이트 들어가보니 가장 상단에 쓰여있는 카피. 말 그대로 React Framework라고 한다. NEXT 가 밀고 있는 장점들은 다음과 같다.
- Client and Server Rendering
- Nested Routing
- Data Fetching
- Built-in Optimizations
- TypeScript Surpport
- API Routes
- Middleware
- Node.js and Edge Runtimes
- CSS Support
SSR , SSG, CSR(SPA) 특징
개념이 잘 잡혀있지 않는 것 같아, 간단하게 정리해 보았다.
이 3가지는 웹 페이지를 렌더링 하는 방식에 따라 분류된 용어라고 한다.
서버사이드 렌더링(SSR)
- 렌더링 위치: 서버 -> 서버의 부하가 크다.
- 동적인 페이지 제공
- 속도
- 초기 로딩 속도가 CSR에 비해 빠르지만, 로딩 이후 이동시 속도가 느리다.
- 첫 페이지에 해당하는 문서만 브라우저가 렌더링 하기 때문. 이후 페이지 이동마다 서버와 데이터를 주고받아야 해서 이후 사용자 경험이 낮아지는 요인이 될 수 있다.
- SEO: 가능
- 검색 엔진은 페이지의 콘텐츠를 분석할 때 HTML 코드를 참고한다. 서버에서 렌더링 된 HTML 페이지가 전달되면 검색 엔진이 콘텐츠를 쉽게 찾을 수 있다.
- 보안 : 높다.
클라이언트 사이드 렌더링 (CSR)
- 렌더링 위치: 클라이언트 > 클라이언트의 부하가 크다.
- 동적인 페이지 제공
- 속도
- 초기 로딩 속도는 SSR보다 느리지만, 인터렉션이 빠르다.
- 첫 요청에 전체 페이지에 대한 모든 문서 파일을 받는 특징으로 인해 나타나는 현상.
- View 렌더링을 브라우저에게 넘김으로써 서버 부하를 낮추고 사용자 인터렉션이 빠릿빠릿하게 되는 특징.
- 새로고침이 발생하지 않아 네이티브 애플리케이션과 비슷한 경험 가능.
- SEO: 추가작업 필요
- 검색엔진 크롤러가 제대로 수집을 못하는 경우가 생긴다. 구글은 JS 엔진이 내장되어 있어 괜찮지만, 이외의 다른 포털사이트에서는 추가 보완 작업을 해 주어야 한다.
정적 사이트 생성(SSG)
- 렌더링 위치: 클라이언트
- 정적인 페이지 제공
- 초기 로딩 속도 빠르고, SEO 유리
- 서버의 부하가 적고 보안에 유리
이것저것 찾아보았을 때 내가 만들고자 하는 애플리케이션은 페이지 이동이 많지는 않지만, 사용자 경험을 중요하게 생각하며 개발하고자 하기에 클라이언트 사이드 렌더링을 적용하는 게 알맞다고 판단된다.
본격적인 마이그레이션 과정
공식 문서에 잘 나와있지만.. 미래의 나를 위해 적어둔다. 공식 문서의 Manual Setup 부분을 참고하며 진행했다.
1. next 설치
npm install next react react-dom2. package.json 추가
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}기존 React관련 Script를 대체해 준다.
참고로 Next는 npm start 가 아니라 npm run dev로 실행해야 한다.
start는 빌드 파일을 실 서버에서 돌리는 용도로 사용되기 때문....
3. root에 pages, public 디렉터리 추가
4. pages/index.tsx or src/pages/index.tsx 추가
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage애플리케이션의 루트(/)에서 렌더링 되는 페이지라고 한다.
Getting Started | Next.js
Get started with Next.js in the official documentation, and learn more about all our features!
nextjs.org
Style 적용을 위한 Custom file 추가
Next.js 는 HTML 구성 요소를 서버에서 렌더링 될 때 초기화 및 사용자 설정으로 렌더링 해주는 기능을 Custom file 들을 통해 제공한다. 이중 나는 Custom App, Custom Documnet를 이용해 기존의 전역 스타일링과 웹폰트 링크를 적용했다.
Custom App : pages/_app.js or pages/_app.tsx
서버로 요청이 들어오면 가장 먼저 실행되는 컴포넌트. 공통 레이아웃을 설정하는 역할을 한다.
- 페이지 변경 시 레이아웃 유지
- 페이지 탐색 시 상태 유지
- 페이지에 추가 데이터 삽입
- 글로벌 CSS 추가
애플리케이션이 실행 중인 상태에서 app파일을 추가하면 개발 서버를 다시 시작해 주어야 한다.
Advanced Features: Custom `App` | Next.js
Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.
nextjs.org
Custom Documnet: pages/_documnet.js or pages/_documnet.tsx
_app 이후 실행되는 컴포넌트. 주로 <head> <body> 커스텀을 담당하며 서버에서만 렌더링 되므로에서와 같은 이벤트 핸들러를 사용할 수 없다고 한다.
Advanced Features: Custom `Document` | Next.js
Extend the default document markup added by Next.js.
nextjs.org
src/pages/_app.tsx
import type { AppProps } from 'next/app';
import { GlobalStyle } from './../styles/GlobalStyel';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<GlobalStyle />
<Component {...pageProps} />
</>
);
}
src/pages/_document.tsx
import Document, {
DocumentContext,
DocumentInitialProps,
Html,
Head,
Main,
NextScript,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
/*추가할 메타 테그나 링크 등등 */
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}documnet 파일에서 getInitialProps을 사용해 서버 측 렌더링을 활성화시켰다. 이렇게 하지 않으면 새로고침 했을 때 글로벌스타일이 입혀지지 않은 날것의 (극혐) 스타일이 잠깐 보인다.
위의 코드는 next js에서 styled-components와 next js를 같이 사용하는 예제를 바탕으로 수정해서 적용했다.
해당 파일에서 어떻게 Head를 커스텀 하나 했는데 그냥 아래쪽에 render() 이하를 붙이면 해결됐다.
Data Fetching: getInitialProps | Next.js
Enable Server-Side Rendering in a page and do initial data population with `getInitialProps`.
nextjs.org
GitHub - vercel/next.js: The React Framework
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
github.com
styled-components: Advanced Usage
Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Rendering and Style Objects
styled-components.com
일단 갈길이 멀지만, Next js로 진행 중이던 React 플젝을 잘 옮긴 것 같다.
진행 중에 관련한 다른 이슈가 생기면 글에 추가해둬야겠다.
참고 자료
Chat GPT
Next.js 공식 문서
CSR과 SSR의 장단점
# 브라우저 렌더링이란?
www.startupcode.kr
'Study > PJ log' 카테고리의 다른 글
| Next.js Cors Error 처리 (feat. API Routes, TypeScript) (0) | 2023.06.02 |
|---|---|
| [PJ Log] git rebase로 커밋 히스토리 정리하기 (0) | 2023.03.05 |
| [log.] 원티드 프리온보딩 인턴십 : 프론트엔드 숏 에세이 (0) | 2023.02.13 |
| [Side Project] 일정 관리 어플 개발 (1) : 시작 (0) | 2023.01.15 |