SSG vs SSR

이 글은 Next.js에서 제공하는 예제 글을 번역하고, 재구성한 글이에요. 제가 전문 번역가는 아니라서 조금 어색하다고 생각될수도 있어요. 그럴땐 원문과 비교하며 읽어보세요.

SSG, SSR이 뭔가요?

Next.js은 SSG(Static Site Generation)과 SSR(Server-Side Rendering) 의 두 가지 형태의 사전 렌더링 방법을 제공해요. 이 둘의 차이점은 "페이지의 HTML이 언제 생성되는가?" 에요.

  • SSG는 HTML을 빌드 시에 생성하는 사전 렌더링 방법이에요. 사전 렌더된 HTML은 각 요청에서 재사용돼요.
  • SSR은 각 요청마다 HTML을 생성하는 사전 렌더링 방법이에요.

중요한건 Next.js에서는 사용자가 각 페이지에서 사용할 사전 렌더링 방법을 직접 선택 할 수 있단거에요. SSG를 사용할 수 있는 페이지에는 SSG를 사용하고, 그렇지 않은 페이지에 SSR을 사용하여 "하이브리드" Next.js 앱을 만들 수도 있어요.

둘 중에 무엇을 사용해야 하나요?

Next.js는 페이지가 수정시에만 빌드되고 빌드된 페이지를 CDN을 통해 제공해 매번 서버가 페이지를 렌더링하는 것보다 빠르게 서비스를 제공할 수 있기 때문에 가능하다면 SSG을 사용하는 것이 좋아요.

이런 페이지들을 포함하는 다양한 형식의 페이지에서는 SSG를 사용하는게 좋아요.

  • 마케팅 페이지
  • 블로그 글
  • e커머스 제품 목록
  • 도움말과 문서

자기 자신에게 "내가 이 페이지를 유저의 요청에 앞서 사전 렌더링할 수 있는가?" 를 물어보세요. 만약 답이 "예"라면, SSG를 사용하세요.

하지만, SSG는 만약 당신이 페이지를 유저의 요청에 앞서 사전 렌더링할 수 없는 경우에는 좋지 않아요. 그런 경우에는, SSR을 사용할 수 있어요. SSG에 비해 더 느리지만, 페이지를 항상 최신으로 유지할 수 있어요. 아니면 사전 렌더링을 아예 건너뛰고 클라이언트 사이드에서 JavaScript로 정보를 채울수도 있어요!

'상식' 카테고리의 다른 글

SSG vs SSR  (17) 2021.04.18
  1. tica 2021.04.19 00:27

    ee

  2. 장래희망 tica 2021.04.19 08:47

    헋ㄷㄷ

  3. ? 2021.04.19 15:12

    <img src="#">

  4. 샌즈 2021.04.20 08:00

    띠까는 샌즈다

  5. 주황새 :: OrangeBird 2021.04.20 17:15

    티카는 생즈다

  6. 히히ㅣㅎ히힣히ㅣㅎ히ㅣ힣 2021.04.21 14:35

    힣히힣히힣히ㅣ히히히ㅣ

  7. 마일로 2021.04.21 14:35

    ㄷㄷ

  8. NPE 잡다가 안죽은 띠까 2021.04.23 14:49

    ㄴㅇㄱ

  9. 주황새 :: OrangeBird 2021.04.25 09:25

    ㄷㄷㄷㄷ

  10. 고구마 2021.04.25 19:58

    blow.ga 어디감

  11. ddtt 2021.04.28 13:26

    테마를 직접 만드셨넹 ㄷㄷ

  12. 614project 2021.04.28 22:39

    띠까바보

  13. eee 2021.04.29 20:55

    eee

  14. ㄴㅇㄱ 2021.05.01 22:14

    ㄴㅇㄱ

  15. 오ㅓ 2021.05.01 22:44

    샌즈

  16. baboseojin 2021.05.08 15:04

    아 티스토리였구나 ㄷㄷㄷ

  17. 2021.05.13 16:44