Open
Conversation
브라우저에서 요청하는 모든 endpoint에 대한 응답으로 test.html 반환 test.html에서 main.js를 반환하여 동적으로 h1 요소 생성
브라우저에서 요청하는 모든 endpoint에 대한 응답으로 ssr.html 반환 서버에서 ssr.html의 body 요소 내부에 여러 요소 추가 수정된 ssr.html을 응답
ssg-build.js를 실행하여 generated-ssg.html 생성 브라우저에서 요청하는 모든 endpoint에 대한 응답으로 미리 생성된 generated-ssg.html 반환
브라우저에서 요청하는 모든 endpoint에 대한 응답으로 html 반환 최초 요청시 서버사이드렌더링을 통해 html을 응답하고 캐시 처리 두 번째 요청 시 캐시가 유효하면 캐시된 html 응답 세 번쨰 요청 시 캐시가 만료되었으면 캐시된 html을 반환하면서 html 재생성하고 캐시 업데이트 네 번째 요청 시 새롭게 생성된 html 응답 반복
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
배포 링크
기본과제 (Vanilla SSR & SSG)
Express SSR 서버
<!--app-html-->,<!--app-head-->)서버 사이드 렌더링
클라이언트 Hydration
window.__INITIAL_DATA__스크립트 주입Static Site Generation
심화과제 (React SSR & SSG)
React SSR
renderToString서버 렌더링React Hydration
Static Site Generation
구현 과정 돌아보기
가장 어려웠던 부분과 해결 과정
구현하면서 새롭게 알게 된 개념
성능 최적화 관점에서의 인사이트
학습 갈무리
Q1. 현재 구현한 SSR/SSG 아키텍처에서 확장성을 고려할 때 어떤 부분을 개선하시겠습니까?
Q2. Express 서버 대신 다른 런타임(Cloudflare Workers, Vercel Edge Functions 등)을 사용한다면 어떤 점을 수정해야 할까요?
Q3. 현재 구현에서 성능 병목이 될 수 있는 지점은 어디이고, 어떻게 개선하시겠습니까?
Q4. 1000개 이상의 상품 페이지를 SSG로 생성할 때 고려해야 할 사항은 무엇입니까?
Q5. Hydration 과정에서 사용자가 느낄 수 있는 UX 이슈는 무엇이고, 어떻게 개선할 수 있을까요?
Q6. 이번 과제에서 학습한 내용을 실제 프로덕션 환경에 적용할 때 추가로 고려해야 할 사항은?
Q7. Next.js 같은 프레임워크 대신 직접 구현한 SSR/SSG의 장단점은 무엇인가요?
Q8. Next.js 를 이용하여 SSG 방식으로 배포하려면 어떻게 해야 좋을까요?
코드 품질 향상
자랑하고 싶은 구현
개선하고 싶은 부분
리팩토링 계획
학습 연계
다음 학습 목표
실무 적용 계획
리뷰 받고 싶은 내용