inflearn logo
강의

講義

知識共有

手につくNext.js - ブログを作る

TailwindCSS Dark Mode の理解

배포 후, 조회수 증가 이슈

解決済みの質問

272

helloleesul

投稿した質問数 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

hajoeun

오, 이슬님! 안녕하세요! 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

helloleesul

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

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

기본 브랜치의 이름이 master에요.

0

3

1

관리자 페이지 질문

0

2

1

plans 생성이 안됩니다.

0

9

2

더빙에 어떤 ai가 쓰였는지 궁금합니다.

0

11

0

보안 적용에 대한 강의가 있을까요?

0

5

1

Auto-memory 기능

0

12

1

64강 context 7 관련 질문

0

13

1

Auto-memory 기능

0

13

0

55강 7분56초

0

10

0

55강 git 초기화 관련 질문이요

0

11

1

PROJECT_STRUCTURE.md 파일 공유좀 해주세요

0

17

2

노션 사용권한 불편합니다.

0

14

2

클로드 코드에 붙여넣기후 편집 관련 질문입니다!

0

15

1

cursor ai가 업데이트 되서 ui가 바뀌었는데 반영은 안될까요?

0

12

1

존재하지 않는 일기 url입력 시 alert이 두 번 떠요

0

18

1

sitemap 에 Pormise가 필요한 이유

0

68

2

getPostData 함수 질문

0

64

1

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

1

560

2

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

0

264

3

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

1

268

2

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

1

180

1

완강하고 질문 드립니다

1

193

2

다크모드 적용

1

372

2

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

1

303

2