getStaticProps with Apollo Client vs SWR Hook. One flashes the screen.

[Dannymx]

As I'm learning more about Next.js, I decided to run two examples, one using Apollo Client (2.6) and one with the SWR hook. From what I understood reading the docs, if I want to use static generation (so the user doesn't have to wait for rendering) I have to call getStaticProps and fill the props. As I was checking the with-apollo example, I saw getStaticProps was used to be able to grab blocking data while sending a quick response to the client, I'm still confused about how the example was done but I think the data is grabbed on server side, cached, then the whole response (with the data) is sent to the browser which extracts the cache and renders without waiting. So far so good, I don't see any flashing or "Loading..." div returned.

But then I tried SWR, which in the docs says you can use it if you want to render everything except the data that needs to be fetched, so you get static rendering without having to wait for the blocking data. But as I created the example every time I reloaded the page, I could see the "Loading..." in just a blank page being returned, my expectation was to see everything else (all the components, navigation, etc) except the data.

Is there something wrong I'm doing here? Is my implementation incorrect?

All I want is to be able to render everything quickly (static generation) and fetch all the small pieces of data in the client side without having a blank screen or flashing. So far with Apollo seems to be working fine, but not so much with SWR.

Below is the same index.js page, one with Apollo and one with SWR.

Done with Apollo:

import React from "react";
import Link from "next/link";
import MainLayout from "../components/Layout";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
import { initializeApollo } from "../lib/apolloClient";
import { Card, List } from "antd";
import { GET_CATEGORIES } from "../components/Navbar";

const Home = () => {
  const { data, loading, error } = useQuery(GET_BEERS);

  if (loading) return <h1>Loading</h1>;
  if (error) return <h1>Error loading your data.</h1>;

  const renderCard = (beer) => {
    return (
      <List.Item>
        <Link href={`${beer.name}`}>
          <a>
            <Card
              title={beer.name}
              hoverable
              cover={
                <img src={`http://localhost:1337${beer.image.url}`} alt="" />
              }
            ></Card>
          </a>
        </Link>
      </List.Item>
    );
  };

  return (
    <MainLayout>
      <style jsx>
        {`
          li img {
            max-width: 100px;
          }
        `}
      </style>
      <List
        grid={{ gutter: 16, column: 4 }}
        dataSource={data.beers}
        renderItem={(beer) => renderCard(beer)}
      />
    </MainLayout>
  );
};

const GET_BEERS = gql`
  query {
    beers {
      id
      name
      created_at
      image {
        url
      }
      category {
        name
        slug
      }
    }
  }
`;

export const getStaticProps = async (ctx) => {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: GET_BEERS,
  });

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
    unstable_revalidate: 1,
  };
};

export default Home;

Done with SWR:

import React from "react";
import Link from "next/link";
import useSWR from "swr";
import { request } from "graphql-request";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";
import { initializeApollo } from "../lib/apolloClient";
import { Card, List } from "antd";
import { GET_CATEGORIES } from "../components/Navbar";
import MainLayout from "../components/Layout";

const Home = () => {
  const { data, error } = useSWR(GET_BEERS, (query) =>
    request(`http://localhost:1337/graphql`, query)
  );

  if (error) return <h1>Failed to load data</h1>;
  if (!data) return <h1>Loading...</h1>;

  const renderCard = (beer) => {
    return (
      <List.Item>
        <Link href={`${beer.name}`}>
          <a>
            <Card
              title={beer.name}
              hoverable
              cover={
                <img src={`http://localhost:1337${beer.image.url}`} alt="" />
              }
            ></Card>
          </a>
        </Link>
      </List.Item>
    );
  };

  return (
    <MainLayout>
      <style jsx>
        {`
          li img {
            max-width: 100px;
          }
        `}
      </style>
      <List
        grid={{ gutter: 16, column: 4 }}
        dataSource={data.beers}
        renderItem={(beer) => renderCard(beer)}
      />
    </MainLayout>
  );
};

const GET_BEERS = `
  query {
    beers {
      id
      name
      created_at
      image {
        url
      }
      category {
        name
        slug
      }
    }
  }
`;

export const getStaticProps = async (ctx) => {
  return {
    props: {},
  };
};

export default Home;

[leerob]

The reason your entire application is showing loading, and not just the data you're fetching, is because of this line.

if (!data) return <h1>Loading...</h1>;

If you'd like to only render the list of beers client side, you should only apply the loading state to that piece of the returned JSX.

  return (
    <MainLayout>
      <style jsx>
        {`
          li img {
            max-width: 100px;
          }
        `}
      </style>
      {!loading && <List
        grid={{ gutter: 16, column: 4 }}
        dataSource={data.beers}
        renderItem={(beer) => renderCard(beer)}
      />}
    </MainLayout>
  );

If you're using SWR, you can remove getStaticProps since you're doing client-side fetching 👍

[Dannymx]

That makes sense, I don't know why I didn't think about it that way, I guess I was too focused on the other aspects of learning Next. 😅
Thanks.