서버사이드 렌더링 getServersideProps 적용

개발공부·2023년 1월 17일

(next.js + redux-toolkit, saga +tailwindcss) 프로젝트(영단어, SNS, 게임)

목록 보기

27/43

* 서버사이드 렌더링

▶ 브라우저 접속 시 한 번에 정보를 가져옴
▶ 컨텐츠 정보가 빨리 보여짐
▶ 화면을 받아올 때 먼저 데이터 불러오기

* 결과

[pages/post.js]에 getServersideProps 적용

▶ NEXT_REDUX_WRAPPER_HYDRATE 내 diff에서 값을 확인

* 오류들

link 관련해서 오류가 생긴 경우

//해결책(링크는 한 개만 연결)
<Link href={`/profile`}>
                <a>{me?.Followers.length}</a>
</Link>

createWrapper 관련 글
store.getState 에러

store.getState is not a function at unknown
saga 오류

Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware
at Function.sagaMiddleware.run

* 서버사이드 렌더링 적용(코드)

▶ _app.js와 store.js 바꾸기

[pages/_app.js]

import React from "react";
import Head from "next/head";
import "antd/dist/antd.css";
import "tailwindcss/tailwind.css";
import wrapper from "../redux/store";

const App = ({ Component }) => {
  return (
    <>
      <Head>
        <title>engWord</title>
      </Head>
      <Component />
    </>
  );
};

export default wrapper.withRedux(App);

[store.js]

import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import { createWrapper } from "next-redux-wrapper";

import rootReducer from "./feature";
import rootSaga from "./sagas/rootSaga";

import logger from "redux-logger";

const isDev = process.env.NODE_ENV === "development";

const createStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const store = configureStore({
    reducer: rootReducer,
    middleware: middlewares,
    devTools: isDev,
  });
  store.sagaTask = sagaMiddleware.run(rootSaga);
  return store;
};

const wrapper = createWrapper(createStore, {
  debug: isDev,
});

export default wrapper;

[pages/posts.js]

import wrapper from "../redux/store";

export const getServerSideProps = wrapper.getServerSideProps(
  async (context) => {
    const cookie = context.req ? context.req.headers.cookie : "";
    axios.defaults.headers.Cookie = "";
    if (context.req && cookie) {
      axios.defaults.headers.Cookie = cookie;
    }

    context.store.dispatch(loadMyInfoRequest());
    context.store.dispatch(loadPostsRequest());
    context.store.dispatch(END);
    await context.store.sagaTask.toPromise();
  }
);