- 🌹 정적 웹사이트는 CSR(Client Side Rendering)로, 처음에 HTML의 틀만 가져온 뒤에 서버 API로 부터 데이터만 요청하여 클라이언트에서 해당 데이터로 웹 페이지를 렌더링하는 방법이다.
- 🌹 동적 웹사이트는 SSR(Server Side Rendering)로, 페이지를 GET 요청할 때 마다 서버에서 렌더링이 완료되어 보내진 HTML 파일을 받아온다.
🍺 현대의 2-tier Architecture 웹사이트는 정적 웹사이트가 보편적인 방법이다.
🍺 브라우저의 발달과 AJAX(Asynchronous JavaScript and XML)의 등장으로 갱신이 필요한 부분의 데이터만 서버에 요청하여 페이지를 구성한다.
🍺 이를 통해서 네트워크 통신의 패킷 크기를 줄이고, 이에 따라서 서버의 부담도 줄일 수 있게 되었다.
🍺 또한, 서버에 요청하는 데이터의 크기가 작아짐에 따라서, 빠른 반응으로 사용자의 경험을 향상시켰다.
🍺 다만, SEO(Search Engine Optimization)에서는 정적 웹사이트의 내용이 잘 검색이 되지 않을 수 있다.
🍻 정적 웹사이트에서 이를 해결하기 위해서 Next.js에서는 프리 렌더링(Pre-rendering) 기술을 지원한다. 화면의 첫 페이지를 미리 렌더링하여 저장한다. (SEO에서 이 미리 렌더링된 첫 페이지의 정보를 검색한다.)
☕ 또한, CSR을 통해서 서버의 부담이 줄어드는 대신 클라이언트에 부담이 증가하였다.
☕ 따라서 성능의 극대화를 위해서 일부 사이트에서는 CSR, SSR을 혼합하여 구성한다.
정적 웹사이트 빌드
-
현대의 웹사이트가 SPA(Single Page Application)로 변해감에 따라서 클라이언트 쪽의 크기는 점점 커졌다.
-
이러한 까닭으로 웹사이트의 구성요소들은 파일로 분리되어 각각 모듈화가 이루어졌다.
-
이제 웹앱은 수 많은 모듈로 이루어지고, 이 모듈들을 하나로 묶어주는 작업을 번들링(bundling)이라고 한다.
-
번들링 과정에서 브라우저에서 자체적으로 해석할 수 없는 파일들(JSX, TypeScript ...)을 해석하는 다양한 보조 도구들이 브라우저가 해당 파일을 해석할 수 있게 해주었다.
🍬 jsx 확장자의 파일은 js 파일과 기능적으로 다른 점이 없지만, jsx 문법을 사용하는 컴포넌트임을 명시하기 위해서 사용되곤 한다.
🍣 이러한 과정을 통칭하여 소프트웨어 빌드라고 한다 🍣
🍰 소프트웨어 빌드는 소스코드를 실행 가능한 결과물로 변환하는 과정을 의미한다 🍰
🧊 빌드를 통해서 만들어진 정적인 파일을 호스팅해주는 서비스에 업로드하면, 클라이언트 웹 App을 배포할 수 있다 🧊
🌺 정적인 웹사이트를 호스팅하는 서비스로는 Netlify와 Vercel, AWS S3 등이 있다.
React 프로젝트에서 사용되는 빌드 툴
Create React App나 Next.js와 같은 프로젝트 생성툴의 내부에는 다음과 같은 모듈들이 있다.
- webpack: 모듈 번들러이다. 여러가지 모듈들을 하나로 묶어주는 작업을 한다.
- babel: TypeScript나 JSX 등과 같이 브라우저가 지원하지 않는(이해하지 못하는) 언어를 자바스크립트로 바꿔주는 컴파일러이다.
- ESLint: 자바스크립트의 Code convention(코딩 스타일과 방법에 대한 지침)과 문법을 검사해준다.
- Sass, less: CSS의 작성을 구조화하여 편리하게 만들어주는 CSS Preprocessor(CSS 전처리기)이다.
🌽 또한, Create React App로 만든 프로젝트는 react-scripts, Next.js에서 만든 프로젝트의 경우 next 모듈이 사용된다.
참고 자료 출처 : 코드 스테이츠
