SSG(Static Site Generation)とは？
事前にサーバーサイドでデータを取得するのでブラウザのJavaScriptが無効になっていてもデータを読み込むことができます。
初回のビルドを前もってやっておくのでページの描画速度が高速になります。
page内で以下のように実装
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { GetStaticProps } from 'next' import { GET_USERS } from '../queries/queries' import { GetUsersQuery } from '../types/generated/graphql' const Test: VFC<Props> = ({ users }) => { return ( {users?.map((user) => { return (<>{user.name}</>) })} ) } export default Test export const getStaticProps: GetStaticProps = async () => { const apolloClient = initializeApollo() const { data } = await apolloClient.query<GetUsersQuery>({ query: GET_USERS, }) return { props: { users: data.users }, revalidate: 1, } } |
なお、ソース内で利用しているapollo Clientの実装は以下の記事を参考にすると良いです。ApolloProviderを使わずにそのままapolloClientで問い合わせるサンプルです。
以下の記事ではApolloProviderを使ったサンプルを解説しています。また、Hasura(GraphQLとSQLを相互に変換してくれるミドルウェア）を使っているサンプルにもなります。通常のGraphQL（バックエンド言語としてはNode.jsやRailsなどがあるでしょうか）でもクライアント側はほぼ似たような実装になります。
Hasuraを使用するとバックエンド言語の知識があまりないフロントエンジニアでも手軽にサーバーサイドGraphQLを作成できるので導入されている案件も少なくないです。
テスト
SSGはサーバーサイドで動くのでbuildが必要になります。
|
1 |
yarn build |
実行
|
1 |
yarn start |
この記事へのコメントはありません。