4장 - 서버 사이드 렌더링(2)

4.2.6 서버 사이드 렌더링 예제 프로젝트

 

index.tsx

 

create-react-app의 index.jsx와 유사한 역할을 하는 애플리케이션의 시작점으로, hydrate가 포함돼 있다.

 

이 파일의 목적은 서버로부터 받은 HTML을 hydrate를 통해 완성된 앱 애플리케이션으로 만드는 것이다.

 

hydrate는 서버에서 완성한 HTML과 하이드레이션 대상이 되는 HTML의 결과물이 동일한지 비교하는 작업을 거치기 때문에,

이 비교 작업을 무사히 수행하기 위해 한 번 더 데이터를 조회한다.

 

App.tsx

 

일반적으로 사용자가 만드는 리액트 애플리케이션의 시작점.

todos를 props로 받는데, 이 props는 서버에서 요청하는 todos를 받는다.

이 props.todo를 기반으로 렌더링하는 평범한 컴포넌트다.

 

Toso.tsx

 

App.tsx의 자식 컴포넌트로, props.todo를 받아 렌더링한다.

 

index.html

 

서버 사이드 렌더링을 수행할 때 기본이 되는 HTML 템플릿이다.

이 HTML을 기반으로 리액트 애플리케이션이 완성된다.

 

server.ts

 

서버에서 동작하는 파일로, 사용자의 요청에 따라 리소스를 제공하고 서버사이드 렌더링을 수행한다.

 

createServer를 사용해 서버를 생성하고, 특정 URL에 따라 다른 응답을 제공한다.

 

serverHandler함수는 HTTP요청을 처리하며, 라우팅에 따라 적절한 데이터를 렌더링하고 반환한다.

 

/ 경로에서는 서버 사이드 렌더링을 통해 HTML을 반환하고, /stream 경로에서는 renderToNodeStream을 사용해 데이터를 스트리밍 방식으로 렌더링한다.

 

코드에서 renderToString을 사용해 React 컴포넌트를 문자열로 렌더링하고, 이를 HTML에 삽입해 반환한다.

 

 

 

webpack.config.js

 

웹팩 설정 파일에서는 브라우저 코드와 서버 코드를 각각 번들링하는 방법을 정의한다.

entry, output, module등 주요 설정을 통해 파일의 위리와 번들링 방법을 지정한다.

 

4.3.1 Next.js란?

 

vercel이라는 미국 스타트업에서 만든 풀스택 웹 애플리케이션을 구축하기 위한 리액트 기반  프레임워크다.

 

Next.js는 서버 사이드 렌더링 및 정적 페이지 생성을 쉽게 할 수 있도록 지원한다.

 

Next.js는 페이지 기반의 라우팅 방식을 사용하며, React의 기능과 SSR을 결합해 최적의 웹 애플리케이션을 구축할 수 있게 한다.

또한, 정적 페이지 생성과 동적 경로 설정을 통해 다양한 URL 구조를 지원한다.

 

2023년 기준으로, Next.js 13 버전부터 새로운 앱 라우팅 시스템이 도입되었으며, 이와 함께 React 기반의 최신 기능들을 쉽게 사용할 수 있는 환경이 제공된다.

 

 

4.3.2 Next.js 시작하기

 

npx create next-app@Latest --ts

 

 

타입스크립트를 기반으로 한 Next.js 프로젝트 생성 방법이다.

 

 

package.json

 

npm 프로젝트를 살펴볼 때는 package.json을 먼저 봐야 한다.

프로젝트 구동에 필요한 모든 명령어 및 의존성이 포함돼있어 프로젝트의 대략적인 모습을 확인하는 데 유용하다.