개발자

Nextjs에서 뒤로가기를 했을 경우 firebase에 다시 요청을 넣는 문제

2023년 05월 28일조회 113

안녕하세요! 개발을 시작한지 1년도 안된 대학생입니다. CS를 전공중이지만 개인 프로젝트를 만드는건 이번이 처음이네요. 다소 엉뚱한 질문을 한다고 생각하셔도 너그럽게 봐주시면 감사하겠습니다 ^^ 저는 지금 Next.js와 Firebase를 이용해서 간단한 웹사이트를 개발하고 있습니다. 사용자의 위치를 기준으로 등록된 장소에 대한 리스트를 나열하고, 해당 장소를 클릭하면 상세페이지로 이동하는 꽤나 전형적인 웹사이트입니다. 등록된 장소는 Firebase DB (firestore)에 요청을 넣어 받아온 정보를 표시합니다. 문제는 상세페이지로 들어갔다가 다시 뒤로가기를 통해서 홈페이지에 나왔을때 발생합니다. 다시 Home을 랜더링하다보니까 유저가 상세페이지를 갔다가 나올때마다 서버에 요청을 넣습니다. firestore는 document 하나를 읽을때마다 읽기횟수를 소모하는데 한번 접속할때마다 ~100개 가까운 read count를 소모하는 것도 꽤나 부적절한 마당에 유저가 왔다갔다를 몇번 하면 눈깜빡할 사이에 몇백달러를 청구당할까봐 두렵네요 (ㅋㅋ) 아무리 생각해도 간단 블로그부터 유튜브, 아마존같은 모든 웹사이트들이 비슷한 형태로 홈페이지에 접속하면 서버에서 제품이나 콘텐츠를 fetch해오고, 상세페이지를 들어갔다가 다시 나오면 받아온 정보를 다시 fetch하진 않을것 같은데, 제가 뭔가 큰걸 놓치고 있는 기분이 듭니다. 사소한 조언이라도 좋으니 부탁드립니다. 감사합니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

커리어리 AI 봇님의 프로필 사진

안녕하세요! Next.js와 Firebase를 사용하여 개발하고 계신 프로젝트에 대한 질문에 대답해드릴게요. Firebase Firestore에서 요청을 통해 데이터를 가져오고, 상세 페이지에서 다시 뒤로가기를 하면 홈페이지로 돌아왔을 때 다시 데이터를 가져오는 문제가 발생한다고 하셨습니다. 이런 경우, 데이터를 다시 가져오는 대신 이전에 가져온 데이터를 재사용하는 방법을 고려해볼 수 있습니다. 일반적으로 브라우저는 이전 페이지를 캐시에 저장하므로, 이전 페이지에서 가져온 데이터를 다시 사용할 수 있습니다. Next.js에서는 이전 페이지에서 가져온 데이터를 재사용하기 위해 'getServerSideProps' 또는 'getStaticProps'를 사용할 수 있습니다. 이러한 메서드는 페이지의 데이터를 사전에 가져오고, 이후 해당 데이터를 재사용할 수 있게 해줍니다. 예를 들어, 홈페이지에서 데이터를 가져올 때 'getServerSideProps'를 사용하여 데이터를 사전에 가져오고, 상세 페이지로 이동할 때는 해당 데이터를 함께 전달하여 재사용할 수 있습니다. 이렇게 하면 홈페이지로 돌아올 때마다 서버에 다시 요청을 보내지 않아도 되므로 Firestore의 읽기 횟수를 절약할 수 있습니다. 아래는 간단한 예시 코드입니다: 아래의 예시에서 'getServerSideProps' 함수를 사용하여 데이터를 사전에 가져오고, 해당 데이터를 홈페이지와 상세 페이지에서 재사용하고 있습니다. 이를 활용하여 데이터를 한 번 가져온 후에는 다시 서버에 요청을 보내지 않고 사용할 수 있습니다. 아래의 예시를 참고하여, 프로젝트에서 데이터를 사전에 가져오고 재사용하는 방법을 구현해보세요. 이렇게 하면 데이터를 반복해서 가져오는 문제를 해결할 수 있을 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#1
// pages/index.js

import { getServerSideProps } from 'next';
import { fetchHomePageData } from '../utils/api';

export default function HomePage({ data }) {
  // data를 사용하여 홈페이지를 렌더링하는 코드
}

export async function getServerSideProps() {
  // 데이터를 미리 가져오는 로직
  const data = await fetchHomePageData();

  return {
    props: {
      data,
    },
  };
}


#2
// pages/detail.js

export default function DetailPage({ data }) {
  // data를 사용하여 상세 페이지를 렌더링하는 코드
}

export async function getServerSideProps() {
  // 데이터를 미리 가져오는 로직 (필요에 따라 Firestore에서 데이터 가져오기)

  return {
    props: {
      data,
    },
  };
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!