Pages

In Blitz, a page is a

React Component exported from a .js, .jsx, .ts, or .tsx file in a pages directory. Each page is associated with a route based on its file name.

All of the following are valid pages:

• app/pages/about.tsx
• app/projects/pages/projects/index.tsx
• app/tasks/pages/projects/[projectId]/tasks/[taskId].tsx

Example: If you create

app/pages/about.js that exports a React component like below, it will be accessible at /about.

function About() {
  return <div>About</div>
}
export default About

Pages with Dynamic Routes

Blitz supports pages with dynamic routes. For example, if you create a file called

app/pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.

To learn more about routing, check the

Routing documentation.

Automatic Static Optimization

By default, Blitz pre-renders the static HTML for every page unless you explicitly opt-in to server-side rendering.

For pages with dynamic data, the page's loading state will be pre-rendered.

Static Page Generation for Unauthenticated Pages

For pages accessible by anyone without authentication, we recommend using

getStaticProps so the page, along with it's data, is 100% statically generated during pre-rendering (like Gatsby). Then the entire static page can be cached on a CDN. This is perfect for public pages like blog posts.

There are two methods for use with static generation, and you'll often use both together.

1. getStaticProps - To load the data for your page. See the getStaticProps documentation for more details.
2. getStaticPaths - To load the possible paths for your page. See the getStaticPaths documentation for more details.

Server-side Rendering

Also referred to as "SSR" or "Dynamic Rendering".

If a page uses Server-side Rendering, the page HTML is generated on each request.

To use Server-side Rendering for a page, you need to

export an async function called getServerSideProps. This function will be called by the server on every request.

See the

getServerSideProps documentation for more details.