getInitialProps vs getServerProps

[naissa12]

I'm trying to understand how getinitialProps works.

I want to render a list of books as a shared component.

1. If I use getInitialProps will the list of books be outdated to what was the list at the time I ran npm run build?
2. If I use getServerProps what happens from a user perspective? Is that a more up to date list?

[timneutkens]

If I use getInitialProps will the list of books be outdated to what was the list at the time I ran npm run build?

No, it'll be server-rendered on-demand.

If I use getServerProps what happens from a user perspective? Is that a more up to date list?

getServerSideProps has slightly different semantics than getInitialProps. On client-side transitions getInitialProps will execute it's code in the browser, whereas with getServerSideProps it will call an API endpoint of sorts that will run getServerSideProps and return the results.

The code in getServerSideProps is not sent to the browser, which makes bundle sizes smaller.

[mustafa-alfar]

So getServerSideProps does not fetch data on the client-side, does it?
if so, do this means that the component which consumes getServerSideProps will render only on the server?
@timneutkens

[timneutkens]

https://nextjs.org/docs/basic-features/data-fetching#only-runs-on-server-side

When you request this page on client-side page transitions through next/link (documentation) or next/router (documentation), Next.js sends an API request to the server, which runs getServerSideProps. It’ll return JSON that contains the result of running getServerSideProps, and the JSON will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have getServerSideProps defined.

[mustafa-alfar]

Thank you,
I noticed a code error in the documentation.
https://nextjs.org/docs/basic-features/data-fetching#reading-files-use-processcwd
and I do not know where to issue it.
const filePath = path.join(postsDirectory, filename) const fileContents = fs.readFileSync(fullPath, 'utf8')
error is declare filePath and use it as fullPath.

[timneutkens]

Fixed! 074c60e

At the bottom of every page you can see a edit on github button where you can open a PR

[tunesmith]

On client-side transitions getInitialProps will execute its code in the browser

One minor correction that bit us: For a custom _app with getInitialProps, on client-side transitions getInitialProps will execute its code on the server side when navigating to pages that have getServerSideProps.

[aralroca]

I have in some places a getInitialProps to fetch the data on SSR to serve the content directly, but then during the navigation, in the browser, it skips the fetch on the getInitialProps to don't block the navigation, and it displays the skeletons of the page doing the fetch on a React hook. How can I handle this case in getServerSideProps? Is there some way?

[Icehunter]

@lfades This is also my question.

I work on a site that requires SEO rendering with SSR but in the case a user has navigated to the page I want to ensure that a loading spinner is present only on the component that uses swr along with not blocking rendering of the entire tree if it doesn't need to be.

There are other components on that page that can be rendered and not block the "results" list.

Here is a component example:

import React, { useEffect, useState } from 'react';

import { NextPage } from 'next';

interface IResultListProps {
  data?: any[];
}

export const ResultList: NextPage<IResultListProps> = (props) => {
  console.log(props);

  const [data, setData] = useState(props.data);

  useEffect(() => {
    if (!props.data) {
      setData([{ item: 2 }]);
    }
  }, [props.data]);

  // imagine that there's a dozen components here, and the list component is the only one with a loader as the rest are static
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

ResultList.getInitialProps = async (): Promise<{}> => {
  const props: { [index: string]: any } = {};
  if (typeof window === 'undefined') {
    console.log('preFetchingData');
    props.data = [{ item: 1 }];
  } else {
    console.log('CSR, will have useEffect and loader to populate');
  }
  return props;
};

I've looked at the documentation and getInitialProps is the only function that runs on both server (when the site first renders) and subsequently it's never called on the server again and only clientside.

How on earth is this achievable if getInitialProps is going away down the road?

I can't pre-build the site. The data updates every 5 seconds.

I can't have SSR for everything; the user experience will suffer.

[matej-io]

I agree, getInitialProps, seems to be useful when you want to cache data on client side and re-fetch it only occasionally, where getServerSideProps will fetch the data always and that seems a bit slowish in some cases.

[rafaelalmeidatk]

FWIW there is an open issue to track an option to defer gSSP on client-side navigation: #13910

[tunesmith]

If it helps, I've noticed that context.req.url always starts with /_next/data on client-side transitions (whether it is running on client or server).

[akhmadshin]

#32243 (comment)

[hoseinladmakhi]

hi good job for best tool that created .
i have question about execution of getServerSideProps on navigatio change with next/link that can we stop executation of this method on navigation change.
i saw on the documentation of next js that tell we can pass the shallow to stop execution of getServerSideProps.
but it is too hardcode that we want pass shallow .
is anyway exists that tell if this page has X data that fetch from getServerSideProps dont execute this method anyway but if the data dosnot exists please execute this method for fetching data

Thanks for your answering bro

[leerob]

#29117 (comment)