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

안녕하세요?

@faker-js/faker 사용 시 아래와 같은 런타임 에러가 발생하여 질문드립니다.

Unhandled Runtime Error

Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack

checkForUnmatchedText

node_modules\react-dom\cjs\react-dom.development.js (9647:0)

diffHydratedProperties

node_modules\react-dom\cjs\react-dom.development.js (10310:0)

hydrateInstance

node_modules\react-dom\cjs\react-dom.development.js (11306:0)

prepareToHydrateHostInstance

node_modules\react-dom\cjs\react-dom.development.js (12564:0)

completeWork

node_modules\react-dom\cjs\react-dom.development.js (22181:0)

completeUnitOfWork

node_modules\react-dom\cjs\react-dom.development.js (26596:0)

performUnitOfWork

node_modules\react-dom\cjs\react-dom.development.js (26568:0)

workLoopSync

node_modules\react-dom\cjs\react-dom.development.js (26466:0)

renderRootSync

node_modules\react-dom\cjs\react-dom.development.js (26434:0)

performConcurrentWorkOnRoot

node_modules\react-dom\cjs\react-dom.development.js (25738:0)

workLoop

node_modules\scheduler\cjs\scheduler.development.js (266:0)

flushWork

node_modules\scheduler\cjs\scheduler.development.js (239:0)

MessagePort.performWorkUntilDeadline

node_modules\scheduler\cjs\scheduler.development.js (533:0)

아래 코드에서 faker.name.fullname()과 faker.lorem.paragraph() 를 일반 텍스트로 변경할 경우에는 런타임 에러가 발생하지 않습니다.

faker 적용 직전 까지는 소스가 문제 없이 잘 동작하고 있는 상황이었습니다.

import shortId from 'shortid';
import produce from 'immer';
import { faker } from '@faker-js/faker';
/* eslint-disable default-param-last */
export const initialState = {
  mainPosts: [
    {
      id: 1,
      User: {
        id: 1,
        nickname: 'bumdigi',
      },
      Images: [
        {
          id: shortId.generate(),
          src: 'https://picsum.photos/200/300',
        },
      ],
      content: 'hello #해시태그 #인스타#안녕',
      Comments: [
        {
          id: shortId.generate(),
          User: {
            nickname: 'atom',
          },
          content: 'hi atom',
        },
        {
          id: shortId.generate(),
          User: {
            nickname: 'iron man',
          },
          content: 'I am Iron man',
        },
      ],
    },
  ],
  imagePaths: [],
  addPostLoading: false,
  addPostDone: false,
  addPostError: false,
  removePostLoading: false,
  removePostDone: false,
  removePostError: false,
  addCommentLoading: false,
  addCommentDone: false,
  addCommentError: false,
};

initialState.mainPosts = initialState.mainPosts.concat(
  Array(20)
    .fill()
    .map(() => ({
      id: shortId.generate(),
      User: {
        id: shortId.generate(),
        nickname: faker.name.fullName(),
      },
      content: faker.lorem.paragraph(),
      Images: [
        {
          src: faker.image.imageUrl(),
        },
      ],
      Comments: [
        {
          User: {
            id: shortId.generate(),
            nickname: faker.name.fullName(),
          },
          content: faker.lorem.sentence(),
        },
      ],
    }))
);

export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST';
export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS';
export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE';

export const ADD_POST_REQUEST = 'ADD_POST_REQUEST';
export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS';
export const ADD_POST_FAILURE = 'ADD_POST_FAILURE';

export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST';
export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS';
export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE';

export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST';
export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS';
export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE';

export const addPost = (data) => ({
  type: ADD_POST_REQUEST,
  data,
});

export const addComment = (data) => ({
  type: ADD_COMMENT_REQUEST,
  data,
});

const dummyPost = (data) => ({
  id: data.id,
  content: data.content,
  User: {
    id: 1,
    nickname: '범디기',
  },
  Images: [
    {
      src: 'https://picsum.photos/200/300',
    },
    {
      src: 'https://picsum.photos/200/300',
    },
    {
      src: 'https://picsum.photos/200/300',
    },
  ],
  Comments: [
    {
      User: {
        nickname: 'mingry',
      },
      content: '우와',
    },
    {
      User: {
        nickname: 'groom',
      },
      content: '냐옹',
    },
  ],
});

const dummyComment = (data) => ({
  id: shortId.generate(),
  content: data,
  User: {
    id: 1,
    nickname: 'tomy',
  },
});

const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {
    switch (action.type) {
      case ADD_POST_REQUEST:
        draft.addPostLoading = true;
        draft.addPostDone = false;
        draft.addPostError = null;
        break;
      case ADD_POST_SUCCESS:
        draft.mainPosts.unshift(dummyPost(action.data));
        draft.addPostLoading = false;
        draft.addPostDone = true;
        break;
      case ADD_POST_FAILURE:
        draft.addPostLoading = false;
        draft.addPostError = action.error;
        break;
      case REMOVE_POST_REQUEST:
        draft.removePostLoading = true;
        draft.removePostDone = false;
        draft.removePostError = null;
        break;
      case REMOVE_POST_SUCCESS:
        draft.mainPosts = draft.mainPosts.filter((v) => v.id !== action.data);
        draft.removePostLoading = false;
        draft.removePostDone = true;
        break;
      case REMOVE_POST_FAILURE:
        draft.removePostLoading = false;
        draft.removePostError = action.error;
        break;
      case ADD_COMMENT_REQUEST:
        draft.addCommentLoading = true;
        draft.addCommentDone = false;
        draft.addCommentError = null;
        break;
      case ADD_COMMENT_SUCCESS: {
        const post = draft.mainPosts.find((v) => v.id === action.data.postId);
        post.Comments.unshift(dummyComment(action.data.content));
        draft.addCommentLoading = false;
        draft.addCommentDone = true;
        break;
      }
      case ADD_COMMENT_FAILURE:
        draft.addCommentLoading = false;
        draft.addCommentError = action.error;
        break;
      default:
        break;
    }
  });
};

export default reducer;