[Front-end] CSR / SSR (with Next.js)

CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점은?

초기에는 빈  HTML을 가지고 있고, 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식을 의미한다.

(React, Angular, Vue)

•  장점
  • 변경되는 부분만 다시 렌더링 되므로 화면 깜빡임이 없음
  • 초기 로딩 이후 구동 속도가 빠름
  • TTV와 TTI 사이 간극이 없음
  • 필요한 데이터만 서버에 요청하므로 서버 부하를 줄임
• 단점
  • 초기 로딩시 모든 정적 리소스를 다운받아야 하므로 초기 로딩 속도가 느림
  • 초기에 빈 HTML파일을 가지고 있으므로 SEO 불리 (구글 크롤러봇은 JS도 실행가능하긴 하지만 다른 크롤러봇들은 대부분 JS를 이해못하는 경우가 많음)

• 단점 보완
  • 초기 로딩 속도 보완
    • code splitting
    • tree - shaking
    • chunk 분리
  • SEO 개선
    • pre - rendering
  • SSR, SSG 도입

 

 

(+ 추가)SSR(Server Side Rendering)이란 무엇이며, 그것의 장단점은?

• 페이지 구성방식: MPA
• PHP, JSP
• 요청시 즉시 만드니깐 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합
• 사용자는 다 보고 있지만, 동작하지 않을 수도 있다 (TTV(Time to view) ≠ TTI(Time to interact))
• 장점
  • 초기 구동 속도가 빠름
  • SEO에 유리함
• 단점
  • 화면 깜빡임이 있음
  • TTV와 TTI 사이 간극이 있음
  • 서버 부하가 있음

---

 

SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유

 

우선 SPA라는 것은 한 개의 페이지로 구성된 애플리케이션을 의미한다.

 

화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고, 서버 측에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 애플리케이션에 비해 화면을 구성하는 속도가 빠르다.

 

따라서 SPA는 성능을 향상시키기 위해 SSR이 필요하다.

SSR을 활용하면 페이지 로딩을 빠르게 할 수 있고, SEO 최적화가 가능하다.

 

---

 

Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

• • https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
  • https://github.com/vercel/next.js/ (Next.js Github 레포지토리)

npx create-next-app@latest

명령어 입력을 통해서 next.js 프로젝트를 세팅할 수 있다.

 

 

yarn start는 서버 실행,여기서 서버는 프로덕션 서버를 뜻합니다. 실제 환경에서 테스트할때 사용한다.
빌드를 해야 스타트가 동작한다. 

 

yarn build를 진행하지 않고 yarn start를 입력하면 에러가 나게 된다.

 

따라서 yarn build -> yarn start 순서로 진행해야 한다.

 

혹은 npm run build -> npm run start 로도 진행이 가능하다

 

Could not find a production build

Why This Error Occurred

When running next start or a custom server in production mode a production build is needed.

Possible Ways to Fix It

• Run next build to create a production build before booting up the production server.
• If your intention was to run the development server run next dev instead.

https://github.com/vercel/next.js/blob/0af3b526408bae26d6b3f8cab75c4229998bf7cb/errors/production-start-no-build-id.md