React 생태계에서 유명한 Dan Abramov가 Next.js로 클라이언트 전용 SPA를 구성하는 예제 코드를 Gist에 올려두었습니다. 평소에 Next.js에서 서버를 띄우지 않고 100% 정적 파일로만 SPA를 구성하는 방법에 질문을 많이 받았지만 가능함에도 불구하고 Next.js 문서에는 설명이 잘 나와있지 않았다고 한다. 이는 아마 Vercel이 원하는 Next.js의 사용이 아니기 때문에 해당 부분을 강조하지 않고 있다. 이 구조는 SPA 임에도 index.html을 하나만 두고 구성하는 것보다는 라우팅마다 HTML 페이지를 두는 것이 더 나은 구조이고 getStaticProps + getStaticPaths로 여러 HTML 파일을 미리 생성할 수 있기 때문에 100% 정적 컨텍츠로 호스팅 할 수 있는 구조입니다. 그리고 이후에 서버가 필요해 졌을 때 재작성없이 바로 서버를 추가할 수 있습니다.

Next.js SPA example with dynamic client-only routing and static hosting

GitHub

Next.js SPA example with dynamic client-only routing and static hosting

더 많은 콘텐츠를 보고 싶다면?

또는

이미 회원이신가요?

2023년 4월 10일 오후 3:15

 • 

저장 25조회 2,979

댓글 1

함께 읽은 게시물

QA엔지니어는 무엇을 하고, 어떻게 준비해야 할까?

... 더 보기

쏘카 QA는 무슨 일을 하고 어떻게 일하나요?

SOCAR Tech Blog

쏘카 QA는 무슨 일을 하고 어떻게 일하나요?

AI와 코딩할 때, 혹시 결과만 말하고 계신가요?
얼마 전 프로필 페이지를 AI와 함께 만들면서 이상한 걸 발견했어요.

... 더 보기

- YouTube

youtu.be

 - YouTube

 • 

저장 13 • 조회 1,381


Partitioner와 Multi Thread를 활용한 Spring Batch 성능 개선

... 더 보기

Partitioner와 Multi Thread를 활용한 Spring Batch 성능 개선

I'm Prostars

Partitioner와 Multi Thread를 활용한 Spring Batch 성능 개선

인정에 목마른 사람에게



... 더 보기

길은 잃은 이력서



... 더 보기

기초 프로그래밍을 좀 더 열심히 공부할 걸..

... 더 보기