오늘 새로 배운 것
Next.js
각각의 페이지가 렌더링 될 때 가장 먼저 실행되는 파일
공통된 레이아웃이나 CSS를 적용하는데에 활용
Next.js는 HEAD 컴포넌트를 이용하여 안에 title이나 meta tag등을 추가해야한다.
Next.js에서는 Router를 따로 만들지 않고 폴더 자체가 페이지.
예를 들어, post라는 폴더 안에 [id].tsx 이런 식으로 이름하는 컴포넌트를 추가하면 곧 /post/id값 이라는 url로 접근하는 것과 같다.
또 페이지간 이동을 할 때는 Link라는 컴포넌트로 페이지 이동을 하는데
<Link href="/"><Link>이런 식으로 이동하게 할 수 있다.
또한 Dynamic Routes라고 해서 useRouter 훅을 next/router로부터 import하고 url로부터의 id 값을 쿼리로 받아 JSX에서 활용할 수 있다.
import { useRouter } from 'next/router';
import React from 'react';
const Post = () => {
const router = useRouter();
const { id } = router.query;
return <div>Post:{id}</div>;
};
export default Post;Next.js 에서는 Node 서버 없이 api를 만들어 배포할 수 있는 기능도 있다. 아래는 Dynamic API Route 기능에 관한 코드인데,
import type { NextApiRequest, NextApiResponse } from 'next';
type Data = {
name: string;
id: string | string[] | undefined;
};
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
const { query } = req;
const { id } = query;
res.status(200).json({ name: 'test', id });
}api 폴더 안에 test 폴더 안에 [id].tsx이런 식으로 파일을 만들고 위의 코드를 통해 아래 url로 접근하면
api/test/1
이런 식의 json 형태의 api를 볼 수 있다.
MPA부터 SSR까지의 흐름
원시적인 SSR방식의 MPA의 단점인 페이지 이동시 깜빡임이나 유저 사용성 저하를 보완하기 위해 CSR 방식의 SPA가 적용되었다. 하지만 SPA 방식의 단점도 있는데, 한번에 서버로부터 모든 파일을 가져와야해서 JS 번들 사이즈가 크면 따른 초기 로딩 속도가 느려지게 된다. 이를 보완하기 위해 Code Splitting 개념도 도입이 되었다.
Code Splitting은 번들된 코드나 컴포넌트로 분리해놓고 필요할 때 해당 JS 파일을 불러와서 로딩하는 Lazy-Loading이라는 방식인데 이는 크롤링봇이 html의 정보를 탐색하는데 어려움을 주어 SEO에 좋지 않았다. 이를 해결하기 위해 react helmet, Suspense 컴포넌트 사용을 할 수 있겠지만 더 확실한 근본적인 방법은 제대로된 html을 처음부터 제공하는 것이다.
그래서 이를 보완하기 위해 SSR과 SSG 방식이 적용되었다.
SSR은 요청을 할 때 런타임에 html 파일을 만들어서 응답을 보내주는 방식이고, SSG 같은 경우에는 build가 되는 순간에 html을 만들어서 보내주는 방식이다.
Pre-rendering
위의 SSR과 SSG로 나뉘는 부분에 대한 개념인데,
일단 Rendering은 JS를 가지고 HTML을 만드는 행위이다. Pre-rendering은 Client에서 HTML이 로드되기 이전에 만들어지는 것인데 빌드할 때 렌더링되면 SSG, 런타임에 렌더링되면 SSR이다.
(런타임은 앱이 빌드 및 배포된 후 사용자의 요청에 따른 응답으로 앱이 실행되는 기간을 말한다.)
