next.js 에서 SEO 최적화 꿀팁

1. seo가 중요하지 않은 웹서비스 만들 때 react랑 nextjs 중에 뭘 더 추천하시나요?

신입이지만 스타트업이라서, 어쩌다보니 제가 프론트를 리드하게 됐습니다. 웹을 만들어야 하는데 react와 nextjs 중에 고민이 됩니다. react 개발 경험은 있는데, nextjs는 처음이라서요. 어떤 걸 추천하시나요?

답변

안녕하세요. 단순 React (Single Page Application)과 Next.js와 같은 정적 사이트 생성기 혹은 서버 사이드 렌더링에 도움을 주는 프레임워크의 차이점과 장단점을 알고나면 어떤 걸 선택해야 하는지 대충 감이 올 것 같아요. 단순 React (Single Page Application)은 하나의 페이지에서 모든 데이터를 주고 받아요. 사실 페이지 이동처럼 보이게 하는 것도 react-router-dom과 같은 대표적인 라우팅 라이브러리로 사실은 페이지 이동이 아니라 URL이 변경될 때 보여주는 컴포넌트가 달라지는 것 뿐이죠. 실제로 페이지가 이동되어서 다시 html과 javascript를 받아오는 건 아니에요. 그래서 단순 React와 같은 SPA에서는 맨 처음에 유저가 홈페이지에 들어와서 html을 받아오고 나서 css와 javascript(react)를 불러와서 앱을 실행시키면 그 이후에는 우리가 React안에서 작성해놓은 코드로 앱이 동작하게 돼요. 반면에 Next.js와 같은 정적 페이지 생성 프레임워크들은 미리 페이지를 생성해놔요. (HTML을 여러 개 생성해놔요) 그리고 유저가 홈페이지에 들어왔을 때 해당하는 URL의 HTML를 전달해줄뿐이죠. (모든 동작이 다 같다는건 아니에요. SSR, SSG에 따라서 조금 다르긴한데 이건 요기서 다루지 않을게요.) 그래서 React와 같은 SPA에서는 웹 페이지를 불러오고 나서 데이터를 주고 받을 일이 많을 때 조금 더 유리해요. Next.js와 같은 프레임워크는 HTML을 미리 생성해놓는데, HTML을 불러오고 나서 HTML이 많이 바뀔거라면 굳이 미리 생성해놓을 필요가 없는거죠. 그래서 어드민 페이지(단순 텍스트보다 주고 받는 데이터가 훨씬 많음) 혹은 한 페이지에서 모든 일을 처리하는 앱과 같은 경우는 굳이 Next.js와 같은 프레임워크를 사용할 필요가 없을 것 같네요. 반대로 HTML을 많이 생성해놓으면 유리한 앱들이 있어요. 예를들면 블로그나 공식문서와 같은 페이지들은 데이터가 자주 변할 일이 없어요. 거의 같은 HTML을 생성할거라면 굳이 유저가 웹페이지에 들어와서 HTML을 요청할 때 만들어주는게 아니라 미리 다 만들어놓고 만들어놓은 HTML을 단순히 전달해주면 되는거죠. 그리고 Next.js에서는 JavaScript는 실행하지 않는 검색엔진 로봇들에게는(구글봇은 이제는 Javascript도 실행한다고 하지만) HTML이 생성이 되어있어야 해당 HTML을 읽어서 검색엔진에 노출을 시켜주기도해요(SEO). 검색엔진에 노출되지 않아도 되는 앱들도 있어요. 예를들면 회사 내부에서만 쓰이는 웹사이트라던가, 어드민 페이지 같이 내부에서 쓰이는 페이지는 굳이 SEO를 신경쓰지 않아도 되겠죠. 또한 여러가지 프레임워크가 제공해주는 편의성 기능들이 있기도해요. 해당 기능들은 공식문서 ( https://nextjs.org/ )에 가면 조금 더 자세히 알 수 있으니 참고하시면 될 것 같아요. 결론 1. 데이터 교환이 많은 앱인가? (Yes: React, No: Next) 2. 검색엔진노출이 중요한 앱인가? (Yes: Next, No: React) 3. 또한 프레임워크가 제공해주는 여러 기능들이 마음에 들고 공감하는가? => 그럼 사용 위의 것들을 잘 고려하시고, 공식문서도 참고하셔서 잘 저울질 하셔서 선택하시면 될 것 같아요~ 감사합니다!

2. Next.js에서의 CSR/SSR 질문

안녕하세요! Next.js에 대해서 공부중에 있는데, 렌더링관련해서 궁금한 점이 있어서 질문드립니다. Next.js를 사용하면 React와는 달리 SSR을 지원한다고 하는데요, 실제로 Next.js로 만들어진 사이트에 접속해보면 특정 페이지에서 새로고침 시에는 페이지 전체를 서버에서 보내주는 형태(SSR)이고, 브라우저단에서 페이지 이동 시에는 서버로부터 JSON 데이터만 가져오고 페이지는 브라우저가 그려주는 형태(CSR)로 동작하는 것으로 보입니다. 이런 동작은 개발자가 특별한 설정을 하지 않고도 Next.js에서 기본적으로 제공하는 기능인 것인지 궁금합니다. 혹시 위 내용이 맞다면, Next.js는 React의 상위 호환인건데, 무조건적으로 Next.js를 쓰는 것이 SSR 이점(초기 로딩 속도 향상, SEO 등)과 CSR 이점(UX 향상)을 모두 취하게 되므로 React는 굳이 쓸 이유가 없겠다란 생각이 들어서 이렇게 질문드립니다!

답변

1. 이런 동작은 개발자가 특별한 설정을 하지 않고도 Next.js에서 기본적으로 제공하는 기능인 것인지 궁금합니다. -> Next.js가 서버사이드 렌더링을 하기 위해선 서버가 필요하며 서버를 띄우기 위해서 개발자가 인프라 작업을 해줘야 합니다. (Vercel같은 플랫폼에서는 이런 번거로운 인프라 작업을 대신 해줍니다.) 2. 무조건적으로 Next.js를 쓰는 것이 SSR 이점(초기 로딩 속도 향상, SEO 등)과 CSR 이점(UX 향상)을 모두 취하게 되므로 React는 굳이 쓸 이유가 없겠다란 생각이 들어서 이렇게 질문드립니다 -> 서버사이드 렌더링을 사용하면 서버를 띄워야 하는데, 사용자가 늘어나면 서버 비용을 부담해야 하고 서버에 장애가 발생하는 상황도 고려해야 합니다. 사용자가 많아질수록 장애 발생시 리스크도 함께 증가하고, 프론트 개발자의 야근이 늘어날수도 있다는 점을 고려하셔야 합니다. 다만, 서버를 띄우지 않고 배포하는 SSG(Static Site Generation) 방식(빌드 타임에 미리 데이터를 받아와서 페이지를 구워놓는 방식)을 선택할 수 있는 것은 일반 React에 비해 확실히 이점이 있습니다. 서비스의 요구사항에 따라 적절한 도구를 선택하시면 됩니다. 예를 들어 대부분 정적인 페이지로 이루어져있는 블로그의 경우 불필요하게 24시간 가동하는 서버를 띄우기보다는 SSG로 수정/삭제/생성의 동작이 있을 때만 빌드해서 github pages나 Netlify같은 서비스에 업로드하는것이 좋겠죠?

3. next.js를 실무에서 많이 쓰나요?

안녕하세요, React를 이제 막 시작한 학생입니다. React를 배우다보니 next.js관련 키워드가 많은 것 같더라구요. 커리어리에도 next.js 질문이 많네요. next.js를 실무에서 많이 쓰나요? 만약에 그렇다면 react를 배우기 전에 먼저 next.js를 배우는게 좋을까요? 좀더 효율적으로 공부하고싶은데 고수님들의 답변을 듣고 싶습니다. 감사합니다!

답변

많이 씁니다 react의 framework이라 react 모르고 nextjs응 쓸 수 없으니 react 내공을 키우는데 정진하십쇼!

4. Router.push vs next/link 어떤 케이스에서 나누시나요?

안녕하세요! 처음 질문 올려봅니다. next.js에서 router.push와 next/link로 페이지를 이동할 수 있는데 차이가 있을까요? 페이지는 이동하지만 새로고침하고 싶지 않을 때 주로 사용하는데, 둘 다 사용해보니 같은 동작을 하는 것 같아서요. 제가 생각한게 맞을까요?

답변

Next/Link를 사용하면 <a> 태그를 생성합니다 (모든 케이스는 아님). 따라서 Router.push와 같은 동작을 하지만 더 직관적인 동작을 나타낼 수 있습니다. 커리어리 사이트에서 오른쪽 상단 프로필을 클릭하면 프로필로 이동합니다. 하지만 우클릭을 했을 경우 클릭에 관한 이벤트는 나타나지 않습니다. 반면, 헤더에 있는 개발자 Q&A 버튼을 누르면 Q&A 리스트로 이동하고, 우클릭을 하면 '새탭으로 열기'등 링크와 관련된 동작을 할 수 있습니다. 이렇게 직관적인 '이동'의 동작을 나타내는 것은 Next.js에서 2가지 장점이 있습니다. 1) SEO에 좋다. 자바스크립트가 활성화 되지 않아도 a 태그로 된 링크는 크롤링 봇이 이동할 수 있고 링크를 인식할 수 있어서 SEO에 좋습니다. 2) data prefetch가능 Next/link 태그가 사용자의 화면 (뷰포트)에 보이면 해당 페이지의 번들파일을 서버에 요청하여 prefetch합니다. 미리 가져온 번들을 통해 페이지 이동을 빠르게 할 수 있습니다. 결과적으로 Router.push, next/link 둘 다 페이지 이동을 수행하지만 웬만하면 Next/link를 사용하는 것을 추천드립니다.

5. 다들 개발할 때 웹 접근성을 챙기시나요?

회사에서 SEO를 향상시키려고 하는데 혹시 좋은 실천 방안이 있을까요? 현업에서 웹 접근성을 어떻게 고려하는지 궁금합니다. next.js로 개발하고 있습니다!

답변

안녕하세요! META SEO inspector라는 크롬 익스텐션 추천드립니다. 현재 보고있는 사이트를 기반으로 SEO관련 분석해주는 익스텐션인데요, 메타 태그가 빠져있는 부분을 체크해주거나, SEO 점수 향상에 도움되는 Tip을 제안 해줍니다. 빠져있는 메타 태그는 next-seo 컴포넌트를 사용해서 채워 넣으시고, 평소에 마크업 작성할 때 시멘틱하게 작성하는 습관을 들이시면 도움이 될 것 같습니다! https://www.w3schools.com/html/html5_semantic_elements.asp

6. next.js dynamic 적용 시 플로우에 대해 질문이 있습니다.

안녕하세요, seo를 위해서 페이지를 최적화 하고자 코드 스플릿을 적용하려고 합니다. dynamic을 ssr 옵션 false로 적용하면 클라이언트에서 최초 페이지 다운로드 후, 해당 dynamic 컴포넌트를 렌더해야될 때 다시 네트워크 통신을 통해서 파일을 받아온다고 이해했습니다. 그렇다면, seo에 관련된 내용은 dynamic import하면 봇이 크롤할때 못 볼 수도 있다라고 이해하면 될까요? (가급적이면 seo에 중요한 내용은 dynamic import 하지 않는다 - 로 이해하면 되는건가요?)

답변

안녕하세요, 질문자님이 이해하신게 맞는 것 같습니다. 크롬 dev 툴로 실험해보시면 dynamic 컴포넌트들은 필요할때 네트워크 요청을 보내고 있어요. SEO에 영향이 가는가요? 이거는 페이지 로드 속도와 언제 dynamic 컴포넌트를 불러오느냐에 따라 달라질 것 같습니다. 구글 봇 기준으로 말씀드리면 html, css, js를 받은 후 시간이 남는다면 실행 시킬 수 있는 js를 실행시키기 때문에, 이때 dynamic 컴포넌트가 불러와지면 같이 수집이 될 것 같아요. 하지만, dynamic 컴포넌트는 주로 유저 상호작용, 회원/비회원 등 특정 조건에 따라 보여지는 컴포넌트들을 과도하게 불러오는 것을 방지하기 위해 사용하는거라고 알고 있습니다. 바꿔말하면, 처음에 아무 조건없이 보여지는 컴포넌트들은 dynamic으로 감쌀 필요가 없을 것 같아요 😊