NEXT.js 파먹기 #preRendering

공식문서로 Next.js 속성 공부 중. #핵심개념 #요약정리

Pre-rendering

• 장점: Better performance and SEO
• 특징: 페이지별 pre-rendering 여부 설정 가능

🌞 1. Static Generation

• pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request
• getStaticProps()
• 페이지 예시: Marketing pages, Blog posts, E-commerce product listings, Help and documentation, etc

🌝 2. Server-side Rendering

• pre-rendering method that generates the HTML on each request.
• getServerSideProps(context)
• You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration
• Good when you cannot pre-render a page ahead of a user's request, shows frequently updated data, and the page content changes on every request

Client-side Rendering

• Combo: Static Generation without Data + Fetch Data on the Client-side
• When the page loads (at request time), fetch external data from the client using JavaScript and populate the remaining parts
• 페이지 예시: User Dashboard pages
  • because a dashboard is a private, user-specific page, SEO is not relevant, and the page doesn’t need to be pre-rendered. The data is frequently updated, which requires request-time data fetching
• SWR: React hook for data fetching on the client side
  • handles caching, revalidation, focus tracking, refetching on interval, and more