[번역] Next.js

번역 https://nextjs.org/learn/foundations/about-nextjs
본 글은 Next on Vercel의 글은 번역 및 해석 정리한 글입니다.

용어

• hydrate :
  서버에서 렌더링된 HTML 페이지와 JS 파일을 클라이언트에게 보내면, 클라이언트에서 HTML 파일에 JS 코드를 매칭 시키는 작업. 이벤트 등록이나 스타일 적용이 일어난다. SSR과 SSG 모두 Hydrate가 일어나는데, SSG의 경우 빌드타임에 query 가 없기 때문에 런타임에서 query에 대한 hydrate가 일어난다.
• SSR(Server-side Rendering) : 페이지에 대한 요청이 있을 때마다 (프론트)서버에서 페이지를 만들어 반환한다. 서버에서 매번 연산을 해야하며 캐시를 사용하는 것이 상대적으로 어렵기 때문에 SSG에 비해 느리다. 하지만 항상 최신의 정보를 보여주어야하는 경우, SSR를 사용하는 것이 좋다.
• SSG(Static-site Generation) : 빌드시 HTML 파일을 미리 렌더링하는 것이 SSG. 정적인 페이지에 주로 쓰인다. HTML 파일을 미리 생성하기 때문에 서버에서 매번 연산을 하지 않아도 될 뿐 아니라, 별다른 설정 없이 CDN 캐시 사용이 가능하기 때문에 SSR 보다도 훨씬 빠른 속도를 보여준다.
• CSR(Client-side Rendering) : 뼈대가 되는 빈 HTML 과 JS 파일을 전부 가져와 클라이언트(브라우저) 측에서 HTML 을 구성하는 방식이다. 초기에 빈 HTML 파일을 보여준 후 API 요청을 통해 데이터를 받아와 다시 렌더링 하기 때문에 사용자가 화면을 인식하는데 상대적으로 오래걸린다. 하지만 초기 로딩 후 버튼이나 링크를 클릭해 페이지간 전환이 일어날 때 클라이언트에서 화면을 다시 구성하므로 화면 전환 속도가 빠르다.

Introduction

효과적으로 Next.js를 사용하기 위해, JavaScript, React, 그리고 연관된 웹 개발 컨셉들을 이해하는 것은 많은 도움이 됩니다. 하지만 JavaScript와 React는 매우 광범위한 주제입니다. 그렇다면 ! Next.js를 배우기 위해 어떤 준비를 해야할까요 ?

본 글을 통해 간단한 프로젝트를 차근차근 시작해볼 수 있습니다. JavaScript application으로 시작해서, React, NextJs로 옮겨갑니다.

본 글에서는 HTML, CSS, JavaScript의 기본 지식을 가지고 있다고 가정합니다. 만약 React에 친숙하신 분이라면 'Getting Started with Next.js', 'Creat your first Next.js app'은 생략하실 수 있습니다.

What is Next.js?

Next.js는 빠른 웹 어플리케이션을 개발하기 위한 빌딩 블록을 제공하는 유연한 React framework입니다.

하지만 정확이 이게 무엇을 의미하는 걸까요 ?

React와 Next.js가 어떻게 도움을 줄 수 있는지 알아봅시다.

Building Blocks of a Web Application

우리는 현대적인 어플리케이션을 만들기 위해 고려해야할 몇 가지 사항이 있습니다.

• UI(User Interface) - 어떻게 유저가 사용하고 어플리케이션과 상호작용할지

• Routing - 어떻게 유저가 어플리케이션의 다른 두 화면을 탐색할지

• Data Fetching - 데이터가 저장된 위치와, 어떻게 그 데이터를 가져올지

• Rendering - 언제 그리고 어디에 static 또는 dynamic한 콘텐츠를 rendering할지

  	Rendering
  	- SSR(Server-Side Rendering) - rendering a client-side or universal app to HTML on the server.
  	- CSR(Client-Side Rendering) - rendering an app in a browser, generally using the DOM.
  	- Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data.
  	- Prerendering: running a client-side application at build time to capture its initial state as static HTML.

• Integrations(통합) - 어떤 써드파티 서비스를 사용할지(CMS, auth, payments, etc..) 그리고 어떻게 연결할지

• Infrastructure - 어플리케이션 코드를 어디에 배포하고 저장하고 실행할지(Serverless, CDN, Edge, etc)

• Performance(수행능력) - 최종 사용자를 위해 어플리케이션을 어떻게 최적화할지

• Scalability(확장성) - 팀, 데이터 및 트래픽이 증가함에 따라 어플리케이션이 어떻게 적응하는지

• Developer Experience - 개발자가 어플리케이션 구축함과 유지에 있어 좋은 경험을 제공받는지

위와 같은 사항들을 만족하기 위해 개발자는 스스로 방법을 찾던지 다른 도구와 프레임워크를 사용할지 결정해야합니다.

What is React

React는 JavasScript 라이브러리로, 상호작용 가능한 User Interface를 구축하기 위해 사용합니다.

User Interface는 화면에서 사용자가 볼 수 있고 상호작용이 가능한 요소들을 의미합니다.

라이브러리로써 React는 UI를 구축하는데 유용한 함수를 제공합니다. 하지만 어디에 이러한 함수를 사용할지는 개발자에게 맡겨집니다.

React가 성공한 한 이유로써 React는 구축에 있어 자유도가 높습니다. 강한 의견을 내지 않고 비교적 자유롭습니다. 이러한 특징의 결과로 다른 서드파티와 많은 솔루션들이 탄생하였습니다.

하지만 이러한 의미는 결과적으로 React로 어플리케이션을 구축하기 위해선 노력이 필요합니다. 개발자는 다른 도구들을 이해하고 해결법을 찾아내기 위해 노력해야합니다.

What is Next.js?

Next.js는 빠른 웹 어플리케이션을 개발하기 위한 빌딩 블록을 제공하는 유연한 React framework입니다.

프레임워크로서 Next.js는 React에 필요한 도구 및 구성을 처리하고 추가 구조, 기능, 최적화 기능을 제공합니다.

---

Conclusion

당신은 React를 사용해 UI를 구축하고, 점진적으로 Next.js를 적용해나갈 수 있습니다. 최종 사용자 경험과 개발자 경험을 향상시키기면서 일반적인 어플리케이션이 요구하는 기능들, routing, data fetching, integrations 에 대한 기능들을 제공합니다.

개인 개발자이든 대규모 팀의 일원이든 React와 Next.js를 활용하여 완전한 대화형, 매우 동적이고 성능이 뛰어난 웹 애플리케이션을 구축할 수 있습니다.