사실 나도 인스타마케팅 업체를 운영해보며 SEO의 중요성에 대해 절실히 느낀바가 있다.
SEO 최적화가 잘 되어있어야 노출에 도움도 주며 광고단가도 낮아짐.
많은기업들이 Next.js를 괜히 쓰는게 아니구나 싶다.
Next.js
Next.js는 React 기반의 서버 사이드 렌더링 프레임워크이며, 서버 사이드가 아닌 클라이언트 사이드 렌더링 방식에는 몇 가지 문제점이 있다.
우선 로드해야 할 파일이 많은 경우 클라이언트 사이드는 모든 js 파일을 로드한 다음 웹 페이지를 그리기 때문에 사용자가 많은 시간을 기다려야 하는 일이 생길 수 있다.
또 클라이언트 사이드 렌더링은 SEO에 제대로 대응할 수 없는 문제도 있는데, 클라이언트 사이드 렌더링은 자바스크립트가 로드되지 않으면 아무런 정보를 표시하지 않기 때문 즉 구글의 검색엔진은 클라이언트 사이드 방식의 자바스크립트가 로드되지 않은 페이지에서는 아무런 정보도 수집할 수 없다.
서버 사이드 렌더링은 이런 클라이언트 사이드 렌더링의 문제를 해결할 수 있는데, 서버에서 자바스크립트를 로딩하여 클라이언트 측에서 자바스크립트를 로딩하는 시간을 줄일 수 있고, 서버에서 직접 자바스크립트, html, css를 만들어 그려주기 때문에 검색엔진은 해당 페이지의 모든 정보를 수집할 수 있으며 또 SEO를 위한 meta 태그를 자유롭게 추가할 수도 있다.
Next.js의 주요 기능
hot reloading
Next.js로 개발하는 동안 저장하는 코드는 자동으로 새로고침이 되어 화면에 표시해 주기 때문에 편리합니다.
automatic routing
Next.js는 pages라는 폴더에 있는 파일을 기준으로, 해당 파일명을 도메인명으로 사용합니다. 즉 pages 폴더에 page1.tsx라는 파일을 추가하면 localhost:3000/page1와 같이 자동으로 라우팅 설정이 됩니다.
public 폴더도 pages 폴더와 동일하게 라우팅을 할 수 있지만, public 폴더는 모든 사람이 페이지에 접근할 수 있기 때문에 public 폴더를 이용하는 라우팅은 사용하지 않는 것이 좋습니다.
single file components
Next.js는 style jsx를 사용하여 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 으며, 다음과 같이 style jsx global을 사용하면 글로벌 스타일로 정의할 수도 있음
function Heading(props) {
const variable = "red";
return (
<div className="title">
<h1>{props.heading}</h1>
<style jsx>
{`
h1 {
color: ${variable};
}
`}
</style>
</div>
);
}글로벌 스타일 정의
Next.js는 _app.tsx에만 글로벌 스타일을 정의할 수 있는데, 다른 컴포넌트에 정의한 경우에는 다른 클래스와 겹쳐 오류를 발생할 수 있기 때문 만약 다른 컴포넌트에 정의를 하게 되면 다음과 같은 오류가 발생한다.
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).server rendering
Next.js는 서버 사이드 렌더링을 구현하는데, 클라이언트 사이드 렌더링과는 달리 서버 렌더링을 한 페이지의 소스보기를 클릭하면 내부에 소스가 있는 것을 알 수 있다.
code splitting
dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능한데, 코드 스플리팅은 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것을 뜻함. 즉 모든 번들이 하나로 묶이지 않고, 각각의 페이지로 나뉘기 때문에 자바스크립트 로딩 시간을 조금 더 효율적으로 개선할 수 있는 것이다.
typescript
Next.js를 사용하면 타입스크립트 활용을 위해 웹팩이나 바벨을 설정할 필요가 없다. 그냥 yarn add typescript 명령어로 타입스크립트를 설치하고 yarn run dev 명령어를 입력하기만 하면 자동으로 tsconfig, next-end.d.ts 파일이 생성되어 타입스크립트를 사용할 수 있음
_document.tsx
_document.tsx는 meta 태그를 정의하거나, 전체 페이지에 관여하는 컴포넌트로 render 요소는 반영하지만 페이지 구성 요소만 반영되고 js는 반영 하지 않기 때문에 console은 보이지 않는다.
즉 _document.tsx에서는 componentDidMount 같은 훅도 실행 되지 않기 때문에 정말 static한 상황에만 사용하는 컴포넌트.
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class CustomDocument extends Document {
render() {
return (
<Html>
<Head>
// 모든페이지의 head에 아래 메타태그가 들어감
// 루트파일이기 때문에 가능한 적은 코드만 넣어야함
// 전역 파일을 엉망으로 만들면 안되며, 웹 타이틀, ga 같은 것 정도만 넣는 것이 좋음
<meta property="custom" content="123123" />
</Head>
<body>
<Main />
</body>
<NextScript />
</Html>
);
}
}_app.tsx
_app.tsx에서 렌더링 하는 값은 모든 페이지에 영향을 주게 된다. 이 컴포넌트는 Next.js에서 최초로 실행되는데, _app.tsx은 클라이언트에서 띄우길 바라는 전체 컴포넌트의 공통 레이아웃이기 때문에 최초 실행되면서 내부에 컴포넌트들을 실행하게 됨.
즉 내부에 컴포넌트가 있다면 전부 실행하고 html의 body로 구성하는데, Component, pageProps를 받아서 처리, 여기서 props로 받은 Component는 요청한 페이지이고, GET 요청을 보내면, Component에는 /pages/index.js 파일이 props로 내려오게 된다 pageProps는 페이지 getInitialProps를 통해 내려 받은 props들 이다
_app.tsx는 결국 페이지를 업데이트 하기 전에 원하는 방식으로 페이지를 업데이트 하는 통로 역할을 하는데, _app.tsx에서 console.log를 실행하면 client와 server 모두, 즉 localhost 웹과 터미널에서 모두 콘솔을 확인할 수 있다.
오늘은 여기까지 !!
회고
React + Typescript 기반의 프로젝트를 두개 진행해서 그런가 아직까지 이해하면서 어려운 부분은 없다. 아마 Next.js만의 Hook과, 서버사이드 렌더링의 라이프사이클을 이해할 때 React의 기존방식과 혼동이 되는 부분이 있지 않을까 싶다.
meta 태그라던지, SEO등 마케팅쪽 일을 할 때 알고있던 단어들이 보이니 뭔가 기분이 오묘하다
하나의 서비스를 만드는데 많은것을 신경써야하니.. 뭔가 계속 성장하는느낌이라 좋다
