Next.js 13.4 Built-in Optimizations 활용하여 진행한 성능 최적화
Images, Fonts ...
2023-09-12
Next.js
Next.js란?
Next.js is a React framework for building full-stack web applications
웹 앱을 구성하는 요소들은 UI, Routing, Data Fetching, Rendering 등 다양합니다.
React는 UI를 위한 자바스크립트 라이브러리입니다. UI는 웹 앱을 구성하는 요소 중 하나이며 완전한 웹 앱을 만들기 위해선 UI뿐만 아니라 그 외의 요소들을 위한 기능을 추가해주어야합니다.
Next.js는 리액트 프레임워크로서 웹 앱에 필요한 모든 기능과 최적화를 제공해주어 빠르게 풀스택 웹 어플리케이션을 만들 수 있도록 해줍니다.
Main Features
Built-in Optimizations
사용자 경험 및 핵심 웹 지표(Core Web Vitals)를 향상시키기 위한 이미지, 폰트, 스크립트 최적화
Dynamic HTML Streaming
Instantly stream UI from the server, integrated with the App Router and React Suspense.
여기서 "스트리밍"은 UI를 조각내어 조금씩 전달하는 것을 의미합니다. 서버가 UI 조각을 조금씩 전송하고, 클라이언트는 그때마다 화면에 일부를 더 빠르게 표시합니다. 🥒
풀어 설명하자면, 리액트 서스펜스와 앱 라우터를 함께 사용하면, 서버에서 UI 조각을 조금씩 전달하더라도 그것이 바로바로 화면에 그려질 수 있게 됩니다. 이는 사용자가 화면을 빠르게 볼 수 있도록 도와주며, 데이터를 가져오는 동안 로딩 화면을 표시하고, 데이터가 준비되면 즉시 화면에 렌더링될 수 있게 해줍니다.
React Server Components
최신 React 18 기능으로 구현된 서버 컴포넌트. 클라이언트 코드 없이도 컴포넌트를 생성할 수 있습니다.
Data Fetching
React 컴포넌트를 비동기로 만들고 데이터를 기다릴 수 있습니다. Next.js에서는 서버, 클라이언트 모두에서 데이터를 불러올 수 있습니다.
CSS Support
CSS 모듈, Sass, Tailwind CSS, styled-jsx 등 선호하는 방식으로 앱을 스타일링할 수 있습니다.
Client and Server Rendering
페이지 단위로 유연한 렌더링 및 ISR을 포함한 캐싱 옵션을 제공합니다.
Node.js & Edge Runtimes
서버리스 함수를 사용하여 확장 가능한 솔루션을 구축하고, 엣지를 활용하여 빠르고 동적인 맞춤형 콘텐츠를 제공합니다.
Route Handlers
서드파티 서비스에 안전하게 연결하기 위해 API 엔드포인트를 구축하고 프론트엔드에서 사용됩니다.
Advanced Routing & Nested Layouts
파일 시스템을 사용하여 경로를 생성하며, 더 복잡한 라우팅 패턴과 UI 레이아웃을 지원합니다.
Middleware
받은 요청을 컨트롤 할 수 있습니다. 라우팅이나 인증 등을 위한 접근 로직에 활용할 수 있습니다.
👇 아래는 위의 내용과 관련하여 문서에서 가져온 내용입니다. (복습용)
Building Blocks of a Web Application
- User Interface - how users will consume and interact with your application. we mean the elements that users see and interact with on-screen.
- Routing - how users navigate between different parts of your application.
- Data Fetching - where your data lives and how to get it.
- Rendering - when and where you render static or dynamic content.
- Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them.
- Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc).
- Performance - how to optimize your application for end-users.
- Scalability - how your application adapts as your team, data, and traffic grow.
- Developer Experience - your team’s experience building and maintaining your application.
React
React is a JavaScript library for building interactive user interfaces.
By library, we mean React provides helpful functions to build UI, but leaves it up to the developer where to use those functions in their application.
It also means, however, that building a complete React application from the ground up requires some effort. Developers need to spend time configuring tools and reinventing solutions for common application requirements.
Next.js
Next.js is a React framework that gives you building blocks to create web applications.
By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.
You can use React to build your UI, then incrementally adopt Next.js features to solve common application requirements such as routing, data fetching, integrations - all while improving the developer and end-user experience.
Next.js - Main Feature
Built-in Optimizations
Automatic Image, Font, and Script Optimizations for improved UX and Core Web Vitals.
Dynamic HTML Streaming
Instantly stream UI from the server, integrated with the App Router and React Suspense.
React Server Components
Add components without sending additional client-side JavaScript. Built on the latest React features.
Data Fetching
Make your React component async and await your data. Next.js supports both server and client data fetching.
CSS Support
Style your application with your favorite tools, including support for CSS Modules, Sass, Tailwind CSS, styled-jsx, and more.
Client and Server Rendering
Flexible rendering and caching options, including Incremental Static Regeneration (ISR), on a per-page level.
Node.js & Edge Runtimes
Build scalable solutions with Serverless functions, and deliver fast dynamic, personalized content with the Edge.
Route Handlers
Build API endpoints to securely connect with third party services and consume from your frontend.
Advanced Routing & Nested Layouts
Create routes using the file system, including support for more advanced routing patterns and UI layouts.
Middleware
Take control of the incoming request. Use code to define routing and access rules for authentication, experimentation, and internationalization.
참고, 이미지 출처
유현지
안녕하세요
