getStaticProps
It is used to provide data to be rendered in the Server side rendering.
Basically does the network calls or side-effects to be seen in server-side rendering.
getStaticPaths
Defines the paths beforehand which might be needed for the [postId].js (for suppose the index.js file is under a "posts" folder which has a getStaticProps).
The data for the next pages (those linked into the parent) is loaded in the form of their .json file while the page itself is pre-loaded as html and then Javascript is loaded.
For a Dynamic page having 100's of postId, a feasible solution is ->
Fetch all the posts and store their postIds in an array and then return it in the format used by getStaticProps.
fallback
fallback key is used to define a path not returned by the getStaticPaths.
fallback: false _-> an undefined path renders the 404 page by default.
fallback: _true -> In that case a fallback UI is rendered until it is fetched by the getStaticProps.
And when it is fetched it is available just like a pre-fetched page aould (as HTML and JSON).
If the url doesn't exist only in that case getStaticProps can send a notFound flag for that url for which the fallback is rendered and then the 404 page.
The user experiences a switch between the fallback and the actual page in case of a page which is not pre-fetched.
After it has been fetched it no longer shows the fallback UI in subsequent calling.
Note
If the getStaticProps() returns a chunk of pages which are not all returned back by getStaticPath() and if such a path which is returned by getStaticProps and not by getStaticPath() then too the fallback UI is not triggered.
In the preview of the browser, the 1st render will always show fallback UI even when the main page has loaded the actual page and subsequent page loads will render the actual page in preview too.
In fact they are rendered as and when the user scrolls on the parent url and even when they are fetched individually.
fallabck: 'blocking'
In this case, the behaviour is almost similar to that of fallback:true
but the only difference is there is no fallback UI rendered instead there is a slight delay since it is not already loaded.
Also the preview will give the actual page in the first render itself.
Top comments (0)