인사
안녕하세요~ 고영이에요. 👋
오늘은 next.js 개발중에 겪은 삽질을 적어보려고 해요.
Next.js
Next.js는 SSG, SSR, CSR을 모두 지원하는 정말 짱짱한 FE 프레임워크에요.✨
-
SSG는 Static Site Generation 이라고 해서, 정적 페이지를 빌드타임때 미리 만들어 놓는 기능이에요.
예를들어 제 블로그의 게시글이 1번부터 50번까지 있으면 미리 50개 페이지를 만들어 놓고, 사용자가 페이지에 접근하면 미리 만들어 놓은 페이지를 제공하는거죠! 그러면 사용자는 아주 빠르게 페이지를 로드할 수 있어요. 그리고 곧이어 CSR이 작동하면서 상호작용이 가능한 페이지가 돼요.
단점은, 빌드 타임 때 페이지가 생성되기 때문에 빌드 이후에 생긴 페이지는 SSG로 제공하지 못해요! 그런 경우 아래의 SSR이 필요해요. -
SSR은 Server Side Rendering 이라고 해서, 사용자가 요청시에 서버에서 페이지를 만들고 이를 응답으로 줘요. 런타임에 동작하므로 모든 페이지를 응답해줄 수 있어요.
단점은, 페이지를 미리 만들어 놓지 못하고 요청시에 만들기 때문에 SSG에 비해서 속도가 느려요. -
CSR은 Client Side Rendering 인데요. 서버에서 페이지를 제공해주지 않고, 사용자의 브라우저에서 js를 내려받고 페이지를 만들어요. 페이지가 생성되면 곧바로 상호작용이 가능하고 서버를 고려하지 않아도 되기 때문에 제일 단순한 방법이에요.
단점은, 첫 페이지 로드가 많이 느린 편이에요.
제일 좋은게 뭐죠?
제일 좋은 방법은 각 방법의 장점들을 섞는 거에요!
Next.js는 위 기능을 제공해준답니다! 그 기능은 바로바로 getStaticPaths() 함수에요. page 폴더의 컴포넌트에 getStaticPaths를 export 하게되면 SSG 기능을 사용해서 페이지를 미리 만들 수 있어요. 아래 코드를 볼까요?
export async function getStaticPaths() {
return {
paths: [
{ params: { ... } } // See the "paths" section below
],
fallback: true, false or "blocking" // See the "fallback" section below
};
}
export default function SomePage() {
return <div> ... </div>
}
아래 params에 path로 사용될 값을 반환해주고, 그 아래 fallback에 필요한 값을 넣어주면 돼요. 이 때 중요한게 fallback에 어떤 값을 넣어주냐에요!
- false면 SSG 기능으로 동작해요. 해당 경로의 페이지가 없을 경우 404 페이지를 응답해줘요.
- true면 SSG + SSR로 동작해요. 해당 경로의 페이지가 없으면 fallback 화면을 보여주다가 서버에서 페이지를 만들어서 응답해줘요.
- 'blocking'이면 SSG + SSR로 동작해요. 해당 경로의 페이지가 없으면 화면을 멈추고 서버에서 페이지를 만들어서 응답해줘요.
그런데 무슨 문제가?
저는 깃헙에서 무료로 제공하는 스태틱 서버인 gh-pages를 자주 사용해요. 그런데 문제는 gh-pages에서 fallback 기능이 제대로 동작을 안하는거에요. 404 페이지가 계속 나타나길래 이상하다고 생각했어요.
구글링을 해보니 스태틱 서버일 경우 SSR 기능을 사용할 수 없다고해요! Next.js가 서버에서 동작하고 있어야 SSR로 페이지를 만들고 응답해주는데, 정적 서버에서는 SSR이 불가능해서 404 페이지가 나오는 거였어요.
결국 동적 서버로 서비스를 옮기거나, SSR을 포기해야 하는 상황인거죠. 😭
그래서 어떻게 했죠?
동적 서버로 옮길까도 생각했는데, 무료 서버를 찾기가 좀 어렵더라구요;; 그리고 제가 만든 서비스가 단순해서 굳이 비싼 요금을 내가며 동적 서버로 운영할 필요까지는 못느끼겠더라구요. 그래서 정적 서버 + 정적페이지 + 쿼리를 조합해서 사용해보기로 했어요.
memo 페이지에 Next.js에서 제공하는 dynamic pages를 사용하고 있었는데, 이를 정적 페이지로 변경했어요.
[memoId].tsx -> memo.tsx
그리고 path 뒤에 쿼리를 붙여서 ~/memo?memoId=123 이렇게 변경했어요. 이렇게 하면 memo는 빌드할때 데이터가 비어있는 정적 페이지가 생성돼요. 그리고 데이터를 불러오기 전까지 스켈레톤 스타일을 사용해서 로딩 화면을 보여줬고, 데이터를 불러오면 데이터를 화면에 보여줬어요.
이렇게 하면 404페이지가 뜨지 않고, 정적 페이지를 동적 페이지인 것 처럼 구성할 수 있어요.
마치며
SSR을 제공하지 못하는게 조금 아쉽기는 하지만 서비스에 문제가 있는 정도는 아니기에 이정도면 괜찮아서 만족하고 있어요.
Next.js를 프로덕트로 만들게될 기회가 생기면 꼭 동적 서버를 사용해서 SSR을 구현해봐야겠어요. ㅎㅎ
여러분도 Next.js로 즐거운 코딩하세요~
바이바이~ 👋
