[Next.js]SSR

sumnie·2022년 11월 9일
0
post-thumbnail

SSG(Static Site Generation)

  • 빌드할 때 js 변환해서 html 미리 만들어 두고, 요청이 들어오면 만들어둔 html 응답
  • Gatsby

CSR(ClientSide Rendering)

  • 처음 웹사이트 진입 시, 비어있는 html 응답
  • 첫 화면을 보기까지 시간이 오래걸림
  • 좋지 않은 SEO (비어있는 html 때문)
  • React, Vue
  • SPA(Single Page Application) : CSR 방식으로 렌더링

SSR(ServerSide Rendering)

  • 요청이 들어오면 js를 바로 html로 만들어서 응답
  • 서버에서 필요한 데이터를 다 가져와서 html 파일을 만들고 바로 사용자에게 보여줌
  • MPA(Multiple Page Application) : SSR 방식으로 렌더링
  • TTV 와 TTT 가 다르기 때문에 사용자가 화면을 볼 수 있지만 클릭하면 동작을 안할 수 있음

    TTV(Time To View) / TTI(Time To Interact)
    TTV : 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
    TTI : 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점
    CSR은 TTV와 TTI가 같지만 SSR은 TTV와 TTI 사이에 공백이 생김

Next.js

  • React 를 SSR 방식으로 렌더링 할 수 있게 해줌
  • next/link 나 next/router 로 CSR 방식을 지원함
    • 처음 웹사이트 진입 시 SSR 방식으로 레더링 한 후 그 뒤로는 CSR 방식으로 렌더링
    • SEO 개선, 매끄러운 UX/UI 제공
profile
모두가 행복했으면 좋겠어🌈

0개의 댓글