Is there a way to make a page rendered with getServerSideProps non-blocking so it partially renders before getServerSideProps completes?

[laurencefass]

I have found a potential issue with getServerSideProps that if is valid I think is a potential design flaw of Next js that is contrary to the overall React design ethos and may need further discussion. In a sentence: getServerSide props blocks rendering of components until it returns. Would it be useful to have the option to allow a page to render before return props are available?

I have created a very simple component that fetches users from Next /api/users after initial render. I want to move the fetch from the client to the server using getServerSideProps but I cant see how to do so in a non-blocking way. The documentation says that gssp can return promises but i cant work out the correct syntax for both server and client code for this to work.

This is /api/users. Its a simple call to a mock API to retrieve dummy users wrapped in a delay.

export default function handler (
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  setTimeout(()=>{
    (async () => {
      let value = await fetch("https://jsonplaceholder.typicode.com/users");
      let result = await value.json();
      let data = result.slice(0,2);
      console.log("API fetch result", JSON.stringify(data, null, 4));
      res.status(200).json(data);
    })()
  }, 5000);  
}

This a component to fetch the data

export const Users = () => {
    let [users, setUsers] = useState();

    useEffect(()=>{
        (async () => {
            let value = await fetch("/api/users");
            let result = await value.json();
            setUsers(result);
        })()
    }, []);

    return <div>
            <h1>header</h1>
            {!users && <p>loading users</p>}
            {users && 
             <p className="fade-in">
               users: <pre>{JSON.stringify(users, null, 4)}</pre>
             </p>
            }
            <h2>footer</h2>
    </div>
}

If I move the fetch call to getServerSideProps and pass the users to the component, the component doesnt render until the delayed API call has completed. This does not delay component rendering when the fetch is done on the client but its unacceptable to delay rendering of the component while waiting for data to load in getServerSideProps.

This is the modified Users component with getServerSideProps included. It doesnt render until getServerSideProps returns so there doesnt appear to be a way to partially render elements within the component while waiting for server side props.

export const UsersFromServer = (props) => {

    return <div>
            <h1>header</h1>
            {!users && <p>loading users</p>}
            {users && 
             <p className="fade-in">
               users: <pre>{JSON.stringify(props.result, null, 4)}</pre>
             </p>
            }
            <h2>footer</h2>
    </div>
}

// the delayed fetch has been moved to the server
export async function getServerSideProps(context) {
    let { params, req, res, query } = context;
    let value = await fetch(host + "/api/users");
    let result = value.json();

    console.log("getServerSideProps called on the server", params, req, res, query)
    return {
      props: result
    }
 }

I am new to Next js so Im not sure if Im just approaching this in the wrong way. Is there a way to use getServerSideProps in a non-blocking way to allow partial render of UsersFromServer before the (delayed) fetch is completed?

The documentation [here][1] says

getServerSideProps should return an object with:

*props - An optional object with the props that will be received by the page component. It should be a serializable object or a Promise that resolves to a serializable object.*

This seems like a possible resolution to blocking component rendering but im not sure how to code it as its not in the official next js documentation

[laurencefass]

I tried recoding getServerSideProps to return a promise but this results in an error and appears to prove the documentation incorrect. i,e, getServerSideProps cant return a promise.

export async function getServerSideProps(context) {
    let { params, req, res, query } = context;

    // let value = await fetch(host + "/api/users");
    // let result = await value.json();
    // console.log("getServerSideProps called on the server", params, req, res, query)
    // return {
    //   props: {result}
    // }

    let propsPromise = fetch(host + "/api/users").then((value)=>{
        value.json().then((result)=>{
            return {
                props: {result}
            }          
        })
    })
    return {props: propsPromise};
  }

error:

Server Error
Error: Error serializing props returned from `getServerSideProps` in "/ssr".
Reason: Props must be returned as a plain object from getServerSideProps: `{ props: { ... } }` (received: `[object Undefined]`).

[Innei]

Can't, but can hack it when you use getInitialProps. There is a way to wrapper NextPage, and do not block page render when fetch data, just render <Loading /> when fetching data. See:
https://github.com/mx-space/kami/blob/master/src/components/biz/WrapperNextPage/index.tsx

[GabenGar]

If you need partial rendering then render the second part on the client. You only need to server-render for SEO and crawlers won't understand your deferred server rendering shenanigans anyway.

[Innei]

Hi there, try this. https://github.com/Innei/next-suspense

[scaryguy]

Frankly I think this is a very important question that begs an answer from the authors of Next.js. If there is no way to do things asynchronously within the getServerSideProps and if everything you do in it will literally prevent the whole page from being rendered; how useful it can be?

[laurencefass]

@scaryguy this is a limitation of Next 12 and the only documented way to achieve partial page renders in 12 is client side fetch. Next 13 fixes the problem with Server side components and Suspense. I would recommend Next13 for this and a lot of other features: its a major advance over 12.

[leerob]

#29117 (comment)