✓ Next.js

Next.js 는 SSR( Server-Side Rendering )을 지원하는 React Framework 입니다.

⭐ SSR

SSR으로 다음과 같은 문제를 해결할 수 있습니다.

1. 검색 엔진 최적화, SEO

💡 검색 엔진 최적화 , SEO ( Search Engine Optimization )
SEO( 검색 엔진 최적화 )는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 의미합니다.

✅ CSR( Client-Side Rendering )

React에서 bundle.js 라는 번들된 JavaScript 파일은 React 코드가 JavaScript로 변환되어 생성된 파일입니다. 브라우저는 이 bundle.js 파일을 실행시켜 DOM을 그립니다.

이때 Server 에서 내려받는 HTML은 비어있는 상태인데,
이는 검색 엔진 최적화, SEO 를 불리하게 만듭니다.

Google 을 제외한 다른 검색엔진에서는 JavaScript 코드를 실행하지 않고, HTML 만 보고 검색 알고리즘을 돌리기 때문에 불리해지는 것입니다.


✅ SSR( Server-Side Rendering )

SSR 방식은 JavaScript 코드를 HTML 로 변환시켜 Server 측에서 내려주는 방식입니다.
즉, 브라우저가 JavaScript 코드를 실행하지 않아도 화면을 그릴 수 있습니다.

Server 에서 내려받는 HTML이 채워져있는 상태이므로 검색 엔진 최적화, SEO 가 가능합니다.

2. 대기 시간 감소

✅ CSR( Client-Side Rendering )

CSR 방식일 경우, Client 측에서 모든 JavaScript 파일을 로드하기 때문에 사용자의 대기 시간이 길어진다는 문제점이 있습니다.


✅ SSR( Server-Side Rendering )

SSR 방식은 Server 측에서 JavaScript를 로딩하기 때문에 Client 측에서 대기하는 시간을 줄일 수 있습니다.

✓ 주요 기능

1. hot reloading

개발 중 업데이트된 후 저장되는 코드가 자동적으로 새로고침됩니다.

2. automatic routing

pages 폴더에 있는 파일들이 해당 파일명으로 라우팅 처리됩니다.
예를 들어, pages 폴더 안에 about.js 파일이 있다고 하면 localhost:3000/about 에서 해당 파일의 내용을 확인할 수 있습니다.

public 폴더도 pages 폴더와 동일하게 라우팅 처리가 가능합니다.
단, 모든 사람이 페이지에 접근하는 경우를 고려해 지양하는 것을 권장합니다.

3. single file components

<style jsx> </style> 로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 CSS를 작성할 수 있습니다.

또한 <style jsx global> </style> 을 사용하면 글로벌 스타일 정의도 가능합니다.

// styled-jsx

function Heading(props) {
  const variable = "red";
  return (
    <div className="title">
      <h1>{props.heading}</h1>
      <style jsx>
        {`
          h1 {
            color: ${variable};
          }
        `}
      </style>
    </div>
  );
}

export default function Home() {
  return (
    <div>
      // red
      <Heading heading="heading" />
      // block
      <h1>ttt</h1>
    </div>
  );
}

4. global style

_app.js 에서 글로벌 스타일 정의가 가능합니다.
다른 컴포넌트에 정의할 경우 다른 클래스와 겹쳐 오류가 발생할 수 있기 때문에 _app.js 에서만 가능합니다.

ERROR >> Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).

// _app.tsx
  
import "./globals.css";

function MyApp({ Component, pageProps }) {
  return <Component ponent {...pageProps} />;
}

export default MyApp;

5. server side rendering

SSR( Server-Side Rendering )을 하기 때문에
SEO( 검색 엔진 최적화 )가 가능하고 Client 측의 대기 시간을 감소시킬 수 있습니다.

CSR( Client-Side Rendering )의 경우  페이지 소스보기 를 클릭하면 내부에 소스가 없지만,
SSR 은 내부 소스가 채워져 있는 것을 확인할 수 있습니다.

6. code splitting

dynamic import를 사용하면 코드 분할이 가능합니다.

코드 분할 ( Code Splitting )
원하는 페이지에서 원하는 JavaScript와 라이브러리를 렌더링하는 것을 말합니다.
모든 번들( chunck.js )이 하나로 묶이지 않고, 각각 나뉘어 더 효율적인 JavaScript 로딩 시간을 개선할 수 있습니다.

7. typescript

TypeScript 를 사용하기 위해 Webpack 이나 Babel 설정 과정이 필요 없습니다.
TypeScript 를 npm add typescript @types/node @types/react 설치하고 npm run dev 명령을 실행하기만 하면
자동으로 tsconfig 와 next-end.d.ts 가 생성되어 타입스크립트 코딩이 가능하게 됩니다.