Next.js 기본개념

Next.js의 필요성 - CSR과 SSR의 장점만을 뽑아냄

 

예전에, 그러니까 코드스테이츠에서 한창 Section2에서 머리싸매고 있던 시절

CSR SSR을 공부하면서 Next.js라는게 있구나.. 정도만 알게 되었다.

 

CSR을 사용하면 페이지간 전환은 빠르지만, 초기 렌더링은 SSR에 비해 느린편이다. 빈 HTML 위에 브라우저가 전부 렌더링시켜야 하기 때문이다. 반면 SSR은 서버에서 전달받은 완성된 HTML을 바로 렌더링 하는 방식이라 초기 렌더링이 빠르다. 한편 페이지 전환시마다 완성된 HTML을 매번 서버에서 전달받아야 하기 때문에 전환속도가 느리다. 

 

또한 SEO이야기를 잠깐 하자면, SEO는 초기 html을 분석하는데, CSR을 채택한 페이지의 경우 초기 html이 빈 페이지이기 때문에 SEO에서 아주 큰 불이익을 받게 된다. (untitled가 뜨거나 검색엔진 노출이 안될수도)

 

Create React App으로 만든 리액트 역시 public폴더의 index.html에, 정확히는 <div id = "root" > 태그에 브라우저가 js파일들을 렌더링 시키기 때문에 CSR이다.

Create React App으로 만든 리액트, public 폴더의 index.html과 src폴더의 index.js

리액트 기반의 SSR환경을 만들 때 가장 간단한 방법은 Next.js를 이용해 SSR을 구성하는 것으로 알려져 있다.

React 공식 문서에도 명시되어 있을만큼 Next.js는 SSR을 구성하기에 훌륭한 프레임워크이다.

 

Next.js를 이용하면 첫 렌더링만 SSR방식을 사용하여 초기 렌더링 속도를 높히고, 그 이후 페이지 전환속도는 기존 CSR의 성능을 유지할 수 있는것이다.

---

Next.js 핵심기능

Next.js는 단순히 초기 렌더링을 SSR로 바꾸어주는 기능만 있는것이 아니다.

 

automatic routing

pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다. (pages/page1.tsx -> localhost:3000/page1)

 

code splitting

2주프로젝트 시작 전 리덕스를 공부하다 우연히 최적화를 알게 되었는데, 그때부터 code splitting은 관심이 있던 내용이었다.

다만 이런저런 핑계로 한번도 코드 작성을 해보지 못했다.(않았다..) 

 

dynamic import를 이용하여 손쉽게 코드 스플리팅이 가능한데, 코드 스플리팅을 통해 내가 원하는 페이지에서 원하는 컴포넌트를 렌더링 할 수 있게 된다. 이렇게 되면 좀 더 효율적으로 로딩 시간을 개선할 수 있게 된다.

 

동적 url

가변적으로 변하는 url에 동적 url을 지원한다.

이부분은 참고한 페이지의 자료를 그대로 옮겨 쓰는것이 좋을 것 같다.

// pages/[id].tsx

import { useRouter } from "next/router";

export default () => {
  const router = useRouter();

  return (
    <>
      <h1>post</h1>
      <p>postid: {router.query.id}</p>
    </>
  );
};

위처럼 작성하면 localhost:3000/123 으로 접속시 postid 가 123으로 나옵니다.

pages/[값].tsx 왼쪽 페이지 구조의 값은 router.query.값과 동일합니다.

그 밖 주의사항

• 페이지간 이동시 a 태그 쓰지말고 Link 사용하기

 

 

---

참고자료 

https://kyounghwan01.github.io/blog/React/next/basic/#next-js%E1%84%80%E1%85%A1-%E1%84%8C%E1%85%A6%E1%84%80%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%AD-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC

 

https://medium.com/@msj9121/next-js-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90-8727f76614c9

 

https://velog.io/@sunaaank/React-deep-dive

 

https://ko.reactjs.org/docs/create-a-new-react-app.html#nextjs