22.2.20 (일) +28days
Production
실제로 서비스를 배포하기 전에 고려해야 할 부분들
https://nextjs.org/docs/going-to-production
In General
- Use caching wherever possible.
- Ensure your database and backend are deployed in the same region.
- Aim to ship the least amount of JavaScript possible.
- Defer loading heavy JavaScript bundles until needed.
- Ensure logging is set up.
- Ensure error handling is set up.
- Configure the 404 (Not Found) and 500 (Error) pages.
- Ensure you are measuring performance.
- Run Lighthouse to check for performance, best practices, accessibility, and SEO. For best results, use a production build of Next.js and use incognito in your browser so results aren't affected by extensions.
- Review Supported Browsers and Features.
- Improve performance using:
- [next/image and Automatic Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)
- Automatic Font Optimization
- Script Optimization
- Improve loading performance
Caching
Caching improves response times and reduces the number of requests to external services. Next.js automatically adds caching headers to immutable assets served from /_next/static including JavaScript, CSS, static images, and other media.
Cache-Control: public, max-age=31536000, immutable
Reducing JavaScript Size
To reduce the amount of JavaScript sent to the browser, you can use the following tools to understand what is included inside each JavaScript bundle:
- Import Cost – Display the size of the imported package inside VSCode.
- Package Phobia – Find the cost of adding a new dev dependency to your project.
- Bundle Phobia - Analyze how much a dependency can increase bundle sizes.
- Webpack Bundle Analyzer – Visualize size of webpack output files with an interactive, zoomable treemap.
Each file inside your pages/ directory will automatically be code split into its own JavaScript bundle during next build. You can also use Dynamic Imports to lazy-load components and libraries. For example, you might want to defer loading your modal code until a user clicks the open button.
Logging
Error Handling
When an unhandled exception occurs, you can control the experience for your users with the 500 page. We recommend customizing this to your brand instead of the default Next.js theme.
You can also log and track exceptions with a tool like Sentry. This example shows how to catch & report errors on both the client and server-side, using the Sentry SDK for Next.js. There's also a Sentry integration for Vercel.
정리
캐싱 / DB - BE 동일 region
JS code는 최소화 / js bundle 로드 타이밍 최적화
로깅 / 오류처리 / 404, 500 페이지 커스텀
Lighthouse로 성능 측정 / 지원 브라우저 및 기능 검토
기타 성능 향상
Javascript bundle size 고려
- import cost
- package phobia
- bundle phobia
- webpack analyzer
Deployment (배포)
https://nextjs.org/docs/deployment
https://nextjs.org/learn/basics/deploying-nextjs-app
Vercel을 활용한 배포 예제
Github 계정을 만든다.
블로그 예제를 그대로 github에 올린다.
vercel에 가입한다.
프로젝트를 import 한다.
deploy 한다.
PR을 올리면 vercel이 알아서 preview를 만들어준다.
Merge 하면 재배포도 알아서 해준다.
정리
제품으로서의 웹 ⇒ 실제 배포 전에 고려해야 하는 점들
번들 사이즈 ⇒ 번들 포비아 / Webpack analyzer
Deploy Vercel ⇒ Github와 연동
PR ⇒ 새로운 PR 생성시 Preview 제공
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
댓글