inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

TailwindCSS Dark Mode 이해하기

배포 후, 조회수 증가 이슈

해결된 질문

260

이슬

작성한 질문수 2

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;
  `;
};

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

 

감사합니다!

react 블로그 next.js

답변 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

 

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

 

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

1

이슬

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

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

160 강의 ppt-maker에 대해

0

1

1

이벤트 관리 앱 프로젝트 개발 순서

0

2

0

supabase next.js와 mcp

0

3

0

늘 컴퓨터를 켜두어야 하는 것에 대한 질문입니다.

0

7

1

스테이징 10000개

0

7

1

160. Claude Code로 PPT 만들기 관련 질문

0

7

1

task master 관련질문입니다.

0

9

1

노션 승인 관련

0

20

3

android crud중 c 영상이 12초만 있는 잘린 영상이에요.

0

15

2

터미널 시작폴더가 달라요

0

23

2

my-profile-site 404 error

0

16

2

노션 .env.local

0

25

1

shrimp_data - WebGUI.md

0

19

2

powershell 복붙 문제

0

22

2

디렉토리가 보이지 않아요.

0

22

1

sitemap 에 Pormise가 필요한 이유

0

52

2

getPostData 함수 질문

0

52

1

초반부 pnpm dev 후 발생하는 에러

1

537

2

PPR 적용 후 여전히 SSG로 배포되는 이슈

0

241

3

추가로 Head tag에서 작성된 script 코드 관련하여 질문드리고 싶습니다. (feat. 즉시 실행 함수, dangerouslySetInnerHTML)

1

257

2

Head tag에서 script를 작성하는 이유에 대해서 여쭤보고 싶습니다! (+ NextJS의 Head tag와 Script tag)

1

174

1

완강하고 질문 드립니다

1

187

2

다크모드 적용

1

363

2

PPR 적용 한 후 에러가 났습니다.

1

298

2