NEXT JS로 React SEO 최적화하기

앱의 가시성을 향상시키는 방법 📈

앱을 개발하고 Google에 "최고의 치킨 레시피"라고 검색하면, 앱이 Google 검색 페이지에서 첫 번째 결과로 표시되길 바랍니다. 그렇다면 이 비디오는 당신에게 중요한 내용입니다. 안녕하세요, 논리적인 사람들 여러분, gkb입니다. 이 비디오에서는 내용을 Google에 표시하여 웹 사이트를 랭킹에 반영하는 방법에 대해 이야기하겠습니다.

먼저 간단한 주의 사항 하나만 말씀드리겠습니다. 이 비디오는 SEO 팁이나 트릭에 대한 내용이 아닙니다. 이 비디오는 리액트 앱이 어떻게 작동하는지 이해하는 데 관한 것입니다. 정확히 말하자면, 이 비디오는 리액트가 데이터를 웹 페이지에 렌더링하는 방법에 대한 이해에 관한 것입니다. 이해하신다면 SEO 팁을 적용할 수 있을 것이며, SEO 관점에서 어떻게 하더라도 상관없습니다. Google 검색 엔진이나 기타 검색 엔진에서 최고의 랭킹을 달성할 수 없습니다.

그럼 이제 시작해봅시다. 제가 디자인한 것은 매우 간단한 제품 또는 컴포넌트입니다. 이것을 데모 아이콘이라고 부르겠습니다. 기본 개념은 홈페이지를 방문하고 페이지를 새로고침하면 사용자가 "잠시만 기다려주세요" 메시지를 볼 수 있습니다. 그리고 데이터가 표시됩니다. 이런 방식은 데이터베이스에서 데이터를 가져오거나 어떤 작업을 유효성 검사하는 동안 사용자에게 기다려달라는 메시지를 알려주는 전형적인 방법입니다.

그러나 이 접근 방식의 문제점은 Ctrl U를 누르고 소스를 확인해보면 웹 사이트로 보낸 데이터는 "로딩 중..."만 있습니다. 이렇게 보내진 데이터로는 Google이 웹 페이지가 "상품 제목 1"에 관한 것임을 알 수 없습니다. Google이 이 웹 페이지가 어떤 주제로 되어 있는지 이해할 수 있도록 도우려면 어떻게 해야 할까요? 현재의 문제를 해결해 보겠습니다.

우리가 설계한 컴포넌트는 매우 간단합니다. 상품을 나타내는 state 변수인 products를 생성합니다. 처음에는 빈 상태이므로 "잠시만 기다려주세요"를 반환합니다. 이것이 새로고침할 때 보이는 것입니다. 그런 다음 데이터를 가져오는 동안 지연 시간을 모방하기 위해 유효성 검사를 위해 setTimeout을 사용하여 5초를 기다립니다. 그리고 나서 products를 이 더미 변수로 설정하고, 이것을 작성하여 상품 1, 2, 3이 표시됩니다. 지금까지는 괜찮습니다. 그러나 문제는 이 줄이 이전에 실행되고, 리액트가 잘못된 데이터로 컴포넌트를 수화시키는 것입니다.

이 문제를 해결하기 위해 이 컴포넌트가 로드되기 전에 데이터를 미리 가져올 필요가 있습니다. 여기에 목표가 있습니다. 그리고 리액트와 Next.js에서는 이를 해결하는 것이 실제로 매우 간단합니다. 먼저 다른 함수를 정의해야 합니다. 함수 이름은 getStaticProps입니다. 함수 이름은 반드시 이와 같아야 합니다. 그리고 이 함수는 항상 객체를 반환해야 합니다. 이 객체에는 props라는 키가 있어야 하며, props는 또한 이와 같은 객체여야 합니다.

예를 들어, 상품 이름을 따와야 하므로 이렇게 쓸 수 있습니다. 콘솔에서 어떤 prop을 얻었는지 확인해 봅시다. 웹 사이트로 돌아가서 모든 것을 지우고 페이지를 새로고침하면 prop에서 객체를 얻습니다. 키는 name이고 값은 주어집니다. 이 값을 사용하여 데이터를 채우려면 다음과 같은 방식으로 수행하면 됩니다. 데이터베이스에서 무언가를 가져와야 할 때는 여기의 로직 전체를 제거하고 상품이 아무 것도 아닌지 확인하기 위해 const products = null로 설정합니다. 그런 다음 이렇게 작성하면 됩니다.

이렇게 하거나 원한다면 다른 방식으로도 작성할 수 있습니다. 둘 다 괜찮습니다. 어느 방식이든 원하는 대로 하시기 바랍니다. 제가 이 방식을 선호합니다. 그래서 props 객체로부터 products를 해체하도록 할 것입니다. useEffect도 필요하지 않습니다. 또한 이 항목도 필요하지 않습니다. 왜냐하면 getStaticProps에서 이미 prefetching된 상품을 소유하고 있기 때문입니다. 이를 저장하도록 const products = props에서 찾도록 할 수 있습니다. 이제는 이와 같은 데이터가 있으므로 useEffect와 item도 필요하지 않습니다.

이제 저장하고 페이지를 새로 고침하면 데이터를 이미 가지고 있습니다. Ctrl U를 누르고 페이지 소스로 이동하면 HTML 데이터로 모든 상품이 표시된 것을 볼 수 있습니다. 이 페이지가 처음 페이지로 브라우저에게 반환되었기 때문에 Google은 이 키워드를 사용하여 페이지를 순위에 매길 수 있습니다. 멋지죠? 완벽합니다.

여기까지 진행하기 전에 중요한 한 가지에 대해 얘기하고 싶습니다. 많은 사람들이 이 사실을 놓치고, 그래서 getStaticProps가 작동하지 않을 때 문제를 해결하는 데 많은 시간이 소요됩니다. getStaticProps 함수는 페이지 전용으로만 작동합니다. 즉, 리액트 앱 내에 여러 컴포넌트가 있는 경우, 레이아웃과 같은 컴포넌트 내에 이 함수를 사용하려고 하면 동작하지 않습니다. 이 함수는 페이지 내에서 사용해야 합니다. 예를 들어, 인덱스 페이지, 홈페이지, 데모 페이지, 멋진 페이지 등 페이지 내에서 사용해야 합니다. 이것은 기본 사항이지만, 완전성을 위해 말씀드립니다. 페이지는 여기에서만 확인할 수 있는 것입니다. 각 페이지마다 다르게 표시됩니다. index 페이지로 이동한다면 다른 내용이 표시됩니다. 데모를 위해 이렇게 디자인된 것입니다. 그런데, 제 "Okay to be Logical" 이라는 웹 사이트를 만들고 있기도 합니다. 궁금하시다면 확인해보세요. 이 사이트에서 제가 보유한 다양한 리소스와 앱을 확인하고 이용할 수 있습니다. 완전한 내용으로 돌아와서 getStaticProps는 페이지에만 사용할 수 있다는 점을 기억하십시오. 단일 컴포넌트에는 작동하지 않습니다.

앱의 가시성을 높이는 방법에 대해 이제 어느 정도 숙지하셨을 것입니다. 앱을 개발하고 Google에서 가장 상위에 랭킹되도록 도움이 될 것입니다. 마지막으로, 이 비디오를 지지해주실 수 있는 세 가지 액션이 있습니다. 첫 번째로 채널을 구독해주시기 바랍니다. 아직 구독하지 않으셨다면 구독해주시고, 두 번째로 비디오에 좋아요를 눌러주시고 마지막으로 이 비디오를 공유해주시기 바랍니다. 이 비디오가 도움을 받을 수 있는 누군가와 공유해주시면 감사하겠습니다.

마지막으로 getStaticProps가 작동하지 않을 때 디버깅하기 위해 중요한 내용을 하나 더 얘기하겠습니다. getStaticProps 함수는 페이지에서만 작동합니다. 컴포넌트 내에 작성하여 사용하려고 하면 작동하지 않으며, 작동하지 않아서 getStaticProps가 왜 작동하지 않는지 찾기 위해 많은 시간을 낭비하게 됩니다. 이 사실을 알려드리고 싶었습니다. 시간 낭비하지 마세요. 이 함수를 사용하려면 페이지 내에서 사용해야 합니다. 이를 통해 앱을 제대로 운영할 수 있습니다. 앱의 생산성을 높이기 위한 방법에 대한 동영상을 보려면 여기를 클릭하세요. 메시지를 마무리하겠습니다. GK와 함께였습니다. 다음 비디오에서 뵙겠습니다. 안녕히 계세요. 감사합니다.