서버사이드 렌더링(Server-side Rendering/SSR)은 ⬅︎ 요기

---

정적 생성(Static Generation)

pre-rendering(사전 렌더링)

Next.js는
1) 모든 페이지를 pre-render(사전 렌더) 한다

• 클라이언트에서 모든 작업을 하는게 아니라, 사전에 각 html 파일을 생성한다

2) 이렇게 생성된 html은 퍼포먼스 향상과
3) SEO 향상에 효과적이다

SEO: Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.
meta 태그를 이용해 description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용한다.

• meta 태그도 잘 보이고
  • 메타 태그: 웹 페이지의 보이지 않는 정보를 제공.
    페이지에 대한 설명, 제작자, 크롤링 정책 등의 정보를 제공할 수 있다.

• semantic 태그도 잘 보인다

☹️ pre-render를 하지 않으면?

• JS load 전에는 아무것도 확인되지 않는다.

  • JS가 load 되어야 그 페이지 요소들을 채워나간다

• Next.js처럼 pre-render를 하게 되면 초기에 meta data가 포함된 html 요소들이 페이지에서 확인된다.

  • 그 후 JS가 load 되고 <Link /> 등의 컴포넌트 들이 작동한다. 이 것을 hydration 이라고 한다.

Hydrate: server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤,
클라이언트 단에서 html 코드와 React인 JS코드를 서로 매칭 시키는 과정을 의미. Next.js의 주요 동작 방식 중 하나.

---

getStaticProps

미리 만들어 static html을 제공

변경하고 나니,

• 길었던 로딩 시간 없이 첫 페이지를 바로 볼 수 있었다.
• 로딩 페이지 등 불필요 코드를 줄이니 깔끔해졌다

import type { NextPage } from 'next';
import { getProducts } from './api/api';

const Home: NextPage = ({ list }: any) => {

  return (
    // ... 생략
  );
};

export default Home;

export async function getStaticProps() {
  const data = await getProducts();

  return {
    props: {
      list: data,
    },
  };
}

• .next > sever

  

• .next > static

  • 서버에서 사용되지 않는 js 번들 파일들이 확인된다.
  

---

getStaticPaths

❓Dynamic Routing(동적 라우팅)은 static page를 미리 만들 수 없는걸까?

• [id].ts 파일 같은 페이지는 보통 SSR 처리 되지만,
  • 개수가 몇 개 되지 않고 한정적이면 미리 만들어 둘 수도 있다.
  • 그럴 경우 사용되는 게 getStaticPaths 이다

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true // 없는 페이지 대한 대응 여부. 새로 정적 페이지를 만들게 된다..
  }
}