넥스트14 Next.js로 SNS x.com 클론코딩하기 - 15 Next 배포 모드 기존 페이지 라우터의 넥스트의 배포 모드에는 총 3가지의 모드가 있었다고 합니다. 앱 라우터에선 2가지 모드로 줄었다고 합니다. Static Mode Deploying: Static Exports | Next.js Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server. nextjs.org next.config.js 파일 안에 아래와 같이 output 속성을 export 로 지정해줍니다. /** @type {import('next').NextConfig} */ const nextCo.. 2024. 2. 22. Next.js로 SNS x.com 클론코딩하기 - 14 Next 의 캐시 https://nextjs.org/docs/app/building-your-application/caching Building Your Application: Caching | Next.js An overview of caching mechanisms in Next.js. nextjs.org 공식문서 참고 넥스트13 이후의 앱 라우터부턴 서버 컴포넌트가 도입되기도 하면서, 상대적으로 프론트 서버에 부하가 많이 늘게 되었다고 합니다. 그리고 넥스트 자체에서도 성능 개선과 비용 절감을 위해 많은 정보를 캐싱하는 것이 디폴트라고 해요. 위의 문서 내용은 이러한 캐싱에 대한 메커니즘에 대해 알 수 있으니 읽어보시는 것을 추천드립니다. 이 방식들은 프론트엔드의 최적화와 관련 있기 때문에 개발이 .. 2024. 2. 20. Next.js로 SNS x.com 클론코딩하기 - 13 메타데이터 https://nextjs.org/docs/app/building-your-application/optimizing/metadata#merging Optimizing: Metadata | Next.js Use the Metadata API to define metadata in any layout or page. nextjs.org 각 page.jsx / page.tsx 에서 export const metadata 를 통해 메타데이터를 직접 입력해줄 수 있습니다. 물론 layout 파일 또한 동일한 방법으로 메타데이터를 지정해줄 수 있으나 layout 과 page 동일 계층이라면 page 내용의 메타데이터로 보여지게 됩니다. export const metadata = { title: "홈 / .. 2024. 2. 19. Next.js로 SNS x.com 클론코딩하기 - 12 Optimistic update 복습 전 포스팅에도 언급했었지만 긍정적 업데이트는 곳곳에 잘 쓰이는 편이라 팔로우/언팔로우 기능을 가지고 복습 겸 정리를 합니다. Optimistic update 란 사용자가 서버에 요청 시 성공될거라는 가정(긍정적)으로 미리 UI를 업데이트 시켜준 다음 -> 서버 검증 후 -> 업데이트/롤백을 하는 방식 이 방식을 통해 동작에 대한 빠른 피드백을 받을 수 있어서 애플리케이션이 빠르게 반응한다고 느껴 UX 경험이 향상됩니다. 다만 의문점이 생길 수 있는 게, 그저 서버의 성능을 높이면 되는 문제라고 여길 수 있는데 이는 사용자의 네트워크 환경이 어떠냐에 따라 서버의 성능과는 무관하게 응답 속도가 달라질 수 있습니다. 그렇기에 그저 단순히 서버 성능을 높이면 되는 것과는 다.. 2024. 2. 18. 이전 1 2 3 4 다음
