게시판을 만드는 중에 게시물들을 csr후에 useQuery로 받아오는 과정은 UI가 매끄럽지 못하고, SEO 적용도 안될뿐더러 게시물들의 최신상태를 나타내줄 수 없기에 ssr로 처리하기로 하였다.
getStaticProps나 getServerSideProps로 적용하는 방법은 아직 어렵다.
하지만 getInitialProps는 next-with-apollo lib으로 사용하기 쉽기 때문에 이 방법을 선택하였다.
npm i @apollo/client next-with-apollo
// components/apollo-client.ts
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { withApollo } from 'next-with-apollo';
export default withApollo(
({ initialState }) =>
new ApolloClient({
cache: new InMemoryCache().restore(initialState || {}),
uri:
process.env.NODE_ENV !== 'development'
? `${process.env.PRO_END_POINT}`
: `${process.env.DEV_END_POINT}`,
})
);
initialState는 Next서버에서 사용하던 cache가 초기화 되지 않도록 로딩될 때마다 restore메소드를 이용해 cache에 데이터를 다시 설정하는 과정이고 uri는 endpoint의 절대 경로이다.
// pages/_app.tsx
import { ApolloProvider } from '@apollo/client';
import withApollo from '../components/apollo-client';
import App from 'next/app';
function MyApp({ Component, pageProps, apollo }) {
return (
<ApolloProvider client={apollo}>
<Component {...pageProps} />
</ApolloProvider>
);
}
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};
export default withApollo(MyApp);
모든 pages의 getInitialProps에서 apollo client를 사용할 수있도록 설정.
Board.getInitialProps = async (ctx) => {
const { curPage, id: star } = ctx.query;
const result = await ctx.apolloClient.query({
query: ALLPOSTS,
variables: { category: `${star}`, curPage },
});
return { ...result.data.allPosts, curPage, star };
};
원하는 pages의 ctx.apolloClient에 접근하여 ssr 쿼리 가능.