인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

이슬님의 프로필 이미지
이슬

작성한 질문수

손에 익는 Next.js - 블로그 만들기

TailwindCSS Dark Mode 이해하기

배포 후, 조회수 증가 이슈

해결된 질문

작성

·

74

·

수정됨

1

안녕하세요 조은님!

강의 즐겁게 수강했습니다 🤓

 

다른게 아니라 배포 후 발견한 문제 때문에 질문 드립니닷!

로컬에서는 문제없이 새로고침할 때마다 조회수가 1씩 증가하는데용

배포 후에는 조회수가 3씩 증가 하고 있습니닷 🤔

(포스팅 갯수도 3개여서 관련이 있을 거라고 생각되는데욤..)

 

제 코드는 강의와 약간 다른 점이 있습니닷!

현재 Vercel에서는 기존 Vercel Postgres를 대체하는 Neon Marketplace 통합으로 변경되었는데요

(자세히는 잘 모르겠습니닷.. 관련 링크를 첨부합니닷..)

https://vercel.com/docs/storage/vercel-postgres

https://vercel.com/changelog/neon-now-available-on-vercel-marketplace

그래서 강의와는 다른 import { neon } from "@neondatabase/serverless"; 를 불러와서 사용 중입니닷

"use server";

import { neon } from "@neondatabase/serverless";
import { unstable_noStore as noStore } from "next/cache";

const sql = neon(`${process.env.DATABASE_URL}`);

export async function getViewsCount(): Promise<
  {
    slug: string;
    count: number;
  }[]
> {
  if (!process.env.POSTGRES_URL) {
    return [];
  }

  noStore();
  const rows = await sql`
    SELECT slug, count
    FROM views
  `;
  return rows.map((row) => ({
    slug: row.slug,
    count: row.count,
  }));
}

export const incrementView = async (slug: string) => {
  noStore();
  await sql`
    INSERT INTO views (slug, count)
    VALUES (${slug}, 1)
    ON CONFLICT (slug)
    DO UPDATE SET count = views.count + 1;
  `;
};

다른 분들도 저와 비슷한 오류가 생길지 궁금한데용.. 혹시 배포 후 조회수 증가를 확인해주실 수 있을까용..?

 

감사합니다!

답변 1

1

하조은님의 프로필 이미지
하조은
지식공유자

오, 이슬님! 안녕하세요! Vercel Postgres를 대체하는 Neon Marketplace 통합되었는지 몰랐네요... 변화가 정말 빠른 거 같습니다 😅

 

알려주신 것으로 시도해봤는데... 저도 동일한 증상이 발생하더라고요. 뭔가 이상해서 원래 예제로도 테스트를 해봤어요. 그랬더니 역시 동일하게 카운트가 2회 이상 오르는 문제가 생기는 걸 발견할 수 있었어요. (제 예제에 있던 버그를 발견해주셨어요. 감사해요!)

 

다시 알아보니 서버 컴포넌트의 중복 호출 문제로 보여요. 예제에서처럼 새로고침 마다 변경되어야 하는 경우라면 incrementView에 해당하는 로직을 Route Handlers로 구현하는 방식이 가장 쉬운 접근일 것 같아요.

예제를 별도의 브랜치에 만들어뒀으니 확인 해주세요.
https://github.com/hajoeun/next-js-blog/blob/fix/view-count/app/api/view-count/route.ts

 

더 알아보고 좋은 방법이 있다면 강의 소식에 남겨둘게요!
문제를 발견해주셔서 너무 감사드립니다!

 

시도해보시고 결과 알려주세요. 문제가 있다면 또 질문 남겨주세요! 감사합니다.

이슬님의 프로필 이미지
이슬
질문자

알려주신 방법으로 시도해보니 원하는대로 잘 구현되는 것을 확인했어요!

아직 nextjs의 렌더링에 대한 이해력이 부족해서 왜 서버 컴포넌트의 중복 호출 문제가 생겼는지는 완벽히 이해하지 못했습니닷 🥲 좀 더 살펴보고 질문 또 드려보겠습니다!
감사합니다!

이슬님의 프로필 이미지
이슬

작성한 질문수

질문하기