Next.js

Next.js의 Pre-Rendering(SSR vs SSG) 과 Hydrate

Pre-Render 와 Hydrate Next.js 는 기본적으로 모든 페이지가 pre-renders 된다. 이 말은 클라이언트에서 페이지가 만들어지는 것이 아니라 클라이언트로부터 페이지 요청을 받을 때 서버에서 그 요청받은 페이지가 바로 만들어지는 것을 말한다. 이렇게 만들어진 HTML 이 브라우저에서 로드될 때, 이 페이지에 필요한 JS파일이 실행되어 해당 페이지가 interactive 해질 수 있도록 한다. 이 과정을 Hydrate라고 한다. 즉, Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다. 브라우저에서 pre-render 된 HTML 이 ..

Next.js redirects 와 rewrites | API KEY 숨기기

/** @type {import('next').NextConfig} */ const API_KEY = process.env.API_KEY; const nextConfig = { reactStrictMode: true, swcMinify: true, async redirects() { // 유저가 알 수 있음. 경로가 바깥에 드러남. return [ { source: "/old-blog/:path*", destination: "/new-sexy/:path*", // 외부로도 리다이렉트 가능, * 붙이면 뒤의 경로 모두 유지되면서 리다이렉트 permanent: false, // status code => false: 307(임시 리다이렉트), true: 308(영구 리다이렉트) }, ]; }, async r..