
## SEO의 중요성

[공식문서 SEO](https://nextjs.org/learn/seo/introduction-to-seo)를 읽고 정리해본다.

**SEO(Search Engine Optimization)**이란 구글 등 검색엔진에서 뭔가를 검색했을 때 내 글이 잘 나오도록 최적화하는 것을 말한다.

마케팅을 전공했기 때문에 아주 익숙한 단어다. 웹사이트를 운영할 때 내 컨텐츠가 나만 보기 위한게 아니라면 SEO 적용은 필수다. SEO 랭킹이 높을 수록 내 컨텐츠를 더 많은 사람들이 볼 수 있다.

### Search Systems (검색 엔진)

#### 검색엔진들의 Search System

1. 크롤링: 웹사이트를 돌아다니며 그 안의 컨텐츠들을 긁어모은다.
2. 인덱싱: 크롤링된 데이터에 적절하게 접근할 수 있도록 저장할 위치를 찾는다.
3. 렌더링: JS 등 페이지 리소스를 실행한다.
4. 랭킹: 사용자 검색어와 관련된 페이지들을 엮어 순서대로 보여준다. 이때 각 검색엔진의 기준(알고리즘)대로 순위가 정해진다.

![구글 봇의 작동 순서](https://nextjs.org/_next/image?url=%2Fstatic%2Fimages%2Flearn%2Fseo%2Fgooglebot.png&w=3840&q=75)

## 구글의 페이지 처리 프로세스

React의 SEO 이슈와 대처 방안을 알아보자. 
(출처: Geek news Weekly)

1. SSR/SSG 적용 필수: 최초 렌더링 빠르게 & 검색 크롤러의 렌더링에 의존하지 않기
2. HTTP 상태코드 제대로 사용
3. Hashed URL 피하기
4. 링크는 꼭 `<a href>`로, div나 버튼 말고
5. 주요 HTML의 lazy loading 피하기
6. 기본 요소들은 다 챙길 것
    - Canonicalization
    - Structured data
    - XML sitemaps
    - Mobile-first
    - Website Structure
    - HTTPS
    - Title tags
    - Semantic HTML

## 링크 주스란?

1. 웹 페이지를 타고 흐르는 링크의 가치 (링크를 받고 있는 개수X링크 원본 사이트의 품질과 관련성)
2. 검색 순위를 결정하는 요소

- `rel="noopener"`: 새로 열린 페이지에 `window.opener` 객체가 존재하지 않음
- `rel="noreferer"`: `window.opener` 객체를 조작하지 못 하게 함 
(하지만 직접 트래픽으로 파악돼서 분석 및 추적 소프트웨어 수치 왜곡)
- `rel="nofollow"`: 페이지의 내부 링크주스를 전달하고 싶지 않을 때 씀

=> 구글 및 기타 검색엔진을 사용하려면 모든 스폰서 링크 및 광고에서 `rel="nofollow"`를 사용해야함.

## 웹 접근성을 위한 요소 'role'

HTML 코드 보면 `ul`, `ol`에 `role='list'`를 주고 `li` 태그에 `role='listitem'`을 주는 경우가 있다.
 웹 접근성을 위한 것으로, 스크린 리더나 보조 기기가 그 컴포넌트의 역할 등 정보를 더 잘 알게 하기 이다.


내 블로그 글을 구글에 뜨게 하려면 필수인 바로 그것

 Next.js SEO 하기 (검색엔진최적화)


## 서버 사이드 렌더링 (SSR)

Next.js는 서버 사이드 렌더링을 한다. 서버 사이드 렌더링이란
서버가 빌드 단계에서 페이지들을 미리 다 만들어두고 클라이언트가 접속 요청을 보내면 그때 그때 보내주는 방식이다.  
SSR은 빌드하면 기완성된 html이 생기고, 서버에서 브라우저에게 기완성 HTML+data를 합쳐 보내주기만 하면 된다.
그래서 빈 HTML을 받아 스크립트를 불러오는 등 브라우저에서 렌더링하는 CSR보다 첫 로딩이 빠르다.

전통적인 웹의 경우, 정적 페이지를 서버에서 만들어두고 보여주는 형식이었다. 이런 방식도 SSR이다.

## 서버 사이드 렌더링의 장점

1. 검색 엔진 최적화 (미리 만들어두고, 메타 데이터를 저장해두니 검색엔진이 데이터를 더 잘 모은다.)
2. 빠른 페이지 렌더링 (초기 로딩 속도 줄임)

### getServerSideProps

- SSR
- 요청 시 필요한 데이터를 미리 렌더링하는 경우에만 사용
- 페이지 요청 시마다 실행됨
- **정말 필요한 때만** 사용할 것 (CDN에 캐싱되지 않아 느림)! 데이터를 미리 렌더링할 필요가 없다면 클라이언트 측에서 데이터 페칭하기.

## 정적 사이트 생성 (SSG)

### getStaticProps

- 정적 페이지 생성 방식(Static Site Generation),
- 항상 서버에서 실행 (CSR 아님)
- 빌드(번들링) 단계에서 data fetching, JSON으로 저장하여 고정적으로 사용함
- 가져온 데이터를 Props에 담고 리턴하여 컴포넌트에 전달
- 페이지 요청 때마다 데이터를 가져오는게 아니라 성능 측면에서 뛰어남
- **빌드 후 고정된 내용**을 보여주는 페이지, SEO를 위해 속도가 빨라야하는 페이지에 적합

### getStaticPaths

`pages/[id].tsx`같은 형태의 다이나믹 라우팅 페이지 중 빌드 단계에서 **정적으로 생성할** 페이지를 정함

## fallback (true, false, blocking)

Next.js에서 fallback은 사용자가 `getStaticPaths`에서 만들어지지 않은 페이지에 접속했을 경우를 말한다.  
이런 상황에 fallback값을 두어 404를 띄우거나, 다른 방법으로 생성한 페이지를 보여줄 수 있다.

### fallback: true

`getStaticPaths`에서 만들어지지 않은 페이지에 접속했을 경우, 먼저 사용자에게 fallback 페이지를 보여줌.
이후 서버에서 static하게 페이지를 만들고 해당 페이지를 사용자에게 보여줌.

```js
// fallback = true일때 fallback 페이지

if(router.isFallback) {
    return <Loading />
}
```

### fallback: false

`getStaticPaths`에서 만들지 않은 페이지는 404로 연결됨

### fallback: blocking

`getStaticPaths`에서 만들지 않은 페이지에 접속하면 사용자에게 SSR한 static 페이지를 보여줌.
(동적 라우팅 페이지를 정적 페이지로 제공해야할 때 사용)

## 클라이언트 사이드 렌더링 (CSR)

10 페이지가 있으면 10페이지의 js 번들 파일을 모두 불러옴 vs SSR: 해당 페이지 (10분의 1)만 불러오면 되므로 초기 로딩속도가 빠름.


내가 보려고 쓰는 Next.js SSR 메서드 비교


## MDXRemote를 선택한 이유

블로그를 운영하면서 마크다운 문법에 익숙해졌고, 그동안 써둔 글이 다 마크다운이었기 때문이다. 
정적 블로그를 만들거라 포스트를 직접 코드에 넣어야하는데 하나하나 HTML로 바꿔선 넣을 수 없으니까
방안을 찾아보다가 발견한 MDX. Markdown을 JSX로 적을 수 있다니 정확히 내가 찾던 거였다!!! 😘

## next-mdx-remote 사용법

1. Next.js의 `getStaticProps` 함수 안에서 마크다운 파일을 `fs`로 읽어온다.
2. `gray-matter` 라이브러리의 `matter` 함수로 마크다운의 내용물을 frontmatter와 content로 구분해 추출&파싱한다.
3. `next-mdx-remote`의 `serialize` 함수로 markdown을 mdx로 변환한다.

```js
// getStaticProps
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { slug } = params as SlugInterface;

  // 1
  const markdownToMeta = fs.readFileSync(
    path.join(dir, slug + '.mdx'),
    'utf-8'
  );

  // 2
  const { content } = matter(markdownToMeta);

  const posts = await getAllPosts();
  const post = posts.find(p => p?.slug === slug);
  
  // 3 
  const mdxSource = await parseMarkdownToMdx(content);

  return { props: { post, mdxSource} };
};
```


리액트 앱에서 마크다운을 띄워줄 수 있는 라이브러리를 찾아야했다. 그래서 찾은 건 MDX Remote!

next-mdx-remote로 next.js에 마크다운 적용하기


요즘 핫한 리액트 프레임워크 `next.js`!!  
처음 `next.js`를 알게 된 건 next.js로 만든 멋진 웹사이트를 보고 나서부터였다. 
그이후로 점점 next.js의 이름을 많이 들었더니, 관심이 안 생길 수가 없었다 👀  
documentation을 좀 읽어보는데 쉽게 따라할 수 있는 튜토리얼이 있다고 해서 한번 따라해봤다.  
그리고 배운 것들을 정리해 보겠음 📂

## Next.js

![nextjs](https://nextjs.org/static/images/learn/foundations/next-app.png)

Next.js는 리액트 프레임워크 중 하나다. 위 사진 속에 보이듯 routing, data fetching, SSR 등을 할 수 있게 해준다.  
리액트를 쓸 때 라우팅을 하려면 `react-router-dom`을 따로 쓰고 설정을 해줘야했는데, next.js를 쓰면 얘가 알아서 해준다.  
여러모로 개발자가 리액트로 개발하는데 아주 큰 도움을 준다! (잠깐 써보고 벌써 체감했다.)

또 개발 단계의 앱을 프로덕션 단계로 만들고 싶을 때 Rust로 만들어진 Next.js 컴파일러가 프로덕션 최적화를 한다.
이 때 앱을 **컴파일**(브라우저가 이해하는 언어로 변환),
**번들**(웹 페이지에서 필요한 파일 수를 줄이기 위해 의존성 모듈이나 파일을 합치는 것),
**minify**(불필요한 코드, 여백을 줄여 파일 사이즈 줄임),
**코드 스플릿**(페이지에서 필요한 코드만 로딩해 앱의 초기 로드 시간을 줄이고자 앱 코드들을 작은 번들로 나누는 것)을 해
프로덕션 단계로 만든다. 

프로덕션 준비가 완료된 빌드 단계에서 Next.js 앱은 아래 네가지 파일을 갖게 된다. 
빌드가 완료되면 유저들이 사용할 수 있는 런타임 단계가 된다.

1. 정적 생성(SSG)된 HTML 파일들
2. 서버에서 렌더링할 JS 코드
3. 클라이언트에서 인터랙티브한 페이지를 만들 JS 코드
4. CSS 파일

## 렌더링

Next.js에서 가능한 렌더링 방법은 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)이 있다. 
이 중 SSR과 SSG는 

### Pre-rendering

![pre-rendering](https://nextjs.org/static/images/learn/data-fetching/pre-rendering.png)

Next.js는 모든 페이지를 pre-render한다. 클라이언트 쪽의 JS가 아니라 
Next.js가 모든 HTML 페이지를 미리 만들어놓는다. 성능과 SEO 결과가 더 좋아진다.
만들어진 각각의 HTML은 그 페이지에서 필요한 최소한의 JS 코드를 포함한다. 
브라우저에서 페이지가 load되면 그때 그 JS 코드가 실행되어 페이지를 더 인터랙티브하게 한다. (이 과정을 **hydration**이라고 한다.)  
`<Link/>`같은 인터랙티브 컴포넌트는 js가 로드된 후 사용가능하다.

브라우저에서 자바스크립트를 꺼두고 Next.js로 만든 페이지에 들어가보면 더 확실히 알 수 있다.  
Next.js가 우리의 웹앱을 정적 HTML로 만들어놓았다는 것을!
만약 그냥 리액트 웹앱이면 자바스크립트 없이 동작하지 않았을 것이다.  

### Pre-rendering의 2가지 방법 (정적 생성 & 서버사이드 렌더링)

Next.js에선 이 두 방법 중 뭐를 쓸지 내가 직접 고를 수 있고, 섞어서도 개발할 수 있다.
Static generation과 server-side rendering의 차이는 **언제 페이지의 HTML을 생성하느냐**다.  
(개발 모드에서는 무조건 매 요청마다 pre-render된다.)

#### Static Generation: 빌드 시에 HTML 생성

![빌드 시 HTML 생성](https://nextjs.org/static/images/learn/data-fetching/static-generation.png)

- 왠만하면 이게 좋다. 왜냐면 한번 빌드된 페이지를 쓰면 되니까 서버가 매 요청마다 페이지를 렌더링하는 것보다 훨 속도가 빠르다.

#### Server-side Rendering: 매 요청 시에 HTML 생성

![매 요청시 HTML 생성](https://nextjs.org/static/images/learn/data-fetching/server-side-rendering.png)

- 만약 자주 업데이트되는 데이터가 있거나 매 요청마다 페이지의 내용이 달라져야한다면 서버 사이드 렌더링을 쓰는게 좋다.
- 정적 생성 방식보다는 느릴지 몰라도 항상 up-to-date!

## getStaticProps로 데이터가 들어간 Static Generation하기

Next.js에선 페이지 컴포넌트를 export할 때 getStaticProps라는 비동기 함수를 같이 export할 수 있다.

### getStaticProps

- 프로덕션 시 빌드 타임에 실행됨
- 파일 시스템, API, DB 등의 외부 데이터를 fetch해와 페이지의 props로 return할 수 있다.

#### 사용법

lib 디렉토리를 만들고 `gray-matter`를 사용해서 데이터를 내보낸다.  
참고로 그냥 `await.fetch()`를 해서 API로 가져온 데이터도 사용할 수 있다.  
`getStaticProps`는 **page에서 export된 파일만 가능하다.**

```js
// lib/posts.js

import fs, { readdirSync } from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'posts') // current directory/posts

export function getSortedPostsData() {
    const fileNames = fs/readdirSync(postsDirectory)
    const allPostsData = fileNames.map(fileName => {
        const id = fileName.replace(/\.md&/, '') // .md 지우고 id로 설정

        const fullPath = path.join(postsDirectory, fileName)
        const fileContents = fs.readFileSync(fullPath, 'utf8') // path에 있는 파일 내용 읽어오기

        const matterResult = matter(fileContents) // post의 metadata(frontmatter)
        
        return {
            id,
            ...matterResult.data
        }
    })
    
    // 날짜별로 sort
    return allPostsData.sort(({ data: a}, {data: b}) => {
        if (a < b) {
            return 1
        } else if (a > b) {
            return -1
        } else {
            return 0
        }
    })
}
```

```js
// pages/index.js  
import { getSortedPostsData } from '../lib/posts'

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData  // prop으로 모든 블로그 포스트 넘겨주기
    }
  }
}

export default function Home({ allPostsData }) {
// ...
}
```

## 짱편한 라우팅

바로 위에서 언급한 next.js의 라우팅에 대해 이야기해보겠다. Next.js에서 한 페이지는 'pages' 폴더 안에 있는 한 파일 속 리액트 컴포넌트다.  
그래서 그 파일 이름으로 라우팅이 된다.

예를 들어 `pages/posts/first-post.js` 파일이 있으면 저절로 `posts/first-post` 로 경로가 설정된다.
다른 라우팅 라이브러리가 필요하지 않아서 진짜... 너무너무너무너무너무 편하다!!!

## Link

Next.js에서 다른 컴포넌트로 이동할땐 `<a/>` 태그 대신 `<Link/>` 태그를 사용한다.  
이때 중요한 점은 **클라이언트 사이드** navigation을 한다는 것이다.

### Client-side navigation

![client side nav](https://nextjs.org/static/images/learn/navigate-between-pages/client-side.gif)

위 이미지를 보면 페이지 전환이 일어나도 노란 CSS 설정이 계속 남아있다.
브라우저가 페이지 전체를 다시 로드하지 않고, client-side에서 navigation을 하기 때문에 일어나는 현상이다.
next.js의 `<Link/>`가 아니라 기본 html tag인 `<a/>`를 쓰면 브라우저가 전체 페이지를 새로고침하기 때문에 노란 CSS가 사라질 것이다.

그 외에도, client-side navigation은 자바스크립트를 이용해 페이지를 전환하기 때문에 브라우저의 기본 navigation보다 더 빠르다.

```javascript
export default function FirstPost() {
    return (
        <>
            <h1>First Post</h1>
            <h2>
                <Link href="/">
                   <a> Back to home</a>
                </Link>
            </h2>
        </>
    )
}
```

간단히 코드를 짜보면 이런식으로 `<Link>` 안에 `<a>`를 넣으면 된다. (링크 태그만 쓰는거 아님!)

## Code splitting and prefetching

**Next.js does code splitting automatically, so each page only loads what’s necessary for that page.**

Next.js는 자동으로 코드를 분리해줘서 페이지별로 로드된다.
처음에 홈페이지가 렌더될 때 다른 코드들은 같이 로드되지 않는다.
그렇기에 한 페이지에서 에러가 나도 다른 페이지들은 작동한다.

또 Link 태그가 브라우저의 viewport 안에 나타날 경우, Next.js가 자동으로 그 목적지 페이지의 코드를 미리 가져와둔다(prefetch).  
그래서 그 페이지로 좀 더 빠르게 이동할 수 있다.

## Static asset

- public 디렉토리 아래에 저장
- ```import Image from 'next/image'``` 컴포넌트를 쓰자.

### Nextjs의 ```<Image/>``` 를 쓰면 좋은 점

- 이미지 최적화해줌. WebP 지원되는 브라우저면 저절로 이미지 resizing을 도와준다.
- 심지어 외부 이미지 링크에서 가져오더라도 최적화가 가능하다. 그저 빛 ⭐️

### on-demand 최적화

- 빌드 시가 아니라 사용자 요청이 들어올때 이미지를 최적화한다. 이미지가 많아도 빌드 성능에 영향을 끼치지 않는다.
- lazy loaded! viewport에 들어올 때 이미지를 load한다.

## Third-Party JavaScript

```js
<Script
    src="https://connect.facebook.net/en_US/sdk.js"
    strategy="lazyOnload"
    onLoad={() =>
        console.log(`script loaded correctly, window.FB has been populated`)
    }
/>
``` 
앱에 부가적인 기능(analytics, ads, widgets)을 위한 스크립트들을 추가할 땐 `next/script`를 사용하자.
`strategy` 속성으로 언제 그 script가 로드될지를 지정할 수 있다.

## CSS Styling

Next.js에는 CSS-in-JS의 한 종류인 `styled-jsx`가 빌트인 내장되어있다.
리액트 컴포넌트 안에서 CSS를 쓸 수 있고, 또 CSS 스타일의 범위가 제한된다.**(=scoped)**  
styled-components나 emotion을 써본 사람에게는 더 쉬울 것이다.

### Layout Component

Next.js에서는 CSS 설정을 할 때도 도움을 준다. `className`을 설정하면 뒤에 랜덤한 문자열(해시)을 붙여 자동적으로 고유한 클래스 이름을 만들어준다.  
CSS 이름이 겹칠 걱정은 하지 않아도 된다!

`components/layout.js`에 `components/layout.module.css`를 적용하면 된다.  
[module.css](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)는 unique한 클래스 이름을 만들어 충돌을 방지해준다.

### API 등 서버와 소통하는 함수는 루트 디렉토리에

블로그 메인에서 recent posts (최근 글 목록)을 보여주고 싶었다. 
이럴 경우, 내 블로그는 SSR이라 **최근 글 목록을 가져오는 함수**를 컴포넌트에 넣으면 안 된다. 
그래서 루트 디렉토리에 Api 폴더를 만들고 거기다가 API 역할을 해줄 함수들을 작성해주는 게 좋다.

## Next.js 튜토리얼을 따라하며 느낀 점

튜토리얼이 친절하고 너~~~무 유용한 프레임워크라 그런가 배우면서 즐거웠다. 
리액트로 프로젝트를 할 때 추가로 불러와 쓰는 라이브러리가 많았다. 
그에 따라 설정할 것도 많아서 헷갈리곤 했는데 Next.js가 내게 도움을 주니 정말 마음에 든다. 
앞으로 많은 프로젝트를 Next.js로 하게 되지 않을까?


SSR 첫걸음, 더 쉬워진 라우팅, 클라이언트사이드 네비게이션...

NEXT.JS

'NEXT.JS'에 관한 글들을 모아봤어요.

Next.js SEO 하기 (검색엔진최적화)

내가 보려고 쓰는 Next.js SSR 메서드 비교

next-mdx-remote로 next.js에 마크다운 적용하기

Next.js 튜토리얼 직접 따라해보기