해결된 질문
작성
·
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의 렌더링에 대한 이해력이 부족해서 왜 서버 컴포넌트의 중복 호출 문제가 생겼는지는 완벽히 이해하지 못했습니닷 🥲 좀 더 살펴보고 질문 또 드려보겠습니다!
감사합니다!