William Kurniawan
Jul 24, 2020
getServerSideProps
: Fetch data on each request (server-side rendering).getStaticPaths
: Specify dynamic routes to pre-render based on data.getStaticProps
: Fetch data at build time.getServerSideProps
(server-side rendering)async
function called getServerSideProps
from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps
.const Page: NextPage<PageProps> = ({ data }) => {
// render data...
};
// this function gets called on each request to this page on server-side
export const getServerSideProps: GetServerSideProps = async (context) => {
const res = await fetch("https://www.example.com/posts");
const data = await res.json();
return {
props: {
data, // will be passed to the page component as props
},
};
};
getServerSideProps
?getServerSideProps
only if you want to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps
because the server must compute the result on every request, and a CDN cannot cache the result without extra configuration.getServerSideProps
only runs on server-side and never runs on the browser and can only be exported from a page. When you request a page directly, getServerSideProps
runs at the request time, and this page will be pre-rendered with the returned props. In addition, when you request this page using client-side transitions through next/link
or next/router
, Next.js will send an API request to the server. This will run getServerSideProps
. And then, it will return a JSON that contains the data which will be used to render the page.getStaticProps
(static generation)async
function called getStaticProps
from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps
. Pages that use getStaticProps
will generate HTML and JSON files, both of which can be cached by a CDN for performance. This makes getStaticProps
much faster than getServerSideProps
. Also, the code inside getStaticProps
won't even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers.const Page: NextPage<PageProps> = ({ data }) => {
// render data...
};
// this function gets called at build time on server-side
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch("https://www.example.com/posts");
const data = await res.json();
return {
props: {
data, // will be passed to the page component as props
},
};
};
getStaticProps
?getStaticProps
if:getStaticProps
only runs at build time, it does not receive data that's only available during request time, such as query parameters or HTTP headers as it generates a static HTML file. In development, however, getStaticProps
will run on each request on server-side. Same with getServerSideProps
, getStaticProps
can only be exported from a page.getStaticPaths
(static generation)getStaticPaths
is a "helper function" of getStaticProps
. For example, if a page has dynamic routes and uses getStaticProps
, it needs to define a list of paths that have to be rendered to HTML at build time. If you export an async
function called getStaticPaths
from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths
.export const getStaticPaths: GetStaticPaths = async () => {
const res = await fetch("https://www.example.com/posts");
const data = await res.json();
return {
fallback: true,
paths: data.map((post) => `/p/${post.slug}`),
};
};
getStaticPaths
should return an object which has fallback
and paths
as its key. The path
key determines which paths will be pre-rendered. For example, you have a page that uses dynamic routes /pages/p/[slug].tsx
. If you export the above getStaticPaths
, Next.js will statically generate /p/hello-world
, /p/new-world
, etc. using the page component in /pages/p/[slug].tsx
. The fallback
key must contain a boolean
value. If fallback
is false
, any paths not returned by getStaticPaths
will render a 404 page. On the other hand, if fallback
is true
, any paths not returned by getStaticPaths
will be served on a "fallback" version of the page. In the background, Next.js will statically generate the HTML and JSON from the requested path. This includes running getStaticProps
. When that's done, the browser receives the JSON for the generated path. This will be used to automatically render the page with the required props. From the user's perspective, the page will be swapped from the "fallback" page to the actual page. At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will get the previously generated page, just like other pages pre-rendered at build time.getStaticPaths
?getStaticPaths
if you are statically pre-rendering pages that use dynamic routes.getStaticProps
on a page with dynamic route parameters, you must use getStaticPaths
. You cannot use getStaticPaths
with getServerSideProps
. Same with getStaticProps
, getStaticPaths
only runs at build time on server-side. In development, however, getStaticPaths
will run on each request on server-side. Also, getStaticPaths
can only be exported from a page. You can't export it from non-page files.Copyright © 2020 William Kurniawan. All rights reserved.