본문 바로가기

Web Study124

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.
Next.js redirects 설정 샘플 데이터를 작성하다가 redirects 설정이 필요한 페이지를 발견했고, 해당 페이지를 굳이 use client 를 써서 useRouter 훅을 써야하나 싶은 마음에 검색했다가 알게 되었다. 그리고 무엇보다 페이지딴에 클라이언트 컴포넌트라니 뭔가 찝찝한... https://nextjs.org/docs/app/api-reference/next-config-js/redirects#header-cookie-and-query-matching next.config.js Options: redirects | Next.js Add redirects to your Next.js app. nextjs.org 해당 공식 문서에 따르면 next.cofig.js 파일 안 모듈 안에 비동기로 redirects 함수를 아래처.. 2024. 2. 17.

티스토리툴바